Interfaces de contraste et lisibilité

1) Pourquoi le contraste

• réduit la charge cognitive et la fatigue,
• améliore la vitesse de balayage de l'interface,
• améliore l'accessibilité pour les personnes ayant une déficience visuelle et une perception des couleurs,
• réduit le nombre d'erreurs dans les scénarios interconnectés (paiements, formulaires, confirmations).

2) Concepts et formules de base

2. 1 Contraste par WCAG

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), où « L1 ≥ L2 », « L » est la luminance relative (0.. 1).

2. 2 Luminosité relative (sRVB)

1. Mettre les composantes R, G, B dans la plage 0.. 1.

• si 'c ≤ 0. 04045 ', alors' c _ lin = c/12. 92`
• sinon 'c _ lin = (c + 0. 055) / 1. 055) ^ 2. 4`

3. Luminosité : 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Représentations des couleurs

HSL/HSV - pratique pour le réglage manuel, mais pas uniforme perceptuellement.
Lab/LCH/OKLCH - plus proche de la perception humaine ; OKLCH est pratique pour une variation systématique de la luminosité/saturation tout en conservant la lisibilité.

3) Normes et objectifs (WCAG 2. 2)

Texte ≥ 14 pt bold ou ≥ 18 pt (normal) : contraste minimum 3:1 (AA).
Reste du texte : contraste minimum 4. 5:1 (AA).
AAA (amélioration de la lisibilité) : 7:1 pour le texte ordinaire ; 4. 5:1 pour le gros.
Iconographie et éléments non photographiques importants (limites des champs d'entrée, checkbox, interrupteurs, indicateurs d'erreur) : référence 3:1 avec fond.
Les états (hover/focus/pressed/disabled) ne doivent pas être inférieurs à 3:1 entre les états ou avec un fond, plus des indicateurs non photographiques explicites (soulignement des références, ombres/cadres, changement d'épaisseur).

4) Système de conception : jetons de contraste

Nous recommandons dans le système de conception de fixer le contraste comme propriété des tokens.

• 'fg/primary '↔'bg/base '≥ 7:1 (AAA pour le texte critique)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'Fg/muted' ↔ 'bg/subtle' ≥ 3:1 (texte de service)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (bordures de champs, cartes)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (liens/boutons)
• 'Interactive/disabled 'ne doit pas imiter les états actifs ; utilisez la réduction de contraste et le curseur/attributs ARIA.

• la luminosité de base du thème (L), puis les écarts "Δ L'pour les couches/surfaces (" bg/subtle "," bg/elevated "),
• fixez les couples de contraste minimum dans les tests.

5) Thèmes clairs et sombres

Thème lumineux : texte presque noir (pas pur # 000, mais une teinte chaude/froide), fond blanc à légèrement teinté pour réduire le « scintillement ».
Thème obscur : Éviter le fond pur # 000 - graphite profond/charbon avec le L≈0. 12–0. 16 réduit les éclairages ; adoucir le texte blanc à L≈0. 9.
Gardez les mêmes objectifs contrastés dans les deux thèmes ; ne laissez pas les accents colorimétriques perdre leur lisibilité sur fond sombre (il faut souvent un décalage de 'Δ L' et une diminution de la saturation).

6) Texte sur images et vidéos

Utilisez des overleys (gradient/couche translucide de 40 à 60 %) ou des vérins sous le texte.
Fixez un minimum de 4. 5:1 entre le texte et le fond local du réservoir.
Pour la vidéo dynamique, un fond/overlay adaptatif sur l'analyse de la luminosité de l'image (sampling de la zone centrale/substrat).

7) États et interactivité

Les liens doivent être distingués non seulement par la couleur : soulignement par défaut ou soulignement par hover/focus + contraste ≥ 3:1 avec le texte normal.
Boutons : texte et icône ≥ 4. 5:1 au remplissage ; remplissage ≥ 3:1 à l'environnement.
Erreurs/succès/avertissements : ne vous fiez pas à la couleur ; ajouter des icônes/conseils de texte ; assurer le contraste du texte au moins 4. 5:1.

8) Personnes souffrant de troubles de la perception des couleurs

• Deuteranopia/Protanopia (zone rouge et verte) : éviter les combinaisons « rouge vs vert » sans signes supplémentaires.
• Tritanopia : vérifier séparément les vapeurs bleu-jaune.
• Rendre les formes et les graphiques compréhensibles : étiquettes de texte, différents types de traits/marqueurs, motifs de remplissage, signatures de segments.

9) Typographie et fond

Texte de base : 14-16 px minimum (web), 16-18 px pour les zones de contenu.
Intervalle entre les lignes 1. 4–1. 6 améliore la lisibilité sur fond à fort contraste.
Évitez les traits délicats sur un contraste insuffisant.
Texte sur des arrière-plans colorés : réduisez la saturation de l'arrière-plan et/ou augmentez la luminosité pour atteindre la relation cible.

10) Graphiques, tableaux, graphiques

Lignes/colonnes ≥ 3:1 à la grille/arrière-plan.
Signatures des axes et légendes ≥ 4. 5:1.
Utilisez des formes/modèles distincts en plus de la couleur.

11) Contraste dynamique/adaptatif

Contrast automatique : calcule la couleur de contraste du texte au fond sélectionné (par exemple, via OKLCH : sélection 'L'pour atteindre 4. 5:1).
Paramètres système : respectez les modes 'prefers-contrast', 'forced-colors', 'high-contrast' du système d'exploitation.
Personnalisation : Personnalisation « Contraste élevé » dans l'application (amplification 'Δ L', remplacement des accents de marque par des accents plus neutres tout en conservant la propriété par la forme/icônes).

12) Processus et automatisation du contrôle

12. 1 Pour les designers

Vérifiez le contraste sur les maquettes (dans les deux thèmes et sur les arrière-plans clés).
Entrez les « slots de contraste » dans les composants (title/primary/secondary/hint).
Documentez les contextes d'arrière-plan valides pour chaque composant.

12. 2 Pour les développeurs

Helpers unitaires : fonction de calcul du contraste et de l'assert dans les tests pour les tokens-paires.
Snapshots visuels avec vérification des métriques de contraste (scryn-rendu + calcul des L1/L2 par les samples).
Linters de style : interdiction de couleur « brute », uniquement via des tokens.

12. 3 B CI/CD

Vérifie toutes les paires 'fg/bg' dans les thèmes et les états.
Un rapport d'infraction indiquant le composant, l'option, le sujet et la valeur réelle (p. ex. 3. 9:1 à 4. 5:1).

13) Spécificité iGaming (facultatif)

Les bannières promo brillantes et les cartes de tournoi « mangent » souvent le texte. Il faut un placard/overlay et limiter la saturation du fond.
Éléments système des notifications responsables (18 +, limites, risques) - AAA par contraste.
Dans les classeurs/coefficients : nombres et signes « +/- » ≥ 4. 5:1, l'éclairage du gain - pas seulement la couleur (icônes/étiquettes).

14) Anti-modèles

Ne compter que sur la couleur pour distinguer l'état.
Polices grises subtiles sur fond coloré sans calcul de contraste.
« Foncé sur foncé » dans Dark Mode, « brillant sur brillant » dans les zones promotionnelles.
Texte en arrière-plan avec détails/bruit sans fauteuil roulant.

15) Chèque-feuille pour la rhubarbe

Texte de base

• ≥ 4. 5:1 (normal), ≥ 3:1 (gros/gras).

Liens/boutons

• Texte du bouton ≥ 4. 5:1 au remplissage.
• Distinction des états ≥ 3:1 ou indicateurs explicites.

Icônes/limites

• ≥ 3:1 au fond.

Thèmes sombres/lumineux

• Les mêmes objectifs de contraste ont été atteints.

Fonds des médias

• Overley/plâtre, coefficient maintenu.

Disponibilité

• Il y a des signes non photographiques en plus de la couleur.

Automatisation

• Tests de contraste en CI/CD sur les tokens et les composants.

16) Introduction de tokens (exemple de notation)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Note : Les valeurs sont approximatives ; les finales sont choisies par calcul du contraste dans un thème particulier.

17) Documentation pour l'équipe

Dans les heidlines, indiquez : les objectifs de contraste, les exemples de paires correctes/erronées, la matrice 'fg × bg' pour les composants clés, les règles pour les fonds multimédias, et comment activer le mode « Contraste élevé ».
Gardez la page « Exceptions et causes » en direct (par exemple, 3. 8:1 dans une case étroite d'un gros titre d'affichage).

Résumé succinct

Le contraste est un paramètre mesurable, pas gustatif. Fixez des cibles (AA/AAA), contrôlez-les via des jetons (mieux dans OKLCH), vérifiez automatiquement dans CI et visuellement dans les mises en page, tenez compte des thèmes foncés/clairs et des personnes ayant des troubles de la vision des couleurs. Cela garantit la lisibilité, réduit les erreurs et augmente la conversion.