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.
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 : moins de 18pt (24 px CSS) en graisse normale, ou moins de 14pt (environ 18,67 px CSS) en gras. WCAG 1.4.3.
Niveau renforcé pour les mêmes tailles. WCAG 1.4.6.
Au moins 18pt (24 px CSS) en graisse normale, ou 14pt (environ 18,67 px CSS) en gras. WCAG 1.4.3.
Icônes, contours de focus, bordures de champs et légendes de graphiques. WCAG 1.4.11.
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.
5.13:1#6d6d74#ffffffComment 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 ?
| Paramètre | Type | Valeur par défaut | Comportement et cas limites |
|---|---|---|---|
| 4.5:1 | AA | 1.4.3 | Texte 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:1 | AA | 1.4.3 | Texte 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:1 | AAA | 1.4.6 | Contraste amélioré pour le texte normal. Rarement requis en dehors des marchés publics, et difficile à atteindre avec une palette de marque. |
| 3:1 | AA | 1.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 60 | APCA | brouillon | Environ 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 90 | APCA | brouillon | Suffisant pour n’importe quelle taille et poids, y compris les polices fines et le long corps de texte. |
| alpha | 0–1 | 1 | Un premier plan translucide est composé sur l’arrière-plan avant la mesure, car c’est ce que le lecteur voit. |
| Texte désactivé | — | exempt | WCAG 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.
Quels outils liés devriez-vous utiliser ensuite ?
- Tester la vision des couleursPlanches de test et simulation sur vos propres images
- Choisir une couleurChoisit une couleur et l’affiche en HEX, RGB, HSL, OKLCH ou CMYK
- Trouver un code couleurTous les noms de couleur CSS en HEX, RGB et HSL, avec recherche et tri
- Convertir des couleursHEX, RGB, HSL, HSV, OKLCH et CMYK dans les deux sens à la fois