Aller au contenu principal

Vérifier le contraste

Vérificateur de contraste mesure la couleur d’un texte par rapport à son arrière-plan et indique le ratio WCAG 2.2, les niveaux auxquels il passe, ainsi que le contraste de clarté APCA. Il compose d’abord un premier plan translucide avant de mesurer — c’est la raison pour laquelle la plupart des vérificateurs divergent du navigateur — et, quand une paire échoue, il trouve la couleur la plus proche qui passe en déplaçant la clarté en OKLCh, de sorte que le résultat conserve la teinte de départ.

100 % local

Taux5.13:1

Voici un exemple de corps de texte. Ce paragraphe utilise une taille considérée comme normale par les WCAG.

Et voici un texte de grande taille.

Texte normal, AAConforme · 4.5:1

Texte normal : moins de 18pt (24 px CSS) en graisse normale, ou moins de 14pt (environ 18,67 px CSS) en gras. WCAG 1.4.3.

Texte normal, AAANon conforme · 7:1

Niveau renforcé pour les mêmes tailles. WCAG 1.4.6.

Grand texte, AAConforme · 3:1

Au moins 18pt (24 px CSS) en graisse normale, ou 14pt (environ 18,67 px CSS) en gras. WCAG 1.4.3.

Interface, AAConforme · 3:1

Icônes, contours de focus, bordures de champs et légendes de graphiques. WCAG 1.4.11.

APCA Lc 75.4texte sombre sur fond clair

Corps de texte dès 18 px en graisse normale. L’APCA est un modèle proposé pour les WCAG 3, sans verdict de réussite ou d’échec. Le chiffre correspond à une taille et une graisse de texte.

Taux
5.13:1
Texte
#6d6d74
Fond
#ffffff

Comment fonctionne Vérifier le contraste ?

Le contraste est un ratio entre deux luminances relatives. Chaque canal est sorti de son encodage sRGB — la fonction de transfert par morceaux de l’IEC 61966-2-1, et non un simple gamma de 2.2 — puis pondéré : 0.2126 pour le rouge, 0.7152 pour le vert, 0.0722 pour le bleu, soit à peu près la contribution de chacun à ce que l’œil lit comme luminosité. Les deux luminances entrent dans (lighter + 0.05) / (darker + 0.05), et le 0.05 est une marge pour le flare qui tient lieu de la lumière que votre écran reflète depuis la pièce.

Pourquoi une couleur translucide doit d’abord être composée

Une couleur à 50% d’opacité n’a pas de ratio de contraste qui lui soit propre. Ce que voit le lecteur, c’est son mélange avec ce qui se trouve derrière elle ; c’est donc ce mélange qui est mesuré. Les vérificateurs qui sautent cette étape indiquent le ratio de la couleur non mélangée, toujours meilleur que la réalité — et c’est la toute première cause, de loin, pour laquelle un outil diverge de l’inspecteur du navigateur lui-même.

Là où WCAG 2.x est réputé se tromper

La formule 2.x n’a jamais été dérivée de recherches sur la lisibilité ; c’est un simple ratio de luminance, et elle échoue dans les deux sens. Elle fait passer des gris clairs sur blanc que personne ne peut lire, et fait échouer des paires sombres parfaitement lisibles. Elle traite aussi noir-sur-blanc et blanc-sur-noir comme identiques à 21:1, alors qu’un texte clair sur fond sombre est mesurablement plus difficile à lire à ratio égal.

APCA est le modèle derrière l’ébauche de WCAG 3. Il tient compte de la polarité — le signe du nombre indique dans quel sens se lit la paire — et renvoie une valeur de contraste de clarté, Lc, plutôt qu’un ratio. Il est rapporté ici à côté du ratio 2.x, jamais à sa place, parce que la conformité se mesure toujours par rapport à 2.x et qu’un outil qui substituerait discrètement la métrique affirmerait aux gens qu’ils ont réussi un audit qu’ils n’ont pas réussi.

Comment la suggestion est trouvée

Quand une paire échoue, la couleur la plus proche qui passe est trouvée en parcourant la clarté en OKLCh, à teinte et chroma constants. Parcourir les canaux sRGB à la place fait dériver la teinte à mesure que la couleur s’assombrit, et la suggestion revient alors avec une couleur différente de celle de votre palette. La recherche s’écarte d’abord de l’arrière-plan — plus sombre sur une page claire, plus claire sur une page sombre — si bien qu’une couleur de marque sombre reste sombre au lieu de virer au quasi-blanc.

Les deux couleurs

foreground  #6d6d74
background  #ffffff

Ce qui est rapporté

ratio        5.13 : 1
normal AA    pass   (needs 4.5)
normal AAA   fail   (needs 7)
large AA     pass   (needs 3)
APCA         Lc 75.4

Quelles options et quels cas limites Vérifier le contraste prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
4.5:1AA1.4.3Texte normal : moins de 18pt (24 px CSS) en graisse normale, ou moins de 14pt (environ 18,67 px CSS) en gras. Le niveau AA exige au moins 4,5:1.
3:1AA1.4.3Texte de grande taille : au moins 18pt (24 px CSS) en graisse normale, ou 14pt (environ 18,67 px CSS) en gras. Utilisez la taille et la graisse calculées de la police, plutôt que la déclaration d'un élément parent.
7:1AAA1.4.6Contraste amélioré pour le texte normal. Rarement requis en dehors des marchés publics, et difficile à atteindre avec une palette de marque.
3:1AA1.4.11Éléments non textuels : icônes, indicateurs de focus, bordures de saisie, séries de graphiques, bordure d’un bouton. Ajouté dans WCAG 2.1 et toujours la règle la plus souvent oubliée.
Lc 60APCAbrouillonEnviron le point où 16px gras ou 24px normal devient confortable. APCA n’a pas de réussite ou d’échec — le nombre correspond à une taille et un poids.
Lc 90APCAbrouillonSuffisant pour n’importe quelle taille et poids, y compris les polices fines et le long corps de texte.
alpha0–11Un premier plan translucide est composé sur l’arrière-plan avant la mesure, car c’est ce que le lecteur voit.
Texte désactivé—exemptWCAG exempte entièrement les contrôles inactifs de 1.4.3. Légal de les laisser illisibles, mais toujours utile de les corriger.

Questions fréquentes

Quel ratio de contraste faut-il pour passer WCAG ?

Le niveau AA exige 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille. La grande taille commence à 18pt (24 px CSS) en graisse normale, ou à 14pt (environ 18,67 px CSS) en gras. Le niveau AAA porte ces seuils à 7:1 et 4,5:1. WCAG 1.4.11 exige séparément 3:1 pour les informations visuelles nécessaires à l'identification des composants d'interface et de leurs états, ainsi que pour les parties significatives des graphiques, sous réserve des exceptions prévues.

Pourquoi cet outil affiche-t-il un ratio différent d’un autre vérificateur ?

Presque toujours à cause de l’alpha. Un premier plan d’opacité inférieure à 100% n’a pas de ratio qui lui soit propre : ce que voit le lecteur, c’est cette couleur mélangée à l’arrière-plan, et c’est donc ce mélange qui est mesuré. Cet outil compose d’abord ; plusieurs vérificateurs populaires ne le font pas et rapportent un meilleur ratio que celui que la page a réellement. Si les deux couleurs sont opaques et que les chiffres diffèrent encore, l’un des deux applique un simple gamma de 2.2 au lieu de la fonction de transfert par morceaux de sRGB.

4.5:1 suffit-il pour une police de 14px ?

C’est ce qu’exige AA, et c’est peu. 4.5:1 a été fixé comme un minimum, pas comme un objectif, et à 14px dans une graisse fine sur un téléphone en plein jour, c’est réellement difficile. Si le texte compte, visez au-delà de 7:1 ou augmentez la taille. APCA est plus utile ici que le ratio 2.x, parce qu’il lie le chiffre à une taille et à une graisse au lieu de traiter tout le texte de la même façon.

Faut-il utiliser APCA ou WCAG 2.x ?

Les deux, pour des usages différents. WCAG 2.x est la référence actuelle de la conformité, c’est donc lui que vous rapportez. APCA est le meilleur indicateur de ce qui est réellement lisible, et c’est la direction que prend la norme. Quand ils divergent — en général des gris clairs sur blanc, ou des tons moyens sur fond sombre — c’est APCA en qui vous pouvez avoir confiance pour vos yeux.

Le contraste s’applique-t-il aux boutons désactivés et au texte de placeholder ?

Les contrôles désactivés sont d’emblée exemptés de WCAG 1.4.3. Le texte de placeholder, non : c’est du texte, il porte une information, et il exige 4.5:1 comme tout autre corps de texte. Le motif courant d’un placeholder gris à environ 2.5:1 échoue, et il échoue précisément pour les personnes qui ont le plus besoin de cet indice.

Cela fonctionne-t-il sur une couleur avec transparence ?

Oui. Saisissez un hexadécimal à 8 chiffres ou une valeur rgba et le premier plan est composé sur l’arrière-plan avant le calcul du ratio, ce qui correspond à ce que peint le navigateur. La couleur composée est affichée pour que vous puissiez voir la valeur à laquelle le ratio se rapporte réellement.