Vérificateur de contraste

Comment utiliser le vérificateur de contraste

1. Indiquez la Couleur du texte et la Couleur de fond. Utilisez les pastilles de couleur ou saisissez une valeur CSS dans les champs : un code HEX comme #595959, rgb(89 89 89), hsl(0 0% 35%) ou un nom comme navy.
2. Le Rapport de contraste se met à jour pendant la saisie, de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
3. Le tableau Résultats WCAG 2.2 affiche Réussi ou Échec pour le Texte normal, le Grand texte et les Composants d’interface et graphiques, aux niveaux AA et AAA.
4. Regardez l’Aperçu : texte normal, grand texte, grand texte gras, contour de bouton et icône, dans vos deux couleurs.
5. Si un niveau échoue, choisissez un Objectif sous Suggestions. L’outil propose la Couleur de texte conforme la plus proche et la Couleur de fond conforme la plus proche. Cliquez sur Utiliser pour l’appliquer. Inverser les couleurs échange le texte et le fond.

Tous les calculs se font dans votre navigateur : rien n’est envoyé.

Comment le rapport de contraste est calculé

Les WCAG 2.x définissent le rapport comme (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncée. La luminance relative se calcule sur les canaux sRGB linéarisés : chaque canal est décodé avec la courbe de transfert sRGB, puis L = 0,2126 R + 0,7152 V + 0,0722 B. Le vert pèse le plus lourd, car l’œil y est le plus sensible : c’est pourquoi un vert pur paraît bien plus lumineux qu’un bleu pur.

Le rapport n’est jamais arrondi vers le haut. Du #777777 sur blanc donne environ 4,48:1 et échoue au niveau AA pour le texte normal, même s’il « ressemble » à 4,5. Cet outil tronque la valeur affichée à deux décimales : ce que vous voyez est ce que les WCAG vérifient.

Si la couleur du texte est semi-transparente (par exemple rgb(0 0 0 / 60%)), elle est d’abord fusionnée avec le fond, comme le ferait le navigateur. La transparence de la couleur de fond est ignorée, puisqu’on ne sait pas ce qui se trouve derrière la page.

Les niveaux WCAG en un coup d’œil

Un « grand texte » mesure au moins 18 points (24 pixels CSS), ou 14 points en gras (environ 18,66 px). Les logos et le texte purement décoratif ne sont soumis à aucune exigence. La règle de 3:1 pour les composants (critère 1.4.11) vise les bordures des champs et des boutons, les indicateurs de focus, les icônes et les courbes de graphiques nécessaires à la compréhension.

Comment fonctionnent les suggestions

Les couleurs suggérées conservent la teinte et la chroma de votre couleur dans l’espace OKLCH et ne modifient que sa luminosité, en l’assombrissant ou en l’éclaircissant, jusqu’à atteindre l’objectif. L’outil retient ensuite la variante la plus proche visuellement de la couleur d’origine, mesurée dans l’espace OKLab. Le résultat est revérifié après l’arrondi en code HEX, pour qu’il soit réellement conforme. Si aucune luminosité ne permet d’atteindre l’objectif (7:1 face à un gris moyen, par exemple), l’outil l’indique.

Et l’APCA ?

L’APCA (Accessible Perceptual Contrast Algorithm) est un modèle de contraste plus récent, envisagé pour de futures WCAG 3. Il tient compte de la graisse, de la taille du texte et de la polarité (foncé sur clair ou clair sur foncé). Il reste à l’état de brouillon et n’a aucune valeur normative : cet outil donne donc les résultats WCAG 2.x, qui restent la référence du RGAA, de la norme européenne EN 301 549 et de la plupart des lois.