Verificateur de Contraste

Publicité

Vérifiéz si vos combinaisons de couleurs respectent les normes WCAG.

Exemples:
WCAG 2.2 12.63:1
Score APCA (Lc) Lc 97
Portez ce vieux whisky au juge blond qui fume.
Exemple de Grand Texte
Texte gras a 14pt poids 700
Bouton Link text
Niveau WCAG Texte Normal Grand Texte Composants UI
AA (Requis)
AAA

Tailles de Police Minimales APCA

Graisse300400500600700

Code CSS

Simulation de Daltonisme

Portez ce vieux whisky au juge blond qui fume.
Exemple de Grand Texte
Publicité

À propos de cet outil

La vérification du contraste des couleurs consiste a mesurer la différence de luminance entre les couleurs de premier plan et d'arriere-plan pour déterminer si le texte reste lisible pour tous les utilisateurs, y compris ceux ayant des deficiences visuelles. Les Regles pour l'accessibilite des contenus Web (WCAG), elaborees par le World Wide Web Consortium (W3C), etablissent la norme internationale d'accessibilite numérique et définissent des seuils de contraste spécifiques que chaque site web et application devrait respecter. Les WCAG 2.2 spécifiént deux niveaux de conformite pour le contraste. Le Niveau AA, la norme minimale exigee par la plupart des lois sur l'accessibilite, requiert un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (18pt normal ou 14pt gras). Le Niveau AAA, la norme amélioree recommandée pour le contenu gouvernemental, de santé et educatif, exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Ces seuils reposent sur des recherches sur la perception des contenus à l'écran par les personnes ayant une vision moderement basse. L'accessibilite est également une obligation legale dans de nombreuses juridictions. L'Americans with Disabilities Act (ADA) aux Etats-Unis, la Section 508 du Rehabilitation Act et la norme europeenne EN 301 549 imposent que le contenu numérique soit perceptible par les personnes handicapees. La non-conformite peut entrainer des poursuites, des amendes et l'exclusion d'une partie importante de votre audience. Cet outil calculé les ratios de contraste en convertissant les valeurs sRGB en RGB lineaire, en calculant la luminance relative de chaque couleur avec les coefficients ITU-R BT.709 et en appliquant la formule WCAG (L1 + 0,05) / (L2 + 0,05). Il inclut aussi une simulation de daltonisme pour la protanopie, la deuteranopie et la tritanopie, aidant les designers a vérifiér que leurs choix de couleurs fonctionnent pour les quelque 300 millions de personnes atteintes de deficience de la vision des couleurs. Tous les calculs s'executent localement dans votre navigateur.

Sources: WCAG 2.2 · SC 1.4.3 · SC 1.4.11

Comment Utiliser

  1. Entrez vos couleurs de texte (premier plan) et d'arriere-plan en utilisant les selecteurs ou codes HEX.
  2. Vérifiéz le ratio de contraste et les résultats de conformite WCAG. Vert indique reussi, rouge echoue.
  3. Utilisez la simulation de daltonisme pour vérifiér que vos couleurs fonctionnent pour les utilisateurs malvoyants.

Comment Utiliser

  1. Entrez vos couleurs de texte (premier plan) et d'arriere-plan en utilisant les selecteurs ou codes HEX.
  2. Vérifiéz le ratio de contraste et les résultats de conformite WCAG. Vert indique reussi, rouge echoue.
  3. Utilisez la simulation de daltonisme pour vérifiér que vos couleurs fonctionnent pour les utilisateurs malvoyants.

Méthodologie

Le calcul du ratio de contraste suit l'algorithme WCAG 2.2 avec précision. D'abord, le code hexadecimal de chaque couleur est decompose en ses composantes rouge, verte et bleue, qui sont ensuite normalisees en valeurs entre 0 et 1 en divisant par 255. Ces valeurs lineaires subissent une correction gamma en utilisant la fonction de transfert sRGB : les valeurs egales ou inférieures a 0,03928 sont divisees par 12,92, tandis que les valeurs plus grandes utilisent la formule ((valeur + 0,055) / 1,055) élevée à la puissance 2,4. Cette correction gamma tient compte de la manière non lineaire dont les écrans emettent la lumière. Ensuite, la luminance relative est calculée en utilisant les coefficients ITU-R BT.709 : L = 0,2126R + 0,7152G + 0,0722B. Ces poids refletent la sensibilité différente de l'oeil humain a chaque couleur primaire, le vert contribuant le plus à la luminosite percue. Le ratio de contraste final est calculé comme (L1 + 0,05) / (L2 + 0,05), ou L1 est la luminance de la couleur la plus claire. Les résultats vont de 1:1 (couleurs identiques) a 21:1 (noir pur sur blanc pur). L'outil evalue ensuite ce ratio par rapport aux seuils AA et AAA pour le texte normal et le grand texte, fournissant un résultat clair de reussite ou d'echec pour chaque niveau de conformite.

Sources: WCAG 2.2 Luminance · SC 1.4.3

Comprendre vos Résultats

Un ratio de contraste de 4,5:1 ou supérieur satisfait le WCAG AA pour le texte normal, la norme que la plupart des sites web devraient viser. Un ratio de 3:1 satisfait l'AA pour le grand texte (18pt normal ou 14pt gras et plus) et suffit également pour les composants d'interface comme les bordures de formulaires, les icones et les indicateurs de focus. Pour le niveau améliore AAA, il faut 7:1 pour le texte normal et 4,5:1 pour le grand texte. Lorsque l'outil affiché "Echoue", cela signifie que les utilisateurs ayant des deficiences visuelles moderees pourraient avoir du mal a lire. Pour améliorer le contraste tout en preservant l'esthetique de marque, essayez d'assombrir ou d'eclaircir une couleur progressivement plutot que de la remplacer entièrement. Souvent un changement de seulement 10-15% de luminosite suffit pour franchir le seuil. Les piégés courants incluent l'utilisation de texte d'espace reserve gris clair, le recours a des graisses de police fines qui reduisent le contraste percu et l'oubli du contraste des éléments desactives. Les résultats de la simulation de daltonisme sont tout aussi importants. Même si vos couleurs passent la vérification du contraste, elles peuvent devenir indiscernables pour les utilisateurs avec une deficience de la vision des couleurs. Un bouton rouge sur fond vert pourrait avoir un contraste adequat pour la vision normale mais apparaitre presque identique pour quelqu'un avec une deuteranopie. Vérifiéz toujours votre design pour tous les types de vision simules et utilisez des indices supplémentaires comme des icones, des motifs ou des étiquettes textuelles.

Exemples Pratiques

Une startup qui redesigne son site marketing testé ses couleurs de marque (#2563EB texte bleu sur fond gris clair #F8FAFC) et trouvé un ratio de 5,2:1, satisfaisant AA mais pas AAA. Ils foncent le bleu a #1D4ED8, atteignant 7,1:1 et satisfaisant les deux normes sans modifier significativement leur identite de marque. Un développeur d'application de santé vérifié le style de ses messages d'erreur (texte rouge sur blanc) et decouvre que #EF4444 sur #FFFFFF n'atteint que 3,9:1, echouant même au AA pour le texte normal. La simulation de daltonisme revele qu'il apparait aussi pale pour les utilisateurs protanopes. Ils passent a #DC2626 et ajoutent une icone d'avertissement. Un designer UI valide que toutes les étiquettes de boutons, bordures de formulaires et indicateurs de focus dans une bibliotheque de composants respectent au moins l'exigence de 3:1 pour les éléments non textuels, tout en s'assurant que le texte courant atteint le seuil AA complet de 4,5:1.

Conseils Pratiques pour un Design Accessible

Commencez par choisir des paires de couleurs a fort contraste, puis construisez votre palette autour d'elles. Visez au moins 7:1 de contraste pour le texte courant même quand seul le AA (4,5:1) est requis, car cela offre une marge de sécurité confortable. Ne vous fiez jamais uniquement à la couleur pour transmettre des informations. Utilisez des icones, des soulignements ou des étiquettes textuelles comme indicateurs secondaires afin de ne pas exclure les utilisateurs daltoniens. Testez vos designs en mode niveaux de gris pour reperer rapidement les problèmes de contraste. Si des éléments disparaissent ou se confondent sans couleur, le contraste est insuffisant. Vérifiéz toujours le mode clair et le mode sombre. Les thèmes sombres ont souvent un contraste effectif plus faible, surtout avec du texte colore sur fond sombre. Vérifiéz les états de survol et de focus séparément, car ces états interactifs utilisent parfois des couleurs plus claires qui ne respectent pas les exigences. Installez des extensions de navigateur d'accessibilite comme axe DevTools ou WAVE pour auditer des pages entières, et combinez la vérification du contraste avec la simulation de daltonisme pour une couverture complété.

Sources

Tous les calculs sont effectués localement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

Cet outil vous a-t-il été utile ?
Souhaitez-vous nous en dire plus ?
0/500
Souhaitez-vous un suivi ?
Merci pour votre retour !

Questions fréquentes
Qu'est-ce que le ratio de contraste WCAG?
Le ratio de contraste WCAG mesure la différence de luminance entre deux couleurs sur une échelle de 1:1 (pas de contraste) a 21:1 (contraste maximum). Les WCAG 2.2 exigent des ratios minimums pour assurer la lisibilite du texte.
Quelles sont les exigences WCAG AA et AAA?
WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18pt+ ou 14pt gras). WCAG AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. AA est la norme pour la plupart des sites web.
Qu'est-ce qui est considere comme grand texte?
Le grand texte est défini comme 18 points (24px) ou plus pour le poids normal, ou 14 points (18,66px) ou plus pour le texte gras. Le grand texte a des exigences de contraste plus basses.
Comment le ratio de contraste est-il calculé?
Le ratio de contraste est calculé en utilisant la luminance relative de deux couleurs, tel que défini dans le Critere de Succès 1.4.3 de WCAG 2.2. La formule est (L1 + 0,05) / (L2 + 0,05), ou L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncee. La luminance relative tient compte de la façon dont l'oeil humain percoit la luminosite différemment dans le spectre des couleurs — le vert apparait beaucoup plus lumineux que le bleu à la même intensité physique. Le ratio resultant va de 1:1 (couleurs identiques, pas de contraste) a 21:1 (noir sur blanc, contraste maximum). WCAG AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.
Quelles sont les combinaisons de couleurs courantes qui echouent au WCAG?
Les echecs les plus courants impliquent des couleurs claires sur des fonds blancs ou des combinaisons a faible contraste similaires. Le texte rouge sur fond vert (et vice versa) echoue souvent car les valeurs de luminance sont similaires malgre une apparence 'différente' en teinte. Le texte gris clair sur blanc (#999 sur #fff = 2,85:1, echoue AA) est extremement courant sur les sites web. Le texte jaune sur blanc est presque toujours invisible (echoue gravement). Orange sur blanc est limite. Le texte de remplissage en gris clair (#aaa sur #fff = 2,32:1) echoue au WCAG et constitue un problème d'accessibilite repandu. En cas de doute, vérifiéz chaque combinaison texte-fond, y compris les états de survol et les indicateurs de focus.
Le mode sombre nécessite-t-il des ratios de contraste différents?
Non — les memes exigences de ratio de contraste WCAG (4,5:1 pour le texte normal AA, 3:1 pour le grand texte AA) s'appliquent que le design utilise le mode clair ou sombre. Cependant, le mode sombre introduit des defis uniques. Le texte blanc sur noir pur (#fff sur #000 = 21:1) cause en realite un inconfort visuel pour de nombreux utilisateurs en raison de la halation — le texte lumineux semble deborder sur le fond sombre, surtout pour les personnes astigmates. La meilleure pratique pour le mode sombre est d'utiliser du texte blanc casse sur un fond gris foncé (ex., #e0e0e0 sur #1a1a1a = 13,28:1), qui depasse le WCAG AAA tout en restant confortable a lire.
Comment le sRGB affecte-t-il le calcul du ratio de contraste WCAG?
WCAG 2.2 définit la luminance relative en utilisant le standard d'espace colorimétrique sRGB (IEC 61966-2-1). sRGB est l'espace colorimétrique par défaut du web et de la plupart des écrans grand public. Avant de calculer la luminance, chaque canal de couleur (R, G, B) doit être linéarisé avec la fonction de transfert sRGB — une correction gamma qui convertit les valeurs non linéaires de l'écran en intensité lumineuse linéaire. Concrètement, les valeurs de canal normalisées (0–1) inférieures ou égales à 0,04045 sont divisées par 12,92, tandis que les valeurs supérieures utilisent la formule ((valeur + 0,055) / 1,055) élevée à la puissance 2,4. Cette linéarisation est essentielle car la luminosité de l'écran n'est pas proportionnelle à la valeur de couleur stockée. Sans linéarisation sRGB, les ratios de contraste seraient inexacts, particulièrement pour les couleurs de gamme moyenne où la courbe gamma a le plus grand effet.
Quelle est la différence entre le contraste APCA et WCAG?
WCAG 2.2 utilise une formule simple de ratio de luminance qui traite tout le texte de la même manière, quel que soit la taille, le poids ou si le texte est foncé sur clair ou clair sur foncé. La formule produit un ratio de 1:1 à 21:1 avec des seuils fixes. APCA (Accessible Perceptual Contrast Algorithm), proposé pour WCAG 3.0, est un modèle plus avancé. Il tient compte de la différence perceptuelle entre le texte foncé sur fond clair et le texte clair sur fond foncé (sensibilité de polarité). Il produit une valeur de Contraste de Luminosité (Lc) qui prédit mieux la lisibilité réelle. APCA fournit également des recommandations par taille de police : pour une valeur Lc donnée, il recommande des tailles minimales selon les graisses de police. Les deux standards sont disponibles dans cet outil pour comparaison.
Puis-je utiliser ceci comme calculateur de ratio de contraste pour des designs non web?
Oui. La formule du ratio de contraste utilise des valeurs universelles de luminance sRGB applicables à tout support où les couleurs sont affichées sur un écran — applications mobiles, logiciels de bureau, signalétique numérique, bornes et présentations. Le calcul mesure la différence objective de luminance entre deux couleurs, une propriété physique indépendante du support. Les seuils WCAG AA et AAA (4,5:1 et 7:1) ont été développés pour le contenu web, mais le ratio de contraste sous-jacent est tout aussi utile pour évaluer la lisibilité dans tout contexte numérique. Les guidelines d'Apple et Google Material Design font référence à la même échelle. Pour le design imprimé, la même formule fournit une approximation utile, bien que les couleurs imprimées dépendent de l'encre, du papier et des conditions d'éclairage.
Comment utiliser ce vérificateur de contraste de couleur?
Entrez votre couleur de texte (premier plan) et couleur d'arrière-plan avec les sélecteurs de couleur, ou tapez les codes HEX directement. Vous pouvez aussi passer en entrée RGB ou HSL via les onglets de format, ou utiliser la pipette pour sélectionner des couleurs directement depuis votre écran. L'outil affiche instantanément votre ratio de contraste WCAG 2.2 et score APCA, avec des badges réussi/échoué pour chaque niveau. La zone d'aperçu en direct montre comment votre texte apparaît réellement à différentes tailles et graisses. Si vos couleurs échouent, l'outil suggère les alternatives les plus proches qui passent pour les niveaux AA et AAA. Vous pouvez aussi vérifier comment votre combinaison de couleurs apparaît aux personnes ayant différents types de vision des couleurs. Utilisez le bouton de partage pour copier un lien avec vos paramètrès de couleur actuels.
Mes données de couleur sont-elles privées avec cet outil?
Oui, entièrement. Tous les calculs de contraste s'exécutent dans votre navigateur en JavaScript. Aucune donnée de couleur, résultat ou paramètre n'est envoyé à un serveur. L'outil fonctionne hors ligne une fois chargé, et vos choix de couleurs ne sont jamais stockés, suivis ou partagés. Quand vous utilisez la fonction de lien de partage, vos couleurs sont encodées dans l'URL elle-même — elles ne sont téléchargées nulle part.