Aller au contenu
helpyself

Correcteur de contraste

Local only — nothing is uploaded unless you save or share it.

Un correcteur de contraste des couleurs — la couleur accessible la plus proche qui passe le niveau AA des WCAG.

  1. Saisissez la couleur de texte et la couleur de fond qui échouent.
  2. Choisissez le niveau WCAG qu'il vous faut — AA est la cible habituelle pour le texte courant.
  3. Décidez quelle couleur peut changer, ou laissez bouger la plus proche.
  4. Copiez la couleur proposée, ou prenez une autre option dans la liste.
Enregistrer cet outil

Gardez Correcteur de contraste sous la main

Ajouter aux favoris

À propos de cet outil

Savoir qu'une paire de couleurs échoue n'est que la moitié d'une réponse. Voici le correcteur de contraste pour l'autre moitié : donnez-lui une paire en échec et il renvoie la couleur accessible la plus proche qui passe. Un vérificateur de contraste vous dit que 3,1:1 ne suffit pas et vous laisse deviner des nuances jusqu'à ce que l'une tienne — c'est ainsi que les couleurs de marque deviennent discrètement la première venue qui a passé. Ceci trouve la couleur la plus proche qui fonctionne. Il déplace la clarté et rien d'autre : votre teinte et votre saturation survivent, et le résultat est reconnaissablement la couleur que vous avez choisie, un peu plus claire ou plus sombre, plutôt qu'une autre couleur qui franchit la barre par hasard. Et il examine toutes les clartés possibles au lieu de s'arrêter au premier succès, si bien qu'une couleur qui n'a besoin que de 3 % de changement en reçoit 3 %. C'est vous qui décidez quelle couleur a le droit de bouger. Les palettes de marque en figent généralement une des deux — le fond, c'est la page, ou la couleur du texte, c'est le logo — et une suggestion qui modifie la mauvaise ne sert à rien. Demandez une correction sur le texte, sur le fond, ou sur celle qui est la plus proche. Les quatre grades WCAG sont là : AA à 4,5:1 pour le texte courant, AA Grand à 3:1 pour les titres de 18pt ou 14pt gras, et les niveaux AAA plus stricts à 7:1 et 4,5:1. Tout fonctionne dans votre navigateur.

Questions fréquentes

Pourquoi ne change-t-il que la clarté ?

Parce que le contraste est fonction de la luminance relative, et que parmi teinte, saturation et clarté, seule la clarté déplace la luminance de façon notable. Changer la teinte donnerait une couleur qui passe et qui n'est pas la vôtre. Garder teinte et saturation, c'est que la correction ressemble encore à la couleur choisie.

Quelle est la couleur la plus proche qui passe ?

Celle dont la clarté a le moins bougé. Toutes les valeurs de 0 à 100 sont essayées et le plus petit changement qui franchit votre niveau l'emporte : on ne vous demande jamais d'assombrir plus que nécessaire.

Et si rien ne passe ?

Il le dit. Sur un fond gris moyen, l'AAA à 7:1 est hors d'atteinte même avec du noir pur ou du blanc pur — aucune nuance d'aucune couleur n'y arrive. La réponse honnête est alors de changer l'autre couleur, et c'est à cela que sert l'option de réglage.

Quel niveau WCAG viser ?

L'AA à 4,5:1 pour le texte courant est l'exigence légale dans la plupart des pays, y compris la directive européenne sur l'accessibilité. L'AAA à 7:1 vaut la peine pour la lecture longue. Le grand texte — 18pt, ou 14pt gras — a droit à 3:1 en AA.

Cela remplace-t-il le vérificateur de contraste ?

Non, cela vient après. Le vérificateur vous dit où vous en êtes et face à quels niveaux ; celui-ci vous dit quoi faire d'un échec. Ils partagent le même calcul de contraste : les deux ne se contrediront jamais.

Aidez-nous à améliorer cet outil

Un bug, une envie de changement, ou un outil qui vous manque ?

/contrast-fixer

↑↓ pour se déplacer · Entrée pour ouvrir · Échap pour fermer