Vérificateur de contraste des couleurs

Un contraste insuffisant entre le texte et l'arrière-plan rend le contenu difficile à lire – en particulier pour les personnes malvoyantes, les utilisateurs âgés ou ceux qui consultent votre site sur un écran en plein soleil. Les directives WCAG 2.1 définissent des seuils minimaux de contraste pour garantir l'accessibilité.

Cet outil calcule le rapport de contraste entre deux couleurs, évalue la conformité WCAG (AA et AAA) pour le texte normal, le texte grand et les icônes, et propose une fonction d'ajustement automatique pour trouver des couleurs conformes.

L'outil affiche le rapport de contraste sur une échelle de 1:1 (aucun contraste) à 21:1 (contraste maximum – noir sur blanc). Le résultat est comparé aux seuils définis dans le standard WCAG :

• Texte normal – nécessite au moins 4,5:1 pour le niveau AA (standard minimum) ou 7:1 pour le niveau AAA (standard amélioré). S'applique au texte inférieur à 18pt (24px) ou inférieur à 14pt (18,5px) en gras.
• Texte grand / gras – nécessite au moins 3:1 pour le niveau AA ou 4,5:1 pour le niveau AAA. S'applique au texte à partir de 18pt (24px) ou à partir de 14pt (18,5px) en gras – titres, boutons, mises en évidence.
• Icônes et éléments d'interface – nécessitent au moins 3:1 pour le niveau AA. S'applique aux icônes, boutons, champs de formulaire et autres éléments d'interface qui transmettent de l'information.

Le niveau AA est le minimum exigé par les réglementations d'accessibilité numérique dans de nombreux pays, y compris la directive européenne sur l'accessibilité des sites web. Le niveau AAA offre une meilleure lisibilité, mais n'est pas toujours réalisable pour tous les éléments.

Si le contraste est trop faible, la fonction Ajustement trouve automatiquement une variante de couleur de texte conforme au seuil de contraste sélectionné.

Comment fonctionne l'ajustement :

1. Sélectionnez l'objectif d'ajustement dans la liste, par ex. AA pour texte normal ou AAA pour texte grand.
2. Cliquez sur le bouton Ajuster.
3. L'outil recherche parmi les variantes de luminosité de la couleur du texte et suggère la plus proche conforme aux exigences.
4. La couleur suggérée peut être copiée dans le presse-papiers ou définie immédiatement comme nouvelle couleur de texte.

L'algorithme préserve la teinte et la saturation de la couleur d'origine, ne modifiant que la luminosité. La couleur suggérée reste cohérente avec l'identité visuelle tout en respectant le standard d'accessibilité.

Message d'erreur de format de couleur

Vérifiez le format de la couleur. Un code HEX doit commencer par # et contenir 3 ou 6 caractères (par ex. #fff ou #ffffff). Pour le format RGB, vérifiez que les valeurs sont séparées par des virgules et comprises entre 0 et 255.

La fonction Ajustement ne trouve pas de couleur appropriée

Lorsque l'arrière-plan et le texte ont une luminosité similaire dans la même teinte, l'algorithme peut ne pas trouver de variante conforme aux exigences sans changer la teinte. Dans ce cas, envisagez de modifier la couleur d'arrière-plan ou de choisir une couleur de texte complètement différente.

La couleur dans le sélecteur ne correspond pas au code saisi

Le sélecteur de couleurs du navigateur ne prend en charge que le format HEX sans transparence. Si vous saisissez une couleur au format RGBA ou HSLA avec transparence, le sélecteur n'affichera que la partie colorée (sans alpha). Les calculs de contraste continuent de prendre en compte la transparence.

Le daltonisme est un trouble de la perception des couleurs qui touche environ 8 % des hommes et 0,5 % des femmes. Les personnes daltoniennes peuvent avoir du mal à distinguer certaines paires de couleurs, même si le contraste de luminosité est suffisant.

Types les plus courants de daltonisme :

• Deutéranopie – difficulté à distinguer le vert du rouge (forme la plus courante)
• Protanopie – difficulté à percevoir le rouge
• Tritanopie – difficulté à percevoir le bleu et le jaune (rare)

Cet outil vérifie le contraste de luminosité, qui est important pour tous les utilisateurs. Cependant, lors de la conception, il convient d'éviter les combinaisons de couleurs problématiques (par ex. texte rouge sur fond vert) et de ne pas se fier uniquement à la couleur pour transmettre de l'information – utilisez aussi des formes, des icônes et du texte.