Grand texte, 24 px
Texte courant de 15 px. Portez ce vieux whisky au juge blond qui fume.
Ce vérificateur de contraste de couleurs teste une couleur de texte sur une couleur de fond selon la formule WCAG 2.1 et affiche le ratio en direct, avec réussite ou échec pour AA et AAA en texte normal et en grand texte. Si la paire échoue, il propose la couleur conforme la plus proche dans la même teinte, pour corriger sans changer le style.
Mode d’emploi
- Touchez le grand aperçu pour ouvrir le sélecteur, utilisez la pipette pour prélever une couleur à l’écran ou saisissez une valeur dans un champ.
- Collez n’importe quelle couleur CSS (#hex, rgb(), hsl(), hwb(), oklch(), lab(), un nom…) dans un champ ou n’importe où sur la page.
- Touchez le bouton copier à côté d’un format. Faites glisser Opacité pour ajouter de la transparence.
- Dans la palette, touchez une nuance pour l’utiliser ; appui long (ou clic droit) pour copier son HEX. Dans Contraste, réglez texte et fond, puis touchez une suggestion pour corriger un couple non conforme.
- Les WCAG 2.1 demandent 4,5:1 pour le texte normal (AA) et 7:1 pour AAA. Le grand texte (24 px, ou 18,66 px en gras) demande 3:1 en AA et 4,5:1 en AAA. Composants d’interface et graphiques : 3:1.
- Les suggestions conservent la teinte et la saturation et ne modifient que la luminosité (en OKLCH) jusqu’à la valeur conforme la plus proche.
- Les couleurs semi-transparentes sont fusionnées avec le fond avant le calcul.
- Les valeurs CMJN sont une conversion simple ; pour l’impression, utilisez le profil couleur de votre imprimeur.
- Vos couleurs récentes sont enregistrées uniquement dans ce navigateur.
Les seuils WCAG
Les WCAG 2.1 demandent un ratio d’au moins 4,5:1 pour le texte normal (niveau AA) et 7:1 pour le niveau AAA. Le grand texte, à partir de 24 px ou 18,66 px en gras, demande 3:1 en AA et 4,5:1 en AAA. Les composants d’interface et les graphiques porteurs de sens, comme les bordures de champs et les icônes, demandent 3:1.
Le ratio va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).
Comment le ratio est calculé
Chaque couleur est convertie en luminance relative : les canaux sRGB sont linéarisés puis pondérés par 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Le ratio vaut (L1 + 0,05) / (L2 + 0,05), la couleur la plus claire au numérateur. Le gris #767676 sur blanc donne 4,54:1 et passe tout juste AA, alors que #777777 donne 4,48:1 et échoue : la limite est parfois très fine. Les couleurs semi-transparentes sont d’abord mélangées au fond.
Corriger une paire
Les suggestions gardent teinte et saturation et ne modifient que la luminosité en OKLCH, jusqu’à la valeur conforme la plus proche. Assombrir le texte est en général le changement le moins visible. Le contraste n’est qu’une partie de l’accessibilité : graisse, taille et espacement du texte comptent aussi.
Questions fréquentes
Quel ratio de contraste pour le niveau AA ?
4,5:1 pour le texte normal et 3:1 pour le grand texte (24 px, ou 18,66 px en gras). Boutons, bordures de champs et icônes demandent 3:1 par rapport à leur environnement.
Quelle différence entre AA et AAA ?
AA est le niveau exigé par la plupart des lois et référentiels, comme le RGAA. AAA est plus strict : 7:1 pour le texte normal et 4,5:1 pour le grand texte, conseillé pour la lecture longue ou les personnes malvoyantes.
Un texte blanc sur un bouton bleu passe-t-il ?
Cela dépend du bleu. Blanc sur #1E88E5 donne 3,68:1, ce qui ne passe que pour du grand texte ; pour un libellé de bouton de taille normale, il faut un bleu plus foncé.
Qu’est-ce qu’un grand texte ?
Un texte d’au moins 24 px (18 pt) en normal, ou 18,66 px (14 pt) en gras. Tout ce qui est plus petit est du texte normal.
Comment l’outil choisit-il la couleur suggérée ?
Il garde la teinte et la saturation et n’ajuste que la luminosité en OKLCH jusqu’à atteindre le ratio visé : la couleur reste de la même famille.
Est-ce la même chose que la méthode APCA ?
Non. Ce vérificateur utilise le ratio de contraste WCAG 2.1, la formule citée par les normes et lois d’accessibilité actuelles. L’APCA est une méthode différente, plus récente.