Aller au contenu

Vérificateur de contraste des couleurs (WCAG AA et AAA)

Vérifiez si votre texte se lit bien sur son fond : calculez le ratio de contraste WCAG, contrôlez AA et AAA pour le texte normal, le grand texte et les éléments d'interface, et obtenez la couleur la plus proche qui est conforme.

4.64:1Bon

Titre d’aperçu

Portez ce vieux whisky au juge blond qui fume

Couleurs

  • Texte normal

    AA 4.5 · AAA 7

    AAAAA

  • Grand texte

    AA 3 · AAA 4.5

    AAAAA

  • Élément UI

    AA 3

    AA

Contraste 4.64:1. Texte normal: AA Conforme, AAA Non conforme. Grand texte: AA Conforme, AAA Conforme. Élément UI: AA Conforme.

Couleurs conformes

Les couleurs les plus proches qui sont conformes pour le texte normal, avec la même teinte. Cliquez sur l'une d'elles pour l'appliquer.

AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige 7:1 et 4,5:1 respectivement.

Combinaisons d'exemple

Des paires de couleurs courantes : certaines sont conformes, d'autres non. Chargez-en une pour la vérifier.

Qu'est-ce que le ratio de contraste et pourquoi est-il important

Le ratio de contraste mesure la différence de luminosité entre deux couleurs, généralement la couleur d'un texte et celle de son fond. Plus le nombre est élevé, plus il est facile de distinguer le texte du fond. Les Règles pour l'accessibilité des contenus Web (WCAG), la norme internationale de référence, fixent des ratios minimaux selon la taille du texte et le niveau de conformité visé.

Un contraste insuffisant n'est pas qu'un problème esthétique : il gêne la lecture des personnes malvoyantes, ayant des troubles de la perception des couleurs, ou simplement de quiconque utilise son téléphone en plein soleil. Respecter les WCAG est en outre une obligation légale dans de nombreux pays au titre des réglementations sur l'accessibilité numérique.

Les niveaux AA et AAA expliqués

AA (minimum recommandé)

C'est le niveau exigé par la plupart des réglementations sur l'accessibilité, dont l'Acte européen sur l'accessibilité.

Texte normal
4,5:1
Grand texte / UI
3:1

AAA (niveau renforcé)

Recommandé pour les contenus critiques ou les publics ayant des besoins d'accessibilité plus élevés, mais pas toujours exigible sur tout le site.

Texte normal
7:1
Grand texte
4,5:1

Vérifier le contraste en trois étapes

  1. Choisissez texte et fond

    Cliquez sur Couleur du texte ou Couleur de fond et ajustez-la avec le sélecteur, la pipette ou en saisissant son code. La transparence est prise en charge.

  2. Vérifiez chaque usage

    Vous verrez le ratio et s'il respecte AA et AAA pour le texte normal, le grand texte et les éléments d'interface comme les icônes ou les bordures de champs.

  3. Appliquez une suggestion

    S'il n'est pas conforme, l'outil propose la couleur la plus proche qui l'est, avec la même teinte. Un clic et c'est fait.

Ce qui compte comme grand texte

Les WCAG considèrent comme grand texte celui qui mesure au moins 18 points (24 px) ou 14 points en gras (environ 18,66 px). Comme ses traits sont plus épais, il se lit avec moins de contraste : 3:1 suffit pour AA et 4,5:1 pour AAA.

Tout le reste est du texte normal, qui demande 4,5:1 pour AA et 7:1 pour AAA. Attention aux petits textes secondaires, comme les notes, les étiquettes ou les légendes : ce sont souvent eux qui échouent.

Le contraste des boutons, icônes et champs

Le contraste ne concerne pas que le texte. Les WCAG demandent un minimum de 3:1 pour les éléments d'interface qu'il faut voir pour utiliser la page : la bordure d'un champ de formulaire, les icônes porteuses d'information, l'indicateur de focus ou les états d'un contrôle.

Une bordure gris très clair sur blanc peut sembler élégante, mais beaucoup de personnes ne verront pas où se trouve le champ.

Non concernés

  • Logos
  • Texte décoratif
  • Contrôles désactivés
  • Images et photos

Comment se calcule le ratio de contraste

Le ratio compare la luminance relative des deux couleurs, c'est-à-dire la quantité de lumière émise par chacune une fois corrigée la réponse de l'œil.

L1
Luminance relative de la couleur la plus claire, de 0 (noir) à 1 (blanc).
L2
Luminance relative de la couleur la plus foncée.
0.05
Compense la lumière ambiante réfléchie par l'écran. C'est pourquoi le maximum est de 21:1 (blanc sur noir) et le minimum de 1:1 (la même couleur).

(L1 + 0.05) / (L2 + 0.05)

Aa(1 + 0.05) / (0 + 0.05) = 21:1

Questions fréquentes

Pour le texte normal, un ratio d'au moins 4,5:1 respecte le niveau AA des WCAG, le minimum recommandé. Pour un contraste renforcé (niveau AAA), il faut un ratio de 7:1.

AA est le niveau minimum exigé par la plupart des réglementations sur l'accessibilité. AAA est un niveau renforcé, plus exigeant, recommandé pour les contenus critiques mais pas toujours obligatoire sur tout un site.

Parce que la taille et l'épaisseur des grandes lettres facilitent déjà la lecture, les WCAG autorisent un ratio plus faible (3:1 en AA) contre 4,5:1 pour le texte normal.

Le texte d'au moins 18 points (24 px) ou 14 points en gras (environ 18,66 px). Il demande 3:1 pour AA et 4,5:1 pour AAA, contre 4,5:1 et 7:1 pour le texte normal.

Dans de nombreux pays, oui, en particulier pour les administrations publiques et, de plus en plus, pour les entreprises privées au titre de réglementations comme l'Acte européen sur l'accessibilité. Même sans obligation légale, respecter les WCAG améliore l'expérience de tous vos utilisateurs.

Il se calcule à partir de la luminance relative des deux couleurs, une mesure de la lumière qu'elles réfléchissent, et s'exprime comme une proportion entre 1:1 (aucun contraste, même couleur) et 21:1 (le maximum possible, blanc pur sur noir pur).

Non. Les WCAG exemptent les logos, le texte décoratif et les contrôles désactivés. En revanche, cela s'applique aux boutons actifs, aux champs de formulaire, aux icônes porteuses de sens et à l'indicateur de focus, qui demandent au moins 3:1.

Le ratio se calcule sur la couleur réellement visible : un texte semi-transparent se mélange à son fond avant la mesure, et un fond semi-transparent se mélange au blanc. Vous pouvez ajouter de la transparence depuis le champ de couleur de l'outil.

Utilisez les suggestions de l'outil : il vous propose la couleur de texte ou de fond la plus proche qui respecte AA ou AAA, en gardant la même teinte, pour que votre marque ne change pas. Vous pouvez aussi explorer des variations de la couleur dans le sélecteur de couleur.

Plus d'outils