Tout d'abord, identifiez l'objet à mesurer.
Saisissez la couleur du texte et la couleur d'arrière-plan réelle, en utilisant trois ou six bits HEX. Cet outil effectue les calculs à partir de couleurs sRGB opaques ; pour les couleurs transparentes, les images d'arrière-plan et les dégradés, vous devez d'abord déterminer la couleur d'arrière-plan composite réelle à l'emplacement du texte, et vous ne pouvez pas simplement utiliser l'une des valeurs de couleur comme substitution.
Les résultats de la vérification du contraste du texte pour cet ensemble de couleurs n'indiquent pas que la page entière respecte les normes WCAG. La taille et le type de police, les états interactifs et les autres exigences d'accessibilité doivent encore être vérifiés sur la page elle-même.
Comment calculer le ratio
Divisez chaque canal de couleur 8 bits par 255 pour obtenir c. Si c ≤ 0,04045, la valeur linéaire est c ÷ 12,92 ; sinon, elle est ((c + 0,055) ÷ 1,055) à la puissance 2,4. La luminosité relative L = 0,2126R + 0,7152G + 0,0722B, où R, G et B utilisent les valeurs linéaires ci-dessus.
(L plus élevé + 0.05) ÷ (L plus faible + 0.05). Le noir et le blanc donnent 21:1 ; des couleurs identiques donnent 1:1. Inverser le texte et le fond conserve le rapport de contraste, mais change l’apparence.
Ne confondez pas l'arrondi avec le passage.
Le texte normal exige au moins 4.5:1 pour AA et 7:1 pour AAA. Le grand texte exige 3:1 et 4.5:1 respectivement. Il doit mesurer au moins 18pt, ou 14pt en gras. N’appliquez pas ses seuils aux petits caractères.
Le rapport de contraste du code #777777 sur fond blanc est d'environ 4,478:1, ce qui ne respecte pas l'exigence de 4,5:1 pour un texte ordinaire (AA). Même si une interface l'affiche comme 4,5, cette valeur ne peut être utilisée pour l'évaluation. Ce site affiche trois décimales ; l'évaluation conditionnelle utilise la valeur calculée complète.
Réintégrez les paires de couleurs dans l'interface réelle.
L'aperçu affiche uniquement les couleurs d'entrée, avec une largeur de 16 px pour le corps du texte et de 24 px pour les titres. Vérifiez d'abord la couleur réelle du texte, l'arrière-plan, la taille et la graisse de la police sur la page cible, puis examinez les états normal, survolé et sélectionné ; ne vous contentez pas de vérifier les couleurs qui vous semblent les plus esthétiques dans la maquette.
Après avoir progressivement assombri le texte ou éclairci le fond, le calcul est répété, puis la police et le confort de lecture sur un appareil réel sont vérifiés. Le test de contraste des couleurs ne permet pas d'évaluer la détection du daltonisme, la sémantique des icônes ni la conformité à l'ensemble de la page ; les valeurs de couleur et les emplacements de vérification sont conservés pour un examen ultérieur.