Contraste des couleurs et accessibilité : comprendre le ratio WCAG

Le critère WCAG 1.4.3 : ratio de contraste minimum

Le critère WCAG 1.4.3 (niveau AA) exige un rapport de contraste d'au moins 4,5:1 entre le texte et son arrière-plan. Pour les grands textes (18pt normal ou 14pt gras), le minimum est 3:1. Ce critère est l'un des plus souvent enfreints.

Comment calculer le ratio de contraste ?

Le ratio est calculé à partir de la luminance relative des deux couleurs, selon la formule : (L1 + 0.05) / (L2 + 0.05) où L1 est la luminance la plus claire et L2 la plus sombre.

En pratique, utilisez un outil : l'outil de contraste intégré à RefAudit calcule instantanément le ratio de n'importe quelle paire de couleurs.

Exemples de paires de couleurs problématiques

• Gris #999999 sur blanc #FFFFFF → ratio 2,85:1 ❌ (très fréquent)
• Bleu #4A90E2 sur blanc → ratio 3,04:1 ❌ (liens courants)
• Texte gris clair sur fond gris clair → souvent < 2:1 ❌

Les pièges à éviter

• Texte sur image : le contraste doit être mesuré sur toute la zone de texte
• Placeholder : le texte de placeholder est soumis au critère WCAG 1.4.3
• Focus ring : la bordure de focus doit aussi satisfaire WCAG 2.4.11 (WCAG 2.2)
• Dégradés : mesurer au point le moins contrasté

Comment corriger les problèmes de contraste ?

Ajustez la valeur L (luminosité) en HSL. Assombrir un gris de 30% à 20% L peut suffire à passer de 3:1 à 5:1 sans changer la teinte perçue. Testez avec notre outil de contraste en temps réel.