Ratio de contraste WCAG 2.1 avec verdict AA / AAA.
| Standard | Seuil | Résultat |
|---|---|---|
| AA — texte normal | 4.5 : 1 | |
| AA — grand texte | 3 : 1 | |
| AAA — texte normal | 7 : 1 | |
| AAA — grand texte | 4.5 : 1 | |
| Composants et graphismes de l'interface utilisateur | 3 : 1 |
Un texte que vous ne pouvez pas lire sur son arrière-plan n'est, à des fins pratiques, pas un texte. Environ un homme sur douze et une femme sur deux cents ont une forme de déficience de la vision des couleurs ; une personne sur quatre de plus de cinquante ans a une sensibilité au contraste réduite due à des cataractes ou à d'autres changements liés à l'âge ; et les utilisateurs extérieurs sur des écrans mobiles brillants combattent les reflets qui masquent tout ce qui est inférieur à un contraste de 4:1. Les Web Content Accessibility Guidelines ont codifié cela en un seul chiffre – le rapport de contraste entre le premier plan et l'arrière-plan – et quatre seuils de réussite/échec : 4,5:1 pour le texte de taille normale au niveau AA, 3:1 pour le grand texte au niveau AA, 7:1 pour le texte normal au niveau AAA, et 4,5:1 pour le grand texte au niveau AAA. Les composants de l'interface utilisateur et les graphiques nécessitent un rapport de 3:1 par rapport à leurs couleurs adjacentes. Ces chiffres ne sont pas des préférences. La conformité AA est requise par l'European Accessibility Act pour tout service numérique vendu dans l'UE à compter de juin 2025, et par la Section 508 aux États-Unis pour les marchés publics fédéraux ; le niveau AAA est la norme recommandée pour les informations du secteur public et gouvernemental. Ce calculateur sélectionne deux couleurs, calcule le rapport WCAG et affiche un badge réussite/échec par rapport à chacun des cinq seuils.
Le rapport de contraste WCAG est calculé à partir de la luminance relative L de chaque couleur – une transformation motivée perceptuellement des valeurs sRGB qui approxime la quantité de lumière atteignant l'œil. Pour chaque canal R, G, B normalisé à 0–1, la valeur linéaire est R_lin = R/12,92 si R ≤ 0,03928, sinon ((R + 0,055)/1,055)^2,4 (et de même pour G et B). La luminance relative L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin reflète le fait que l'œil humain est beaucoup plus sensible au vert qu'au rouge, et beaucoup plus au rouge qu'au bleu. Le rapport de contraste est alors (L_plusclair + 0,05) / (L_plusfoncé + 0,05) – le décalage +0,05 évite la division par zéro sur le noir pur et compresse légèrement l'extrémité supérieure de l'échelle. Le résultat varie de 1:1 (couleurs identiques) à 21:1 (noir pur sur blanc pur). Notez que la formule est symétrique : le rapport du premier plan sur l'arrière-plan est le même que celui de l'arrière-plan sur le premier plan, seule la direction clair-sur-foncé est fixée par l'ordre de la division.
Choisissez une couleur de premier plan et une couleur d'arrière-plan à l'aide des deux sélecteurs de couleur. Les valeurs par défaut – un bleu marine profond sur un crème chaleureux – sont les couleurs de marque de ce site, incluses comme exemple concret que vous pouvez modifier. Le panneau de résultats affiche le rapport de contraste comme indicateur clé de performance (KPI), un tableau de cinq lignes réussite/échec pour chaque seuil WCAG, et un aperçu de texte en direct qui utilise les deux couleurs réelles afin que vous puissiez vérifier visuellement si le résultat du calcul correspond à votre intuition. Le « grand texte » selon WCAG signifie 18 pt normal ou 14 pt gras (≈ 24 px / 19 px en CSS) ; tout ce qui est plus petit est du « texte normal » et doit atteindre le seuil de 4,5:1. « Composants UI et graphiques » s'applique aux icônes, aux anneaux de mise au point, aux bordures des champs de formulaire et à d'autres éléments non textuels qui transportent des informations.
Les valeurs par défaut #1e3a5f (un bleu marine profond) sur #fdf6ec (un crème chaleureux) : R_lin pour le bleu marine est 0,0166, G_lin 0,0464, B_lin 0,1170 ; luminance relative ≈ 0,0490. Pour le crème : R_lin 0,9580, G_lin 0,9047, B_lin 0,7758 ; luminance relative ≈ 0,9111. Rapport = (0,9111 + 0,05) / (0,0490 + 0,05) = 0,9611 / 0,0990 ≈ 9,71:1 – passe AA normal (4,5:1), AA grand (3), AAA normal (7), AAA grand (4,5), et composants UI (3). Comparez à une paire à faible contraste courante : #aaaaaa sur #ffffff. Le gris a une luminance L ≈ 0,402 et le blanc L = 1, donnant (1 + 0,05) / (0,402 + 0,05) ≈ 2,32:1 – échoue à tous les seuils, y compris le minimum de 3:1 pour le grand texte. Un léger changement vers #767676 sur blanc donne ≈ 4,54:1, passant tout juste AA normal – c'est le minimum requis par WCAG pour les étiquettes de formulaire en ligne et le texte d'aide.
Premièrement, évaluer le contraste à l'œil nu. Des codes hexadécimaux qui semblent « clairement différents » peuvent échouer lamentablement – gris clair sur blanc, surtout dans les systèmes de conception plate. Une différence de luminosité de 3 % entre un bouton et son arrière-plan est invisible sur la plupart des écrans. Deuxièmement, optimiser le contraste par rapport au blanc pur alors que votre arrière-plan réel a une teinte ou un dégradé subtil. L'arrière-plan pertinent est ce qui se trouve derrière le texte réel sur la page, pas la couleur du corps dans vos variables CSS. Troisièmement, appliquer le contraste uniquement au texte et non aux contrôles UI. Les bordures des champs de saisie, les anneaux de focus, les états d'erreur, les boutons uniquement icônographiques, les indicateurs de statut – tous ceux-ci nécessitent au moins 3:1 par rapport à leur environnement selon WCAG 2.1 SC 1.4.11. Quatrièmement, utiliser des superpositions semi-transparentes. Le contraste réel dépend de la couleur composée, qui est le mélange alpha de la superposition sur ce qui se trouve en dessous ; vous ne pouvez pas lire le contraste directement à partir des valeurs RGBA de la superposition. Cinquièmement, considérer le niveau AAA comme excessif. Le niveau AAA est disproportionnellement important pour les utilisateurs âgés, l'utilisation mobile en extérieur et les utilisateurs malvoyants qui ne sont pas officiellement enregistrés comme malvoyants ; viser le niveau AAA pour le corps du texte est un bon défaut pour tout produit destiné aux consommateurs.
WCAG 2.1 est la norme légale actuelle, mais le projet de travail WCAG 3 évolue vers une métrique différente : APCA (Advanced Perceptual Contrast Algorithm), qui modélise le contraste plus précisément dans le régime du mode sombre où WCAG 2.1 sous-estime la difficulté du texte gris foncé sur fond noir. L'APCA utilise une échelle de type pourcentage où une valeur Lc de 75 correspond approximativement à AA-normal, et prend en compte le poids et la taille de la police dans le seuil (un texte petit et léger nécessite un Lc plus élevé qu'un texte grand et gras). Jusqu'à ce que WCAG 3 soit finalisé, les rapports WCAG 2.1 sont la cible légalement exécutoire. Au-delà de la couleur, le contraste pour les utilisateurs malvoyants dépend également du choix de la police (éviter les graisses fines à petite taille), de l'espacement des lettres, de l'interlignage et de la distance par rapport aux images d'arrière-plan. Les outils qui complètent ce calculateur incluent des simulateurs de daltonisme (Coblis, Stark, Sim Daltonism), des filtres pour malvoyants dans les outils de développement des navigateurs, et des vérifications de contraste en mode sombre, car une seule paire de couleurs inversera presque certainement son rapport lorsque l'arrière-plan de la page passe de clair à sombre.