Vérificateur de contraste WCAG

À propos du vérificateur de contraste WCAG

Notre vérificateur de contraste WCAG en ligne gratuit aide les designers, les développeurs et les spécialistes de l’accessibilité à vérifier que les combinaisons de couleurs de texte et d’arrière-plan respectent les exigences de contraste des Web Content Accessibility Guidelines (WCAG) 2.1. Un contraste de couleurs accessible garantit que tous les utilisateurs, y compris ceux ayant une basse vision ou une déficience de la vision des couleurs, peuvent lire et utiliser votre contenu web.

L’outil calcule le rapport de contraste entre deux couleurs quelconques avec la formule officielle de luminance relative du W3C et indique instantanément si la combinaison réussit ou échoue aux niveaux de conformité WCAG AA et WCAG AAA, pour le texte normal comme pour le texte de grande taille. Tous les calculs sont effectués en temps réel directement dans votre navigateur, sans aucune donnée envoyée à un serveur.

Que vous meniez un audit d’accessibilité, conceviez une nouvelle interface ou vérifiiez la conformité d’un contenu existant, ce vérificateur de contraste vous donne des résultats précis et conformes aux normes, avec des aperçus de texte en direct et des suggestions concrètes pour corriger les combinaisons de couleurs qui échouent.

Comprendre les exigences de contraste WCAG

Les Web Content Accessibility Guidelines (WCAG) sont la norme d’accessibilité web reconnue à l’échelle internationale, publiée par le World Wide Web Consortium (W3C). Les WCAG définissent des seuils précis de rapport de contraste pour garantir la lisibilité du texte aux utilisateurs ayant des capacités visuelles variées.

• WCAG niveau AA (texte normal) : Un rapport de contraste minimal de 4.5:1 est requis. Il s’applique au corps de texte, aux paragraphes et à tout texte inférieur à 18 pt (24 px) ou à 14 pt en gras (18.66 px en gras).
• WCAG niveau AA (grand texte) : Un rapport de contraste minimal de 3:1 est requis. Un grand texte se définit comme un texte d’au moins 18 pt (24 px) ou 14 pt en gras (18.66 px en gras).
• WCAG niveau AAA (texte normal) : Un rapport de contraste minimal de 7:1 est requis. C’est le niveau de conformité d’accessibilité le plus élevé pour un texte de taille normale.
• WCAG niveau AAA (grand texte) : Un rapport de contraste minimal de 4.5:1 est requis pour un grand texte au niveau de conformité AAA.

Atteindre au moins le niveau WCAG AA est considéré comme la norme de base d’une conception web accessible et est exigé par de nombreux cadres juridiques dans le monde, notamment l’Americans with Disabilities Act (ADA), la loi européenne sur l’accessibilité et la Section 508 du Rehabilitation Act. Le niveau WCAG AAA offre un degré d’accessibilité renforcé, recommandé lorsque c’est possible.

Comment le rapport de contraste est calculé

Le rapport de contraste entre deux couleurs est déterminé à partir de la luminance relative de chaque couleur, telle que définie dans la spécification WCAG 2.1. La luminance relative mesure la luminosité perçue d’une couleur sur une échelle de 0 (noir le plus sombre) à 1 (blanc le plus clair).

Le calcul comporte trois étapes. D’abord, chaque canal de couleur (rouge, vert, bleu) est converti de sa valeur sRGB 8 bits (0-255) en valeur sRGB normalisée (0-1) en divisant par 255. Ensuite, chaque valeur normalisée subit une correction gamma : si la valeur est inférieure ou égale à 0.04045, elle est divisée par 12.92 ; sinon, elle est transformée avec la formule ((value + 0.055) / 1.055) ^ 2.4. Enfin, les valeurs linéarisées des canaux sont combinées avec des coefficients pondérés : L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

Le rapport de contraste final se calcule comme (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. Le résultat est une valeur allant de 1:1 (aucun contraste, couleurs identiques) à 21:1 (contraste maximal, noir pur sur blanc pur).

Fonctionnalités principales

• Calcul du rapport de contraste en temps réel avec la formule de luminance officielle du W3C pour WCAG 2.1
• Indicateurs de réussite ou d’échec pour les niveaux de conformité WCAG AA et AAA, pour le texte normal comme pour le grand texte
• Sélecteur de couleur interactif et saisie hexadécimale pour la couleur du texte et celle de l’arrière-plan
• Inversion des couleurs en un clic pour tester les combinaisons inversées
• Dix combinaisons de couleurs prédéfinies rapides, dont des associations accessibles courantes
• Aperçu de texte en direct montrant le rendu de vos couleurs en taille normale et en grande taille
• Suggestion automatique de la couleur de texte la plus proche qui réussit lorsque la combinaison actuelle échoue
• Détails techniques de luminance pour la couleur du texte et celle de l’arrière-plan
• Prise en charge complète du mode sombre pour un usage confortable dans tout environnement
• Tout le traitement s’exécute en local dans le navigateur, sans donnée transmise à des serveurs externes

Comment utiliser le vérificateur de contraste WCAG

1. Définissez la couleur du texte : Cliquez sur le carré du sélecteur de couleur ou saisissez une valeur hexadécimale (par ex. #1A1A2E) dans le champ pour définir la couleur de votre texte ou de premier plan.
2. Définissez la couleur d’arrière-plan : De même, utilisez le sélecteur de couleur ou la saisie hexadécimale pour définir la couleur d’arrière-plan derrière le texte.
3. Consultez les résultats : Le rapport de contraste et les résultats de réussite ou d’échec pour les quatre niveaux WCAG s’affichent instantanément à mesure que vous changez les couleurs.
4. Vérifiez l’aperçu en direct : Faites défiler la page pour voir le texte réel rendu avec la combinaison de couleurs choisie, en taille normale et en grande taille.
5. Appliquez les suggestions : Si la combinaison échoue au niveau WCAG AA, une couleur de texte suggérée s’affiche. Cliquez sur Appliquer pour l’utiliser.
6. Essayez les préréglages : Utilisez les préréglages rapides pour tester des combinaisons de couleurs connues, accessibles ou non.
7. Inversez les couleurs : Cliquez sur le bouton Inverser les couleurs pour intervertir le texte et l’arrière-plan sélectionnés.

Pourquoi le contraste des couleurs compte pour l’accessibilité

Environ 1 homme sur 12 et 1 femme sur 200 dans le monde présentent une forme de déficience de la vision des couleurs. En outre, des millions de personnes ont une basse vision, des changements de vision liés à l’âge ou des limitations temporaires comme les reflets sur l’écran. Un contraste de couleurs suffisant est l’un des moyens les plus efficaces et les plus simples de rendre le contenu web accessible à tous ces utilisateurs.

Un faible contraste entre le texte et l’arrière-plan est l’un des problèmes d’accessibilité les plus fréquents relevés dans les audits web. En utilisant un vérificateur de contraste WCAG pendant la conception et le développement, les équipes peuvent repérer et corriger les problèmes de contraste avant la mise en production, ce qui réduit les coûts de correction et garantit dès le départ la conformité aux réglementations d’accessibilité.

Un bon contraste des couleurs profite aussi aux utilisateurs sans handicap. Il améliore la lisibilité en plein soleil, sur des écrans de mauvaise qualité et dans les environnements très distrayants. Une conception accessible est une conception inclusive qui offre une meilleure expérience à tous.

Questions fréquentes