Contrast Finder

Contrast-Finder trouve les bons contrastes de couleurs pour l’accessibilité web

Le critère de succès 1.4.3 du WCAG impose pour le texte un rapport de contraste minimum de 4.5 (et de 3 pour le texte agrandi).

Couleur au format hexadécimal, RGB ou par mot clé.
Exemple : #FFFFFF, rgb(255,255,255) ou white

Contrast Finder, c’est quoi ?

Contrast-Finder est un outil qui calcule le contraste entre deux couleurs (arrière-plan et premier plan) et qui vérifie si il est suffisant. Si ce contraste n’est pas valide, l’outil suggère plusieurs propositions de couleurs alternatives ayant un contraste correct.

Contrast-Finder est conçu pour être utilisé par les webdesigners, les développeurs web ou les professionnels de l’accessibilité web afin d’améliorer la lisibilité des pages HTML et des sites web.

Aide / Comment utiliser cet outil ?

L’interface de Contrast-Finder est un formulaire de cinq champs obligatoires.

Premier plan : couleur du texte

C’est la couleur du texte. Vous pouvez remplir ce champ avec un nom de couleur CSS, une valeur hexadécimale, ou une valeur RGB. La valeur saisie est alors prévisualisée à droite du champ.

Couleur par mots-clés

Exemple : Black, Silver, YellowGreen, MediumPurple.
Les valeurs autorisées sont les noms des couleurs utilisables en CSS (du niveau CSS 1 au niveau CSS 4).

Couleur en hexadécimal

Exemple : #AABBCC. Notez que #ABC fonctionne également, nous complétons automatiquement le champ avec #AABBCC. Vous pouvez également utiliser ce champ sans le caractère #, ainsi FFF ou FFFFFF fonctionnent parfaitement.

Couleur en RGB

Exemple : rgb(255,255,255).
De la même manière, 255,255,255 fonctionne également, nous remplaçons la valeur de ce champ par rgb(255,255,255).

Arrière-plan : couleur du fond

C’est la couleur d’arrière-plan.
Ce champ fonctionne comme le champ couleur du texte.

Ratio minimum

Trois valeurs possibles : 3, 4.5 et 7.

Comment choisir un ratio ? Cela dépend des éléments suivants :

Niveau AA

Deux éléments (la taille et la graisse du texte) donnent 4 combinaisons :

Niveau AAA

Pour le niveau AAA, la logique est la même avec une augmentation de la valeur des ratios :

Interprétation de la taille des textes

Pour une compréhension complète et exhaustive de l’interprétation de la taille des textes, le lecteur est renvoyé à la définition de texte agrandi du WCAG.

Informations complémentaires sur le contraste pour l’accessibilité

En complément, toutes les informations détaillées (en français et en anglais) sur le rapport de contraste entre le texte et son arrière-plan :

Couleur à modifier

Il s’agit de la couleur du texte ou de la couleur du fond. Par défaut, c’est la couleur du texte.

La couleur que vous choisissez sera modifiée jusqu’à ce que l’outil trouve une couleur valide. L’autre couleur ne changera pas.

Propose-moi / Les algorithmes

“Couleurs valides et très proches de la couleur initiale”

Ceci est l’algorithme par défaut. Il propose des couleurs extrêmement proches de la couleur initiale. (La proximité est calculée sur des critères mathématiques, qui peuvent être différents d’une vision graphique.)

L’algorithme dans certains cas ne renvoi aucun résultat ; dans ce cas, choisissez l’autre algorithme. :)

“Palette de couleurs valides”

Ceci est l’algorithme “de secours”, au cas où le premier ne donne rien. En revanche, les couleurs proposées peuvent être plus éloignées, voire franchement distincte de la couleur initiale.

Une question ?

Si vous avez des questions ou des remarques sur Contrast-Finder, contactez-nous :

Contribuer à Contrast-Finder

Toutes les contributions sont chaleureusement accueillies ! Traduction, correction, rapport de bug, nouvelle fonctionnalité… N’hésitez pas à jouer avec le code source ou à en discuter sur le forum.