Qu’est-ce que Contrast Finder?

Contrast-Finder est un outil qui calcule le contraste entre deux couleurs (arrière-plan, premier plan) et vérifie si le contraste est valide. Lorsque le contraste n’est pas valide, l’objectif principal est de suggérer des contrastes de couleurs corrects.

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

Aide / Comment utiliser cet outil?,

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

• couleur du Texte
• couleur d’arrière-plan
• ratio Minimum
• Couleur pour modifier
• Gimme

couleur du Texte / de premier plan

C’est la couleur du texte. Vous pouvez remplir ce champ avec le mot clé color, une valeur hexadécimale ou une valeur RVB. La valeur d’entrée est ensuite prévisualisée à droite du champ.

la Couleur de mots clés

Exemple: Black, Silver, YellowGreen, MediumPurple.,
Les valeurs autorisées sont celles répertoriées dans les mots-clés CSS color (du niveau CSS 1 au niveau CSS 4).

Couleur avec des valeurs hexadécimales

Exemple: #AABBCC. Veuillez noter que #ABC fonctionne également, nous complétons automatiquement le champ avec #AABBCC. Vous pouvez également utiliser ce champ sans le # personnage, donc FFF ou FFFFFF fonctionne parfaitement.

la Couleur en RVB

Exemple: rgb(255,255,255).,
Vous pouvez également utiliser une syntaxe courte comme 255,255,255, qui sera interprétée comme rgb(255,255,255).

couleur d’arrière-plan

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

rapport Minimum

trois valeurs possibles 3, 4,5 et 7.

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

• niveau d’accessibilité recherché: AA ou AAA.
• Taille du texte.
• Le texte est-il en gras ou non?,

niveau AA

deux éléments (taille et gras) donnent quatre combinaisons:

niveau AAA

pour le niveau AAA la logique est la même, seul le rapport augmente de la manière suivante:

• 4.5 ratio devient 7
• 3 ratio devient 4.5

compréhension de la taille du 19px les critères peuvent être compris comme l’équivalent de 14ptou120%ou1.2em.,

Le 24px critères peuvent être compris comme l’équivalent de la balise 18pt ou 150% ou 1.5em.

Pour une compréhension complète et exhaustive de la façon d’interpréter la taille du texte, il faut lire la définition du texte à grande échelle de WCAG.

tous les détails sur le rapport de contraste

couleur à modifier

Il s’agit du texte ou de la couleur d’arrière-plan. Par défaut est la couleur du texte.

la couleur que vous choisissez sera modifiée jusqu’à ce que nous trouvions une couleur valide. L’autre couleur ne change pas.,

Gimme / Les algorithmes

« Valide couleurs et très proche de couleur initiale”

C’est l’algorithme par défaut. Il offre des options de couleur très proches de la couleur initiale. (La distance de couleur est calculée sur une base mathématique, qui peut varier du point de vue du concepteur.)

pour certaines combinaisons de couleurs, l’algorithme peut ne pas donner de résultat ; dans ce cas, utilisez l’autre algorithme.

« une plage de couleurs valides”

c’est l’algorithme de sauvegarde, au cas où le premier ne donnerait aucun résultat. Néanmoins, les options de couleur peuvent être (fortement) différentes de la couleur initiale.,

Commentaires de l’Utilisateur

Si vous avez des problèmes ou des questions sur Contrast-Finder, veuillez nous contacter:

• Asqatasun forum
• Twitter @Contrast_Finder
• Contrast-Finder sur Github

de Contribuer à Contrast-Finder