Ce que mesure le ratio WCAG
Le ratio ne mesure pas la différence de teinte. Deux couleurs peuvent sembler opposées, mais avoir une luminance proche. WCAG calcule une luminance relative en sRGB, puis compare la couleur la plus claire et la plus sombre avec la formule (L1 + 0.05) / (L2 + 0.05).
Les erreurs les plus courantes
- Texte gris clair sur fond blanc.
- Texte blanc sur bleu, vert ou orange de saturation moyenne.
- Placeholder trop pâle dans les formulaires.
- Icônes et bordures de champs visibles uniquement par la couleur.
- Mode sombre non retesté après inversion du thème.
Comment corriger sans casser la charte
Le plus souvent, il suffit d’ajuster la luminosité de la couleur de texte tout en gardant la même teinte. Une baisse de 5 à 12 points de luminosité HSL peut transformer un échec à 3,8:1 en réussite AA à 4,5:1.
Pour une marque, conservez la couleur originale pour les fonds décoratifs et définissez une variante “accessible” pour le texte, les liens et les boutons.
Contraste texte, UI et graphique
Ne limitez pas le contrôle au texte courant. Les boutons, icônes, bordures, anneaux de focus et graphiques porteurs d’information doivent aussi être visibles. WCAG 1.4.11 demande 3:1 pour les composants d’interface et objets graphiques significatifs.