Calculateur de ratio de contraste des couleurs WCAG
Calculez le ratio de contraste relatif WCAG 2.1 entre une couleur de premier plan et d'arrière-plan, et vérifiez la conformité AA et AAA pour le texte normal et grand.
Comment utiliser le calculateur de contraste des couleurs WCAG
- Saisissez la couleur de premier plan sous forme de code hexadécimal (#rrggbb).
- Saisissez la couleur d'arrière-plan sous forme de code hexadécimal.
- Cliquez sur Calculer pour voir le ratio de contraste et les verdicts AA/AAA.
Cas d'utilisation
- •Révision des jetons de design lors de l'élaboration d'une identité visuelle.
- •Audits d'accessibilité des interfaces existantes.
- •Vérification des compositions texte sur image.
Formule
Ratio = (L1 + 0.05) / (L2 + 0.05) où L1 est la luminance relative la plus claire et L2 la plus sombre. Luminance simplifiée : 0.2126·R + 0.7152·G + 0.0722·B sur une échelle sRGB de 0 à 1.
Questions fréquemment posées
Pourquoi AA est-il le minimum ?
Le niveau AA de WCAG 2.1 est la cible adoptée par la plupart des régulateurs (EN 301 549, Section 508, jurisprudence ADA). AAA est un idéal pour les contenus à lecture longue.
Qu'est-ce qui compte comme grand texte ?
Le grand texte correspond à au moins 18 pt (24 px) en normal, ou 14 pt (18,66 px) en gras. Tout le reste est du texte normal et doit atteindre 4.5:1.
La luminance simplifiée est-elle conforme à WCAG ?
Pour la plupart des paires sRGB, elle arrondit au même verdict réussite/échec que la formule complète. Pour les cas limites autour du seuil, vérifiez avec la formule WCAG officielle ou APCA pour les nouveaux projets.