Contraste des couleurs et accessibilité : guide pratique

Tu choisis une couleur qui est superbe sur ton écran. Tu la déploies. Puis quelqu'un te dit qu'il ne peut pas lire le texte.

Ça arrive plus souvent que tu ne le penses. Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de déficience de la vision des couleurs. Ajoute les écrans à faible contraste, le plein soleil et les yeux vieillissants, et soudain tes choix de couleurs affectent beaucoup de monde.

La bonne nouvelle : il y a des règles claires pour ça. Elles s'appellent les exigences de contraste WCAG, et elles sont plus simples qu'elles n'en ont l'air.

C'est quoi un ratio de contraste ?

Un ratio de contraste est un nombre qui décrit combien deux couleurs diffèrent en luminosité. Il va de 1:1 (pas de contraste — même couleur) à 21:1 (contraste maximum — noir sur blanc).

Tes yeux ne voient pas toutes les différences de couleur de la même façon. Un ratio de contraste prend en compte la façon dont la vision humaine perçoit réellement la luminosité, pas juste la différence mathématique de couleur.

Référence rapide :

| Ratio de contraste | Apparence | Passe ? | |---|---|---| | 1:1 – 2:1 | Presque invisible | Non | | 3:1 | Lisible mais fatigant | AA grands textes uniquement | | 4.5:1 | Lecture confortable | AA texte normal | | 7:1 | Très clair | AAA texte normal | | 21:1 | Maximum (noir sur blanc) | Tout |

AA vs. AAA : quelle différence ?

WCAG définit deux niveaux de conformité importants pour la couleur :

Niveau AA (le standard visé par la plupart des sites) :

• Texte normal (moins de 18pt) : nécessite un ratio de 4.5:1
• Grand texte (18pt+ ou 14pt+ gras) : nécessite un ratio de 3:1
• Composants UI et objets graphiques : nécessite un ratio de 3:1

Niveau AAA (le standard d'or) :

• Texte normal : nécessite un ratio de 7:1
• Grand texte : nécessite un ratio de 4.5:1

La plupart des organisations visent le AA. Le AAA est idéal mais peut être restrictif pour le design — peu de combinaisons de couleurs atteignent 7:1 tout en restant esthétiques.

Erreurs de contraste courantes

On les retrouve constamment dans les vrais projets :

Texte gris clair sur fond blanc : ce texte gris subtil et « élégant » ? Il échoue souvent au contraste. #999999 sur blanc donne seulement 2.85:1 — ça échoue même pour les grands textes.

Texte coloré sur fond coloré : bleu sur violet, vert sur bleu, rouge sur gris foncé. Ils peuvent te sembler distincts mais ne passent pas les ratios de contraste.

Texte de placeholder dans les formulaires : le texte placeholder gris clair est quasi universel en web design, et il échoue presque toujours aux exigences de contraste. Les utilisateurs malvoyants ne peuvent pas lire ce qui est attendu dans le champ.

Texte sur images : sans overlay sombre ou ombre de texte, le texte sur les photos atteint rarement les standards de contraste de façon constante.

Considérations sur le daltonisme

Les ratios de contraste aident, mais ne résolvent pas tout. Le daltonisme signifie que certains utilisateurs ne peuvent littéralement pas distinguer certaines paires de couleurs.

Ne compte pas uniquement sur la couleur pour transmettre l'information :

• Rouge/vert pour erreur/succès ? Ajoute aussi des icônes ou des labels texte
• Graphiques codés par couleur ? Ajoute des motifs, des labels ou des formes différentes
• Champs obligatoires marqués uniquement en rouge ? Ajoute un astérisque ou « (obligatoire) »

Les types les plus courants :

• Deutéranopie (rouge-vert, ~6% des hommes) : rouge et vert se ressemblent
• Protanopie (rouge-vert, ~2% des hommes) : le rouge apparaît sombre/brunâtre
• Tritanopie (bleu-jaune, rare) : bleu et jaune sont difficiles à distinguer

Étapes pratiques pour corriger tes couleurs

Étape 1 : convertis tes couleurs de marque en hexadécimal avec un convertisseur de couleurs. Tu as besoin de valeurs exactes pour vérifier le contraste.

Étape 2 : teste chaque combinaison texte/fond. Ne vérifie pas seulement ton texte principal — vérifie les boutons, liens, légendes, labels de formulaire, messages d'erreur.

Étape 3 : corrige les échecs en ajustant la luminosité. En général, tu peux garder la même teinte et saturation tout en assombrissant ou éclaircissant pour atteindre le ratio.

Étape 4 : teste avec des simulateurs. Chrome DevTools a un simulateur de déficience visuelle intégré (panneau Rendering > Émuler les déficiences visuelles).

Étape 5 : vérifie aussi tes graphiques SVG et images. Les icônes avec un mauvais contraste sont aussi problématiques que le texte.

Gains rapides

Si tu es pressé, ces combinaisons sûres passent toujours le AA :

• Noir (#000000) + blanc (#FFFFFF) — 21:1
• Gris foncé (#333333) + blanc — 12.6:1
• Texte blanc + bleu foncé (#003366) — 9.9:1
• Texte noir + jaune clair (#FFF9C4) — 18.1:1
• Vert foncé (#2E7D32) + blanc — 5.1:1

Et celles-ci échouent souvent :

• Gris moyen (#808080) + blanc — 3.9:1 (échec AA texte normal)
• Rouge (#FF0000) + noir — 5.25:1 (passe AA mais échoue AAA)
• Orange (#FF8C00) + blanc — 3.0:1 (échec AA texte normal)

---

L'accessibilité, ce n'est pas juste de la conformité — c'est s'assurer que tout le monde peut vraiment utiliser ce que tu construis. Commence par vérifier tes ratios de contraste de texte. Corrige les échecs évidents en premier. Puis passe aux boutons, icônes et texte secondaire. Petits changements, grand impact.