Aller au contenu

Vérificateur de Contraste

Vérifiez les rapports de contraste WCAG 2.1. Obtenez des badges Réussi/Échoué pour les niveaux AA et AAA avec des alternatives accessibles.

Le renard brun rapide saute par-dessus le chien paresseux.

Grand Texte (18pt+)

Rapport de Contraste

12.63:1

Résultats WCAG 2.1

AA Texte NormalRéussi

Min. requis: 4.5:1

AA Grand TexteRéussi

Min. requis: 3:1

AAA Texte NormalRéussi

Min. requis: 7:1

AAA Grand TexteRéussi

Min. requis: 4.5:1

Vérificateur de Contraste de Couleurs Gratuit – Outil de Conformité WCAG 2.1

Le contraste des couleurs est l'un des facteurs les plus critiques en accessibilité web. Les Directives pour l'Accessibilité du Contenu Web (WCAG) 2.1, maintenues par le W3C, établissent des rapports de contraste minimaux entre les couleurs de texte et d'arrière-plan pour garantir que le contenu soit lisible par tous, y compris les personnes malvoyantes ou daltoniennes. Notre Vérificateur de Contraste de Couleurs gratuit calcule instantanément le rapport de contraste entre deux couleurs.

Les directives WCAG 2.1 définissent quatre niveaux de conformité. Le niveau AA exige un rapport minimum de 4.5:1 pour le texte de taille normale (moins de 18pt ou 14pt gras) et 3:1 pour le grand texte (18pt et plus, ou 14pt gras et plus). Le niveau AAA, le standard le plus élevé, exige 7:1 pour le texte normal et 4.5:1 pour le grand texte.

Le rapport de contraste est calculé en utilisant la luminance relative, une mesure de la luminosité perçue d'une couleur par l'œil humain. La formule convertit les valeurs sRGB en valeurs linéaires, puis les pondère selon la perception humaine : le vert contribue le plus à la luminosité perçue (71,52%), suivi du rouge (21,26%) et du bleu (7,22%).

Un mauvais contraste de couleurs affecte une proportion significative des utilisateurs web. Environ 8% des hommes et 0,5% des femmes ont une forme de déficience de la vision des couleurs. Les adultes plus âgés connaissent naturellement une sensibilité au contraste réduite. Les facteurs environnementaux comme l'éblouissement de l'écran réduisent davantage le contraste effectif.

Au-delà de la conformité, un bon contraste améliore l'expérience utilisateur globale. Un texte facile à lire réduit la fatigue oculaire, augmente la vitesse de lecture et améliore la compréhension. Les marques qui priorisent le design accessible bénéficient aussi d'un meilleur SEO. Notre outil simplifie la vérification de vos choix de couleurs.

Si votre combinaison de couleurs ne respecte pas les standards WCAG, notre outil suggère automatiquement une alternative accessible. Il ajuste la couleur de premier plan à la nuance la plus proche qui satisfait l'exigence AA Normal (4.5:1), en préservant au maximum l'intention du design. Cette fonctionnalité est précieuse pour les designers et développeurs.

FAQ

Partager

FAQ

Quel est un bon rapport de contraste pour l'accessibilité web ?+
WCAG 2.1 Niveau AA exige au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte (18pt+ ou 14pt+ gras). Le Niveau AAA exige 7:1 pour le texte normal et 4.5:1 pour le grand texte. Un rapport de 4.5:1 ou plus est considéré bon.
Qu'est-ce qui compte comme "grand texte" dans les directives WCAG ?+
Le grand texte est défini comme un texte d'au moins 18 points (24px) en poids normal, ou au moins 14 points (environ 18.66px) en gras. Le grand texte a une exigence de contraste plus faible car sa taille accrue le rend intrinsèquement plus lisible.
Comment le rapport de contraste est-il calculé ?+
Le rapport de contraste utilise la luminance relative des deux couleurs. Chaque composante RGB est linéarisée depuis sRGB, puis pondérée (R × 0.2126 + G × 0.7152 + B × 0.0722). Le rapport est (L1 + 0.05) / (L2 + 0.05) où L1 est la luminance de la couleur la plus claire.
Cet outil fonctionne-t-il pour les utilisateurs daltoniens ?+
Cet outil vérifie le contraste basé sur la luminance, le standard WCAG. Un contraste de luminance suffisant garantit la lisibilité indépendamment de la déficience de vision des couleurs.
Puis-je l'utiliser pour le design d'applications mobiles ?+
Oui. Les directives WCAG 2.1 s'appliquent à tout contenu numérique, y compris les applications mobiles, web et de bureau. Les mêmes rapports de contraste doivent être respectés pour le texte sur des fonds colorés dans toute interface numérique.

Outils les plus populaires