Ratio de contraste des couleurs
Calculateur

Entrées

Rapport de contraste
8.5

Résultats

Rapport de contraste
8.5

Résultats média et photographie

Rapport de contraste8.5

Diagramme formula-map

Rapport de contraste
8.5

Relation média et photographie

Formule

ratio = (L₁ + 0.05) ÷ (L₂ + 0.05)

= 8.5

Note

Ce résultat utilise les valeurs saisies et une équation de planification simplifiée; vérifiez les quantités et les exigences locales avant d’acheter ou de construire.

Plus dans Média et photographie

Voir tout →

Questions fréquentes

Comment le ratio de contraste entre deux couleurs est-il calculé?+

Le calculateur calcule la luminance relative de chaque couleur à partir de ses valeurs RVB en utilisant la formule WCAG, puis divise la luminance la plus claire par la plus sombre (plus un petit décalage), donnant un ratio exprimé en X:1. Le noir sur blanc produit le ratio maximal possible de 21:1.

Quel ratio de contraste faut-il pour respecter les directives d'accessibilité?+

Le WCAG 2.1 exige un minimum de 4,5:1 pour le texte courant et de 3:1 pour le grand texte (18pt+ ou 14pt+ gras) pour atteindre le niveau AA, tandis que le niveau AAA élève ces seuils à respectivement 7:1 et 4,5:1. Ne pas atteindre ces ratios signifie que le texte peut être difficile à lire pour les personnes malvoyantes.

Pourquoi la luminance relative compte-t-elle plus que simplement comparer la luminosité RVB directement?+

L'œil humain perçoit le vert comme plus lumineux que le rouge ou le bleu à la même intensité numérique, donc la formule de luminance WCAG pondère différemment chaque canal RVB (donnant au vert le poids le plus fort) avant de les combiner, produisant un résultat qui reflète la luminosité réellement perçue plutôt qu'une moyenne naïve des valeurs RVB.

Pourquoi deux couleurs qui paraissent assez différentes peuvent-elles quand même échouer un test de contraste?+

Le ratio de contraste dépend spécifiquement de la luminance (clarté), pas de la teinte ou de la saturation, donc deux couleurs peuvent sembler très différentes visuellement, comme un orange saturé et un bleu saturé, mais avoir une luminance similaire et donc un mauvais contraste entre elles. C'est pourquoi un design adapté au daltonisme nécessite quand même de vérifier le contraste réel, pas seulement la différence visuelle de couleur.

La vérification du ratio de contraste s'applique-t-elle seulement au texte, ou aussi à d'autres éléments d'interface?+

Le WCAG fixe aussi un minimum plus bas de 3:1 pour les éléments non textuels comme les bordures de boutons, les contours de champs de formulaire et les icônes véhiculant des informations importantes, reconnaissant qu'ils doivent être distinguables sans nécessiter le même contraste axé sur la lecture que le texte courant. Le même calcul de ratio de luminance s'applique, avec simplement un seuil de réussite différent.