Fondations

Accessibilité

Tout écran produit vise WCAG 2.1 niveau AA minimum. Contraste, focus, clavier, ARIA et cibles tactiles — y compris pour une IA qui génère du design.

Vérificateur de contraste

Choisissez les couleurs via un token sémantique (--ui-*) ou métier (--gs-*) — ou saisissez un hex à la main. Le ratio WCAG et les seuils sont recalculés en direct.

Texte

Fond

Aa — Texte large

Texte normal : piloter son e-réputation au quotidien.

9.64:1ratio de contraste

Texte normal (AA ≥ 4.5)Texte large (AA ≥ 3)UI / icônes (≥ 3)Texte normal (AAA ≥ 7)

Audit des tokens texte (slate)

Ratios sur les fonds clairs courants. Seuil texte normal : 4.5:1.

Token	sur white	sur cloud-50	sur elevated
highlighted (900)	17.85 ✅	16.63 ✅	16.30 ✅
text (700)	10.35 ✅	9.64 ✅	9.45 ✅
toned (600)	7.58 ✅	7.06 ✅	6.92 ✅
muted (500)	4.76 ✅	4.43 ❌	4.34 ❌
dimmed (400)	2.56 ❌	2.39 ❌	2.34 ❌

À retenir

dimmed (slate-400) n’est jamais du texte lisible → décoratif uniquement.
muted (slate-500) fail sur la surface cloud → utiliser toned (600) au minimum sur la surface d’app.
Texte principal : toujours text (700) ou plus foncé.

Focus & navigation clavier

Focus visible : ring 2px var(--ui-ring) (primary), offset 2px. Jamais outline: none seul.
Icône décorative → aria-hidden="true" ; icône porteuse de sens → aria-label.
Champs toujours liés à un GSFormField (label + hint + erreur).
Tab dans l’ordre logique, Esc ferme les overlays, Enter/Space activent.

Cibles tactiles

Cible tactile minimale 44 × 44 px (WCAG 2.5.5). Les boutons icon-only et items de liste cliquables doivent respecter cette zone.

Distinguer Brand / Error / Warning

Fuchsia (brand) et Red (error) ont un contraste mutuel de ~1.05:1 → quasi-indistinguables en luminance, confondables en deutéranopie/protanopie. Chaque couleur a un rôle strict.

Couleur	Rôle	Jamais pour
Fuchsia #e94b82	Brand, CTA, action neutre, focus, liens	Erreur, danger
Red #fb2c36	Erreur, danger, destruction	CTA générique
Amber #efb100	Warning, attention	Décoration

Si une erreur est visible, le CTA passe en outline/ghost (jamais fuchsia + rouge dans la même zone).
Bouton destructif = red solid, jamais fuchsia.
Un état d’erreur ne repose jamais sur la couleur seule : couleur + icône + texte.