EXPERT 03 — Socle couleur, accessibilité WCAG 2.2 et performance — TERO GROUP

Périmètre : tero.be (maison mère) et toutes les sous-activités du groupe Tero.

Objet : socle couleur + accessibilité + performance, chiffré, vérifiable, directement

intégrable dans tero-group-rules.md, le design system et les skills.

Méthode : recalcul intégral des contrastes (formule WCAG de luminance relative),

relevé réseau du 15 octobre 2026 sur https://tero.be/fr/, lecture critique de

tero-group-rules.md v1.0.0 (645 lignes), DESIGN.md, tokens.css, design-tokens.json

et du modèle _ref/teropadelclub/…/tero-rules.md.

Étiquettes : [MESURE] = relevé ou calcul reproductible · [RÈGLE] = décision de système

proposée, opposable une fois validée · [À VALIDER CLIENT] = question ouverte.

Aucun fait de marque n'est inventé ici : les couleurs utilisées sont celles mesurées dans

l'audit du 15/10/2026 ; les seules valeurs nouvelles proposées sont des neutres de système

(texte et bordure), explicitement étiquetées.

---

1. Verdict sur l'existant — ce qui tient, ce qui casse

1.1 Ce qui est exact (vérifié par recalcul indépendant)

Les 21 ratios de contraste publiés dans le contexte, dans docs/AUDIT-TERO-BE-2026.md § 3.5,

dans tero-group-rules.md § 2.4 et dans design-tokens.json ont été recalculés un par un avec la

formule WCAG (sRGB → linéarisation → 0,2126 R + 0,7152 V + 0,0722 B → (L1+0,05)/(L2+0,05)).

Résultat : 21/21 exacts, écart maximal 0,00. La base chiffrée du lead est fiable, y compris

pour les dérives (#5E93A7 = 3,38 · #B00000 = 7,38 · #680224 = 12,94 · #323232 = 12,82). [MESURE]

Cela signifie que les erreurs relevées ci-dessous ne sont pas des erreurs de calcul : ce sont

des erreurs de règle (une valeur juste utilisée dans un contexte où elle échoue).

1.2 Les 20 constats qui cassent le système — par priorité

Priorité P0 = bloque la conformité, à trancher avant toute production de composants.

Priorité P1 = à corriger avant la première livraison. P2 = dette de qualité.

---

2. Matrice de contraste complète (recalculée)

2.1 Méthode exacte — reproductible

Formule W3C utilisée pour tous les chiffres de ce document (aucune valeur recopiée) :

// sRGB -> luminance relative

c = canal / 255

c_lin = (c <= 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126R_lin + 0.7152V_lin + 0.0722*B_lin

ratio = (max(L1,L2) + 0.05) / (min(L1,L2) + 0.05)

Seuils appliqués : texte 4,5:1 (AA) / 7:1 (AAA) ; grand texte 3:1 (≥ 24 px, ou

≥ 18,66 px en graisse 700) ; non-texte (bordure, icône porteuse de sens, anneau de focus,

graphique) 3:1 (SC 1.4.11).

Luminances relatives calculées (utiles aux calculs de dérivées) :

2.2 Neutres et couleurs de marque × fonds clairs — texte

Lecture : ratio sur fond #FFFFFF / #F6F4F4 / #E5E6E5 / #D9D9D9, puis verdict pour du texte courant.

Trois échecs non documentés par le lead, à intégrer :

• teal sur #E5E6E5 = 4,34:1 et teal sur #D9D9D9 = 3,84:1 → un lien teal posé sur un fond de

champ ou sur une plaque filet échoue AA. [MESURE]

• terracotta sur #D9D9D9 = 4,09:1 → un chiffre terracotta sur plaque échoue AA. [MESURE]
• rose vif = 3,01:1 sur #E5E6E5 → le seuil « grand texte » n'est plus tenu dès que le fond est

gris clair (3,01 est à la limite, marge nulle). [MESURE]

2.3 Fonds sombres — texte et graphique

Conséquence opposable : sur bande profonde, seuls **blanc, sable, rose poudré, cyan, rose vif

(≥ 18,66 px gras) et gris désactivé #B9B9B9 (texte secondaire)** sont utilisables en texte.

Le teal et le terracotta n'y sont que des graphiques sur noir pur, et jamais sur #212121.

2.4 Texte sur aplat de marque — la règle du texte noir

Règle des trois familles [RÈGLE] :

• Famille A — aplats à texte blanc : teal, pétrole, terracotta. Interdits en aplat sous du texte noir.
• Famille B — aplats à texte noir : sable, rose poudré, cyan, rose vif, #B9B9B9, #D9D9D9.

Interdits en texte sur fond clair.

• Famille C — neutres de texte : #000000, #212121, #323232, #004B69 (+ #5F5F5F proposé).

Jamais utilisés comme aplat sous du texte blanc sauf #004B69 (9,50).

2.5 Accents sur aplats clairs (texte posé sur une pastille sable / rose / cyan)

Règle : sur un aplat coloré, le texte est noir, sauf sur sable et rose poudré où le pétrole

#004B69 est également autorisé (6,61 / 5,01). Jamais de teal, jamais de rose vif en texte sur aplat.

2.6 Anneau de focus — pourquoi un seul anneau ne peut pas marcher

Ratio de l'anneau (couleur) contre le fond adjacent à l'anneau. Seuil 3:1 (SC 1.4.11 + 2.4.13).

Aucune ligne n'est conforme sur toute la largeur. Le teal — imposé aujourd'hui — est conforme

sur 4 fonds sur 8 et échoue sur 4, dont deux surfaces directement produites par la charte

(bouton teal § 7.1, bande #212121 § 7.3). D'où la solution du double anneau (§ 3.3), seule

construction qui reste ≥ 3:1 quel que soit le fond.

2.7 Non-texte (SC 1.4.11) — bordures, icônes, graphiques porteurs de sens

2.8 Rôles autorisés par couleur — table de décision opposable

2.9 Échecs mesurés et substitution imposée

---

3. Rôles sémantiques couleur (jetons) et états

3.1 Jetons sémantiques — à ajouter au design system

Les jetons de base existent (tokens.css § 2.1/2.2). Il manque la couche sémantique complète

et deux neutres de système. Proposition [RÈGLE] :

Deux seuls neutres nouveaux sont nécessaires (#5F5F5F, #767676). Ce ne sont pas des couleurs

de marque : ce sont des neutres de lisibilité, exigés par SC 1.4.3 et SC 1.4.11. Ils n'augmentent

pas la palette (7 couleurs + 4 neutres + 2 jetons d'accessibilité) et doivent être documentés comme tels.

[À VALIDER CLIENT — arbitrage charte : accepter 2 neutres de lisibilité, ou accepter des échecs AA.]

3.2 Ce qu'il faut retirer du socle livré

• --tero-drift-sage (#97AB83) et toute la famille « drift » : à sortir de :root, préfixées

--x-drift-, dans un fichier de résorption, jamais dans les jetons distribués. [RÈGLE]

• --tero-muted rebaptisé --text-disabled : le nom « muted » a produit l'erreur F2.

Un nom qui dit « désactivé » empêche l'usage en placeholder. [RÈGLE]

3.3 Focus visible — le double anneau (correction de F1)

Construction conforme partout, sans dépendre du fond :

:root{

--focus-ring:#000000; / anneau extérieur /

--focus-halo:#FFFFFF; / gorge : reprend le fond de la page /

--focus-width:2px;

--focus-offset:2px;

}

.surface-inverse,[data-theme="dark"]{

--focus-ring:#FFFFFF; --focus-halo:#000000;

}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{

outline:var(--focus-width) solid var(--focus-ring);

outline-offset:var(--focus-offset);

box-shadow:0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-halo);

}

@media (forced-colors:active){

:focus-visible{ outline:3px solid Highlight; }

}

Preuve de conformité : de l'intérieur vers l'extérieur, bouton teal sur section blanche →

teal/halo blanc = 5,43:1 ✅ → halo blanc/anneau noir = 21,00:1 ✅. Bouton noir → noir/halo

blanc 21,00 ✅ → blanc/anneau noir 21,00 ✅. Badge sable sur bande noire → sable/halo noir

14,61 ✅ → noir/anneau blanc 21,00 ✅. Aucun cas d'échec possible.

Compléments opposables (SC 2.4.11 / 2.4.12 / 2.4.13) :

• outline-offset ≥ 2 px et épaisseur ≥ 2 px : anneau ≥ 2 px de périmètre (2.4.13).
• Aucun overflow:hidden sur un ancêtre d'élément focalisable sans padding suffisant : l'anneau

serait rogné.

• scroll-margin-block-start: max(6rem, hauteur du header collant + 1rem) sur tout élément

focalisable : un en-tête collant ne doit jamais recouvrir l'élément focalisé (2.4.11), et

scroll-padding-block-start: 6rem seul ne suffit pas pour le focus clavier.

• Retour de focus obligatoire : fermeture de menu/modale → focus rendu à l'ouvreur.
• Piège de focus dans les modales (inert sur le reste du document), échappable par Échap.
• Ne jamais utiliser outline:none ni outline:0 sans remplacement équivalent (interdit § 7.1).

3.4 États — quelles couleurs peuvent porter un état

Trois règles d'état opposables [RÈGLE] :

• Interdiction absolue : #FAD282, #D7B4B4, #00B7FF, #FF1D58, #B9B9B9, #D9D9D9 ne portent

jamais un état en couleur de texte (aucune ne passe 4,5:1 sur fond clair). Elles ne peuvent

être que le fond d'un badge à texte noir.

• Le teal porte deux sens (lien/accent et succès). Acceptable, mais : un succès s'exprime

toujours par icône + texte + couleur — jamais par la couleur seule. Sinon le lecteur ne peut

pas distinguer un lien d'un succès.

• Aucune couleur de dérive ne porte un état. #B00000 (7,38 sur blanc, conforme) est

interdit : il appartient à la dérive ; l'erreur est terracotta #B93815.

#FF4A4A (3,32 sur blanc) est non conforme en plus d'être une dérive.

SC 1.4.1 — l'information ne passe jamais par la couleur seule : tout état porte une icône

distincte et un libellé explicite (« Erreur : le téléphone doit être au format +32 4XX XX XX XX »).

3.5 Liens en ligne — la règle du soulignement

Teal #007864 contre le texte noir #000000 = 3,87:1 (≥ 3:1, technique G183 satisfaite).

Mais G183 exige un indice supplémentaire au survol/focus. [RÈGLE] :

• Tout lien en ligne dans un paragraphe est souligné en permanence (text-decoration-thickness

1 px, underline-offset 0,15em). C'est la seule solution non ambiguë pour un daltonien et pour le

mode contraste élevé.

• Une pastille/bouton portant un lien n'a pas besoin de soulignement (forme + libellé).
• :visited : #004B69 (9,50) — jamais une teinte non conforme, jamais la seule différence.
• Interdiction de la couleur seule pour distinguer un lien (SC 1.4.1).

3.6 Contraste élevé / forced-colors / préférences

---

4. Checklist de conformité WCAG 2.2 — testable

4.1 Les 9 critères ajoutés par WCAG 2.2 (aujourd'hui absents des règles)

4.2 Checklist AA — par famille, avec la preuve exigée

A. Perceptible

B. Utilisable

C. Compréhensible

D. Robuste

4.3 Portes CI obligatoires (à ajouter à § 16.2, aujourd'hui 0/8)

4.4 Anti-patterns d'accessibilité à ajouter à DESIGN.md § 9

• Supprimer ou affaiblir le focus pour des raisons esthétiques.
• Utiliser un placeholder comme étiquette de champ.
• Signaler un état (erreur, succès, sélection) par la couleur seule.
• Poser du texte sur un fond qui n'atteint pas le seuil de contraste de son niveau.
• Exposer un jeton de dérive (--tero-drift-sage) dans le socle livré.

---

5. Performance — budget mesurable et pièges mesurés

5.1 Ce que le site sert aujourd'hui — [MESURE 15/10/2026]

Lecture : la dette n'est pas la marque — le kit de palette pèse 3,8 Ko. La dette est

le framework (jet-engine + Elementor + mega-menu = 137 Ko compressés pour 10 feuilles sur ≥ 34).

Le socle TERO peut et doit viser ≤ 45 Ko brotli tout compris, soit un tiers de ce que sert

aujourd'hui une fraction de l'accueil. [RÈGLE]

5.2 Budget cible — à inscrire dans § 11

Précision importante [RÈGLE] : la cible LCP < 1,5 s du groupe est plus stricte que le

seuil « bon » de Google (≤ 2,5 s). Elle n'est opposable que si elle est mesurée **au p75 sur le

terrain (CrUX / RUM)**, pas en laboratoire. Sinon elle devient un chiffre invérifiable. À inscrire

explicitement : « LCP ≤ 1,5 s au p75 mobile, données terrain, calculées sur 28 jours ».

5.3 Polices — le levier le plus rentable

• 3 graisses suffisent : 400 (corps), 600 (emphase et CTA), 700 (titres). Le 500 n'est

conservé que si un usage réel est mesuré ; sinon il sort du socle (−18 Ko). [RÈGLE]

• Sous-ensemblage latin + latin-ext (accents français et néerlandais : é è ê ë à â ç ï ô û ü,

ij, ij) ; jamais de sous-ensemble latin seul sur un site FR/NL/EN.

• font-display: swap (aujourd'hui auto = jusqu'à 3 s de texte invisible).
• 1 seul preload, celui de la graisse du H1 (700). Précharger 2 graisses met 36 Ko en

concurrence de la photo — c'est le LCP sur tero.be. [RÈGLE]

• Repli métrique obligatoire pour annuler le décalage de swap :

@font-face{font-family:"Almarose Fallback";src:local("Arial");size-adjust:…;ascent-override:…;}

Les valeurs se mesurent (une fois) avec le font-metrics tool, puis se figent. [RÈGLE]

• Aucune police tierce (Google Fonts) : Almarose est déjà auto-hébergée ✅.
• WildYouth : si le client la garde, elle devient une 4e requête et doit être en

font-display: swap, préchargée uniquement sur les pages qui l'utilisent. Sans arbitrage :

non chargée.

5.4 Images et LCP

• Le LCP de tero.be est une photo. Interdits : background-image pour le hero (non

préchargeable, non indexable), loading="lazy" sur le hero, image redimensionnée par le CSS.

• Hero : AVIF (repli WebP), largeur exacte du viewport, fetchpriority="high", préchargé,

≤ 150 Ko.

• srcset 480 / 768 / 1024 / 1440 / 1920 + attribut sizes : un srcset sans sizes ne sert

à rien. Mesure de référence sur le projet padel : 1 209 Ko d'images sur une page en 390 px

avec une seule taille de fichier par image. [MESURE — projet padel, non transposée au groupe]

• width + height (ou aspect-ratio) sur toutes les images : le site groupe le fait déjà

(9/9 mesurées) ✅ — c'est à maintenir dans le socle.

• loading="lazy" sur tout ce qui est sous le premier écran (aujourd'hui 0/9) et

decoding="async" hors LCP.

• Formats : AVIF d'abord, WebP en repli, JPEG en dernier recours ; nommage

tero-entite-sujet-largeur.ext (§ 15) conservé.

5.5 INP et JavaScript

• Supprimer jQuery et jquery-migrate : inutiles sur un socle moderne (−30 Ko compressés,

−1 requête bloquante).

• Aucun tiers avant consentement : Cookiebot, Brevo, WonderPush sont aujourd'hui chargés sur

l'accueil. Un SDK de push (WonderPush) est un coût d'INP et un sujet RGPD — à trancher.

[À VALIDER CLIENT]

• Budget de script : ≤ 4 requêtes, chacune ≤ 25 Ko ; tout script non critique en defer.
• Aucune tâche principale > 100 ms avant la première interaction ; animations en CSS ou en

requestAnimationFrame court.

• Les composants interactifs (menu, accordéon, carrousel) ne doivent jamais bloquer le fil

principal : content-visibility sous le pli, IntersectionObserver plutôt que scroll listener.

• Un module = un point d'entrée (piège mesuré sur le projet padel : script initialisé deux

fois, écouteurs posés en double → INP et focus dégradés).

5.6 CLS

• Repli métrique des polices (§ 5.3) — le décalage de swap est la première cause de CLS.
• width/height ou aspect-ratio sur 100 % des médias, y compris les iframes (YouTube).
• Bandeau cookies en superposition (position: fixed), jamais inséré dans le flux.
• Aucune insertion de contenu au-dessus du pli après chargement (bandeaux promo, « X personnes

consultent »).

• Espace réservé pour les blocs dynamiques (formulaire, carte, témoignage).

5.7 Protocole de mesure opposable

---

6. Mode sombre — décision et construction

Recommandation : ne pas livrer de thème sombre global au lancement. [RÈGLE proposée]

Motifs : (1) aucun signal de marque ni de demande mesurée ; (2) le site groupe est **noir et blanc

sur fond blanc, la « bande profonde » existe déjà comme variante de section** ; (3) un thème

sombre double la matrice de contraste, la campagne de captures et la QA images.

[À VALIDER CLIENT — question à trancher, avec le coût.]

Trois choses sont néanmoins obligatoires dès maintenant [RÈGLE] :

• color-scheme: light explicite sur :root, sinon les navigateurs en préférence sombre

assombrissent nativement champs, listes déroulantes et barres de défilement — sans contrôle.

• Formaliser la bande profonde comme variante de surface, pas comme cas particulier :

.surface-inverse porte --surface: #000000, --surface-alt: #212121, --text: #FFFFFF,

--text-secondary: #B9B9B9, --border: #767676, --accent: #FAD282, --focus-ring: #FFFFFF,

--focus-halo: #000000. Le jour où le client dit oui, le thème sombre devient un **échange de

jetons**, pas une refonte.

• Le logo blanc existe (logo-tero-white.svg) ✅, et les photos sur fond noir exigent un voile

(déjà prévu § 4.2.5).

Si le client valide le mode sombre, la matrice à respecter est la suivante (colonnes #000000 et

#212121 du § 2.3) : texte #FFFFFF (21,00 / 16,10), secondaire #B9B9B9 (10,70 / 8,21), accent

#FAD282 (14,61 / 11,20) ou #00B7FF (9,22 / 7,07), bordure #767676 (4,62 / 3,55), erreur = badge

terracotta + texte blanc (5,77). Interdits en sombre : pétrole (2,21 / 1,69), teal en texte

(3,87 / 2,97), terracotta en texte (3,64 / 2,79), encre douce (1,64 / 1,26).

Coût à annoncer : **+1 matrice de contraste, +6 captures par gabarit, +1 test lecteur d'écran,

+1 QA images** (≈ +15 à 20 % de la charge de recette). [RÈGLE]

---

7. Limites de cette étude

• Les mesures réseau portent sur le HTML tronqué à 100 ko de https://tero.be/fr/ : tous les

comptages d'assets sont des minorants (≥ 34 feuilles CSS, ≥ 10 scripts).

• Les ratios sont calculés sur les valeurs hexadécimales du CSS servi, pas sur les pixels

rendus : une opacité, un voile photo ou un dégradé peut modifier le contraste réel. La

vérification au navigateur reste obligatoire (§ 5.7).

• Le contraste réel d'un texte sur photo ne peut pas être calculé sans échantillonnage : la

règle « version blanche + voile sombre » (§ 4.2.5) doit être mesurée au pixel sur chaque

visuel portant du texte.

• Le poids de la page d'accueil complète n'a pas pu être mesuré en une passe (protection

anti-bot : HTTP 403 hors navigateur) : à refaire en WebPageTest ou Lighthouse CI.

• Les performances terrain (CrUX p75) ne sont pas disponibles dans cet audit : les cibles

LCP/INP/CLS restent à instrumenter avant d'être opposables.

• Aucune donnée d'usage réel (analytics) n'a été consultée : la recommandation « pas de mode

sombre » repose sur l'absence de demande mesurée, pas sur un comptage d'utilisateurs.

---

DELTA A INTEGRER DANS LA CHARTE

• Corriger la casse du mot-symbole dans tero-group-rules.md:257, 276, 292, DESIGN.md § 8 et

design-tokens.json (brand.wordmarkCase) : le mot-symbole officiel est tero, en minuscules

(_audit/logo-tero-2025.svg) ; Tero = graphie rédactionnelle. Remplacer toute mention de

« mot-symbole TERO ».

• Corriger la description du monogramme (tero-group-rules.md:262 et design-tokens.json

brand.logoForbidden) : le glyphe est le o stylisé (anneau plein + barre horizontale sous

l'anneau) ; il reste interdit comme Organization.logo, mais devient utilisable en pastille avec

alt = « tero ».

• Ajouter --tero-ink-muted: #5F5F5F (neutre de lisibilité) et redéfinir **--tero-muted

#B9B9B9 comme jeton « désactivé » uniquement** ; interdire #B9B9B9 pour placeholders, libellés

et mentions (SC 1.4.3, preuve : 1,96:1).

• Ajouter --tero-border-field: #767676 et une règle : « toute bordure de contrôle atteint 3:1

contre ses fonds adjacents ; #D9D9D9 et #E5E6E5 sont décoratifs et ne délimitent jamais un

contrôle » (SC 1.4.11, preuve : 1,41:1 et 1,13:1).

• Remplacer --focus-ring teal par le double anneau (--focus-ring #000000 / --focus-halo

#FFFFFF sur fonds clairs ; inverse sur bandes profondes), avec les 6 compléments de § 3.3

(épaisseur ≥ 2 px, offset ≥ 2 px, pas de rognage, scroll-margin, retour de focus, inert).

• Trancher la contradiction du teal en bande profonde (§ 7.3 vs DESIGN.md § 6 vs

design-tokens.json) : teal interdit sur #212121 (2,97:1) ; sur #000000 **graphique

décoratif uniquement** (3:1), jamais en texte.

• Ajouter la règle des trois familles d'aplats (§ 2.4) : famille A (teal, pétrole, terracotta)

= texte blanc ; famille B (sable, rose poudré, cyan, rose vif, #B9B9B9, #D9D9D9) = texte noir,

jamais en couleur de texte sur fond clair.

• Interdire teal en texte sur #E5E6E5 (4,34) et #D9D9D9 (3,84) ; **interdire terracotta en

texte sur #D9D9D9 (4,09) ; interdire pétrole sur toute bande profonde (2,21 / 1,69)**.

• Corriger le seuil « grand texte » (tero-group-rules.md:600) : 3:1 pour ≥ 24 px ou

≥ 18,66 px en graisse 700 — et non « ≥ 24 px gras ».

• Ajouter la couche sémantique complète de § 3.1 (surface, surface-alt, surface-elevated,

surface-inverse, text, text-secondary, text-muted, text-disabled, text-inverse,

text-inverse-secondary, border, border-field, border-inverse, accent, accent-hover,

accent-on-dark, focus-ring, focus-halo, success, warning, error, info, link, link-visited) à

tokens.css et design-tokens.json.

• Supprimer --tero-drift-sage et la famille drift du :root livré : les préfixer --x-drift- et

les isoler dans un fichier de résorption (un jeton exposé finit utilisé).

• Ajouter la table d'états § 3.4 : succès = teal + texte blanc ; avertissement = sable + texte

noir ; erreur = terracotta + texte blanc ; information = pétrole + texte blanc ; et

l'interdiction pour sable, rose poudré, cyan, rose vif, #B9B9B9, #D9D9D9 de porter un état en

couleur de texte.

• Ajouter la règle « l'information ne passe jamais par la couleur seule » : tout état porte

une icône distincte + un libellé (SC 1.4.1), et **tout lien en ligne dans un paragraphe est

souligné en permanence** (§ 3.5).

• Ajouter #FF2E82 (magenta padel) et #E9F44E (lime padel) à la liste des dérives de

design-tokens.json, avec renvoi à la question client n° 2 (preuves : 3,20:1 et 1,20:1 sur blanc).

• Ajouter le bloc WCAG 2.2 § 4.1 (les 9 nouveaux critères) à la section Accessibilité :

2.4.11, 2.4.12, 2.4.13, 2.5.7, 2.5.8, 3.2.6, 3.3.7, 3.3.8, 3.3.9, avec portée TERO et test.

• Remplacer la section Accessibilité (§ 10) par la checklist testable § 4.2 : elle est

aujourd'hui un résumé de 9 puces, sans preuve, sans vidéo, sans zoom, sans 320 px, sans

autocomplete, sans espacement du texte, sans contenu au survol, sans annulation de pointeur.

• Ajouter 320 px aux largeurs de contrôle et de capture (§ 8.2 et § 16.2) : la liste devient

320 / 360 / 390 / 768 / 1024 / 1440 (SC 1.4.10 Reflow).

• Ajouter les portes CI a11y et performance § 4.3 aux contrôles minimaux avant livraison

(§ 16.2), avec seuils de refus : axe = 0 violation, Lighthouse a11y = 100, 1 seul H1, matrice de

contraste versionnée, budget de poids, 0 tabindex positif, 0 outline: none.

• Remplacer la section Performance (§ 11) par le budget chiffré § 5.2 : CSS ≤ 45 Ko brotli /

≤ 3 requêtes, JS ≤ 70 Ko / ≤ 4 requêtes / 0 jQuery, polices ≤ 3 woff2 = 54 Ko avec **1 seul

preload**, images hero ≤ 150 Ko AVIF avec srcset + sizes, ≤ 35 requêtes, 0 tiers avant

consentement, TTFB ≤ 500 ms, cache immutable 1 an, brotli.

• Préciser la cible LCP : « ≤ 1,5 s au p75 mobile sur données terrain (CrUX), 28 jours » —

plus stricte que le seuil Google de 2,5 s, donc invérifiable en laboratoire seul.

• Imposer font-display: swap + repli métrique (size-adjust) + 1 preload, et documenter

l'écart mesuré : le site sert aujourd'hui font-display: auto × 4 et 0 preload.

• Limiter le socle à 3 graisses (400 / 600 / 700) : le 500 sort, sauf usage réellement mesuré

(−18 Ko ; les 4 graisses pèsent 70,2 Ko).

• Interdire jQuery et jquery-migrate dans le socle neuf, et documenter les tiers chargés

aujourd'hui sur l'accueil (Cookiebot, Brevo SDK, WonderPush) comme points à trancher avec le

client (RGPD + INP).

• Ajouter les 4 anti-patterns d'accessibilité à DESIGN.md § 9 : focus supprimé ; placeholder

utilisé comme label ; état signalé par la couleur seule ; texte posé sur un fond non conforme.

• Corriger le libellé de méthode dans design-tokens.json : « WCAG 2.2 AA, formule de luminance

relative W3C » (et non 2.1), et requalifier #323232 dans l'audit (§ 3.5) comme **neutre

adopté** par la charte, non comme dérive.

• Ajouter la règle de langue : lang="fr-BE" | "nl-BE" | "en-GB" cohérent avec les hreflang

fr / nl / en (le live sert fr-FR sur un site belge), et lang sur tout passage alloglotte.

• Ajouter la règle de réduction du mouvement couplée à la performance : sous

prefers-reduced-motion: reduce, aucune animation et la vidéo n'est pas chargée (poster

seul) — la règle existe sur le projet padel, elle manque au groupe.

• Ajouter la règle de sous-titres et transcription (SC 1.2.2 / 1.2.5) pour toute vidéo avec

son, dans une piste par langue publiée.

• Ajouter la règle du mode sombre § 6 : color-scheme: light explicite, .surface-inverse

formalisé comme jeu de jetons complet, et décision client explicite avant tout

développement de thème sombre (coût : +15 à 20 % de recette).

• Ajouter la règle de cible tactile en deux niveaux : 24 × 24 px minimum (SC 2.5.8 AA,

dépassé) et 44 × 44 px comme règle de marque, avec l'exception explicite du lien en ligne

dans une phrase (ne pas étirer le corps de texte pour atteindre 44 px).