Le premier bug d'accessibilité que j'ai jamais expédié était un horodatage gris clair sur une carte blanche. Il avait l'air élégant dans Figma, il avait l'air bien sur mon moniteur calibré et il était complètement invisible pour un client lisant un e-mail sur son téléphone dans une voiture garée. Il n'était pas malvoyant. C'était juste la lumière du soleil. Ce billet de support unique m'a appris quelque chose que la maquette de conception n'a jamais pu : le contraste n'est pas une question de goût, c'est une propriété mesurable, et si vous ne le mesurez pas, vous expédiez des devinettes.
Depuis, j'ai construit le Vérificateur de contraste de couleurs Sur Toolz.dev, les règles de contraste câblées dans les jetons de conception pour WP Adminify et ont audité plus de composants React que je ne veux compter. Ce guide est la version de cette expérience que j'aurais aimé que quelqu'un m'ait offert au début. Il explique ce qu'est réellement le rapport de contraste, comment le nombre est calculé, ce que signifient les seuils WCAG et comment corriger une paire de couleurs défaillante sans jeter votre palette de marque.
tl;dr : Le contraste WCAG est un rapport de 1:1 à 21:1 basé sur la luminance relative de deux couleurs. Pour le corps du texte normal, vous avez besoin d'au moins 4,5:1 pour passer AA et 7:1 pour passer AAA. Le texte volumineux (environ 24 px, ou 18 66 px) tombe à 3 : 1 pour AA et 4,5 : 1 pour AAA. non -L'interface utilisateur de texte comme les icônes et les bordures d'entrée ont besoin de 3:1. Mesurez chaque paire de textes sur le fond, traitez AA comme la barre de passe et laissez l'outil suggérer une couleur de passage lorsque vous manquez.
Pourquoi le contraste des couleurs est-il si important ?
Le contraste est le seul échec d'accessibilité le plus courant sur le Web. Année après année, les audits automatisés du premier million de pages d'accueil constatent que le texte à faible contraste est la violation WCAG la plus fréquente avec une large marge. C'est aussi celui qui touche le plus de personnes, car cela ne concerne pas seulement les utilisateurs enregistrés à l'aveugle. Cela concerne toute personne ayant une vision réduite depuis l'âge, toute personne ayant une condition courante comme les cataractes, toute personne utilisant un écran bon marché, toute personne dans une pièce lumineuse et chacun d'entre nous lorsque le soleil frappe l'écran.
Il y a aussi un angle commercial, et je ne vais pas prétendre autrement. La loi sur l'accessibilité fait désormais référence à la WCAG directement dans de nombreuses régions, ce qui signifie qu'une interface inaccessible est une exposition juridique, et pas seulement un problème de courtoisie. Mais la raison pour laquelle je m'en soucie et la raison pour laquelle j'ai construit un outil dédié pour cela est plus simple. Le texte que les gens ne peuvent pas lire est un texte qui a échoué à son seul travail. Une interface magnifique que personne ne peut utiliser n'est pas une réalisation de conception.
Le piège est que nos yeux sont des narrateurs peu fiables. Nous nous adaptons à nos propres écrans, nous savons ce que le texte est censé dire, donc notre cerveau le remplit et nous examinons les conceptions dans des conditions idéales. Le rapport de contraste supprime tout cela. Il vous donne un chiffre qui ne se soucie pas de votre moniteur ou de vos attentes.
Qu'est-ce qu'un rapport de contraste ?
Le rapport de contraste est une comparaison de la luminance relative de deux couleurs : votre premier plan (généralement du texte) et votre arrière-plan. La luminance relative est une mesure de la quantité de lumière émise ou réfléchie par une couleur, pondérée pour la façon dont l'œil humain perçoit réellement le rouge, le vert et le bleu. Le vert contribue le plus à la luminosité perçue, le moins bleu, c'est pourquoi le texte bleu pur sur le noir est tellement plus difficile à lire que le vert pur.
Le ratio lui-même est défini par WCAG comme suit :
(L1 + 0.05) / (L2 + 0.05)
alors que L1 est la luminance relative de la couleur plus claire et L2 est celui du plus sombre. le 0.05 Les termes modélisent la lumière ambiante qui se reflète sur l'écran, c'est pourquoi la balance n'atteint jamais tout à fait l'infini. Les couleurs identiques produisent un rapport d'exactement 1:1. Le texte noir pur sur blanc pur donne le maximum de 21:1. Tout ce qui est réel entre ces deux extrêmes.
La chose importante à intérioriser est que le rapport n'est pas linéaire avec la façon dont "différent" deux couleurs sont au sens de la teinte. Deux couleurs peuvent être très différentes dans leur teinte - disons un rouge saturé et un vert saturé - et ont toujours presque la même luminance, ce qui en fait un cauchemar pour la lisibilité même s'ils s'affrontent violemment. Le contraste est une différence de légèreté, pas de différence de couleur. C'est pourquoi vous ne pouvez pas le regarder, et pourquoi le Vérificateur de contraste de couleurs Convertit les deux couleurs en luminance avant de faire une comparaison.
Comment le nombre est-il réellement calculé ?
Si vous voulez comprendre l'outil plutôt que de simplement lui faire confiance, voici le pipeline complet, qui suit exactement les définitions WCAG 2.2.
Premièrement, chaque canal de couleur est normalisé de la plage 0 à 255 à 0 à 1. Ensuite, chaque canal est linéarisé pour annuler la courbe gamma sRGB. La formule applique un petit segment linéaire pour les valeurs très sombres et une courbe de puissance pour le reste :
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
Ensuite, les trois canaux linéarisés sont combinés avec les coefficients de luminance qui reflètent la perception humaine :
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Ces poids ne sont pas arbitraires. Ils viennent de la façon dont les cellules coniques de l'œil réagissent à différentes longueurs d'onde, et c'est pourquoi le vert domine. Enfin, les deux valeurs de luminance sont branchées sur la formule de rapport ci-dessus, avec la plus légère sur le dessus.
Il y a une subtilité qui fait trébucher les gens, et c'est la transparence. Un rapport de contraste n'a de sens qu'entre deux couleurs opaques, car l'apparence réelle d'une couleur semi-transparente dépend de tout ce qui se trouve derrière. Si la couleur de votre texte a une valeur alpha, vous ne pouvez pas la mesurer directement. L'approche correcte, et celle que l'outil prend, consiste à compositer le premier plan translucide sur le fond d'abord en utilisant un mélange source-over standard, puis mesurer le rapport par rapport au résultat aplati. Cela correspond à ce qu'un utilisateur voit plutôt que la couleur que vous avez définie nominalement.
Quels sont les seuils WCAG que je dois atteindre ?
Le WCAG définit les exigences de contraste à deux niveaux de conformité et pour trois grands types de contenu. Voici l'ensemble du tableau au même endroit.
| Type de contenu | AA minimum | AAA minimum |
|---|---|---|
| Texte normal (moins de 24 px) | 4.5:1 | 7:1 |
| Grand texte (~24px, ou ~18,66px en gras) | 3:1 | 4.5:1 |
| Composants et graphiques de l'interface utilisateur | 3:1 | 3:1 (pas de AAA séparé) |
| Logotypes et textes accessoires | exempter | exempter |
Quelques notes d'avoir appliqué ce tableau à plusieurs reprises. "Grand texte" est défini par la taille du rendu, et non par l'importance du texte. Le seuil est de 18 pt pour un poids régulier et de 14 pts, ce qui se traduit par environ 24 px et 18 66 mètres. Tout ce qui est au-dessus ou au-dessus permet d'obtenir la barre 3:1 détendue pour AA, car les formes de lettres plus grandes restent lisibles à un contraste inférieur.
La règle des composants UI est le critère de réussite 1.4.11, et c'est le seul que les équipes oublient le plus souvent. Il indique que la limite visuelle d'un composant interactif - la bordure d'une entrée de texte, le contour d'un bouton, la forme d'une icône qui transmet le sens - a besoin de 3:1 par rapport à son environnement. Une forme pleine de texte d'étiquette passif à AA avec des bordures d'entrée invisibles échoue toujours, et j'ai vu cela exactement en production plus d'une fois.
Enfin, le texte décoratif, les commandes désactivées et les logos sont exemptés. Cette exemption est étroite. Une étiquette de bouton grisée est très bien; un paragraphe à faible contraste que vous avez appelé "secondaire" n'est pas.
Comment utiliser le vérificateur de contraste de couleurs ?
Le flux de travail que j'utilise quotidiennement prend environ dix secondes par paire. Ouvrez le Vérificateur de contraste de couleurs et entrez la couleur de votre texte dans le premier champ. Vous pouvez coller n'importe quel format, un hexagone à six chiffres comme #4b5563, un hexagone à huit chiffres avec alpha, un rgb() ou rgba() chaîne, un hsl() valeur, ou un mot-clé CSS simple comme navy. L'outil normalise tout ce que vous lui donnez, afin que vous puissiez mélanger librement les formats entre les deux champs.
Entrez votre couleur d'arrière-plan dans le deuxième champ. Le moment est valide, le rapport exact apparaît à côté d'un échantillon en direct de texte volumineux, normal et de légendes rendu sur votre arrière-plan réel. Cet aperçu compte. Le nombre vous indique s'il passe, mais voir de vrais mots sur la vraie couleur vous indique s'il est confortable, ce qui est une barre plus haute que simplement légale.
En dessous du rapport, vous obtenez une grille de badges pass et fail : AA et AAA pour le texte normal et grand, plus la vérification des composants UI 3:1. Si une combinaison échoue, l'outil propose une solution en un clic. Il parcourt la couleur de votre texte plus claire ou plus sombre dans l'espace HSL - en préservant la teinte et la saturation que vous avez choisies - jusqu'à ce qu'il efface le rapport cible, puis vous donne une valeur de passage que vous pouvez copier directement dans votre feuille de style. Cette dernière partie est la différence entre un damier qui vous gronde et celui qui vous aide réellement : il garde votre teinte de marque intacte et ne déplace la légèreté que par le minimum nécessaire.
Tout fonctionne localement dans votre navigateur. Aucune couleur, palette ou valeur de marque inédite ne quitte votre appareil, ce qui compte lorsque vous auditez le système de conception de pré-lancement d'un client. C'est la même approche de confidentialité que j'utilise sur tous les outils du site, et j'ai écrit sur les raisons pour lesquelles cette architecture est importante dans le Guide de confidentialité des données.
Cas d'utilisation courants de projets réels
Auditer les jetons d'un système de conception
Lorsque je configure des jetons de couleur pour un nouveau projet, je vérifie chaque appariement sémantique avant qu'un seul composant n'envoie : texte principal en arrière-plan, texte en sourdine sur fond, texte sur la carte principale, texte sur chaque variante d'alerte. Un jeton qui échoue une fois échoue partout où il est utilisé, donc le capturer au niveau du jeton est énormément moins cher que de l'attraper par composant. Je garde une simple liste de contrôle et je passe chaque paire à travers le vérificateur, en enregistrant le rapport à côté du nom du jeton.
Sauvetage d'une couleur de marque qui doit "être utilisé"
Le marketing vous remet un bleu de marque et dit que les boutons doivent l'utiliser. Vous testez du texte blanc dessus et obtenez 3,1:1 - bien pour le texte volumineux, échouant pour une étiquette de bouton de taille normale. Vous avez trois options honnêtes : assombrir légèrement la marque en bleu pour les surfaces interactives, utiliser une étiquette plus grande ou plus grasse afin que le seuil 3:1 s'applique ou basculer l'étiquette vers une couleur plus foncée si le bouton est clair. La fonction de suggestion de l'outil trouve la teinte de passage la plus proche afin que vous puissiez montrer la commercialisation d'un changement concret et minimal plutôt qu'un "non".
Vérification du texte de l'espace réservé et du texte d'aide
Le texte d'espace réservé est un récidiviste, car les navigateurs le rendent à une opacité réduite par défaut, et les concepteurs choisissent ensuite un gris déjà clair en plus. N'oubliez pas de tester le résultat composite, pas la couleur nominale. Le Compositing Alpha du Checker fait ceci pour vous : entrez la couleur de l'espace réservé avec son opacité réelle sur le fond d'entrée et lisez le vrai rapport.
Vérification de la visibilité de l'icône et de la
Pour la vérification de l'interface utilisateur 1.4.11, je teste l'icône ou la couleur de la bordure par rapport à tout ce qui se trouve immédiatement derrière. Un séparateur gris sur une carte blanche, un chevron sur un en-tête coloré, l'anneau de mise au point contre le terrain - tout cela nécessite 3:1. C'est une vérification rapide qui attrape le "tout est techniquement là-bas, mais je ne vois rien de tout cela" de classe de bogue.
Comment cela se compare-t-il à l'utilisation d'un outil de conception intégré ?
Les outils de conception ont ajouté des indicateurs de contraste, et les outils de développement du navigateur affichent un rapport dans le sélecteur de couleurs, donc une question juste est de savoir pourquoi trouver un outil dédié. Voici ma comparaison honnête.
| s'approche | arrogance | limitation |
|---|---|---|
| Vérificateur de contrastes dédié | Rapport exact, tous les seuils, composition alpha, suggestions de couleurs de passage, fonctionne sur n'importe quelle chaîne de couleur | Vous collez les couleurs manuellement |
| Plugin d'outil de conception | En ligne avec votre plan de travail | se rapproche souvent, peut ignorer l'alpha, lié à cette application |
| Outils de développement du navigateur | Vérifie la page rendue en direct | Une paire à la fois, aucune suggestion, nécessite que la page existe en premier |
| le regarder | harde | Faux, constamment |
L'outil dédié gagne chaque fois que vous travaillez à partir de valeurs plutôt qu'une page rendue - en examinant les jetons, en vérifiant une spécification ou en corrigeant un bogue signalé - et chaque fois que vous avez besoin d'une alternative de passage plutôt que d'un verdict. Les outils de développement du navigateur sont meilleurs une fois que la page existe et vous souhaitez vérifier ce qui est réellement expédié. J'utilise les deux, à des étapes différentes.
Notes avancées pour les équipes qui s'occupent
Quelques choses que j'ai apprises qui vont au-delà des bases. Premièrement, le contraste est nécessaire mais pas suffisant. Le passage 4.5:1 supprime une barrière, il ne rend pas une interface accessible par elle-même. Vous avez toujours besoin d'états de mise au point visibles, vous devez toujours éviter de transmettre un sens uniquement à travers la couleur, et vous avez toujours besoin de véritables tests avec une véritable technologie d'assistance. Traitez le rapport comme un sol, pas comme une ligne d'arrivée.
Deuxièmement, le mode sombre n'est pas gratuit. Une palette qui passe en mode clair peut échouer en mode sombre car les relations de luminance s'inversent. Vérifiez les deux thèmes. La bascule d'aperçu en arrière-plan sombre du Checker existe précisément parce que j'oubliais de le faire.
Troisièmement, méfiez-vous de "assez proches". Un ratio de 4,48:1 est un échec, pas une victoire d'arrondi. Les écrans varient, les utilisateurs varient et le seuil a une marge intégrée pour une raison. Si vous êtes à la limite, dépassez-le.
Si vous assemblez une boîte à outils plus large, le Guide d'outils pour les développeurs Web Couvre la façon dont le contraste s'adapte aux autres contrôles qui méritent d'être automatisés. Et une fois vos couleurs passées, des outils comme le Générateur de gradient et cueillette de couleurs Vous aider à construire le reste de la palette sur une fondation que vous avez déjà vérifiée. Si vous générez également des métadonnées de page et des aperçus sociaux, le Générateur de balises Se marie bien dans le même pass avant le lancement.
FAQ
Qu'est-ce qu'un bon rapport de contraste de couleur ?
Pour le texte normal du corps, visez au moins 4,5:1 pour rencontrer le WCAG AA et 7:1 pour atteindre le niveau AAA plus strict. Un texte volumineux, ce qui signifie environ 24 px ou 18,66 px en gras, n'a besoin que de 3 : 1 pour les AA et de 4,5 : 1 pour AAA. Les icônes et les composants de l'interface utilisateur interactive ont besoin d'au moins 3:1 par rapport à leur environnement.
Qu'est-ce qui compte comme un grand texte sous WCAG ?
Le texte volumineux est d'au moins 18 pt, environ 24 px, pour un poids régulier, ou au moins 14 pt, soit environ 18,66 pixels, lorsqu'il est audacieux. Le texte à ou au-dessus de cette taille est admissible au seuil de 3:1 AA relâché, car les formes de lettres plus grandes restent lisibles à un contraste inférieur à celui des petits.
Quelle est la différence entre WCAG AA et AAA ?
AA est le niveau que la plupart des lois et organisations ciblent et nécessite 4,5: 1 pour le texte normal. AAA est le niveau amélioré et nécessite 7:1, ce qui convient aux contenus destinés aux utilisateurs ayant une faible vision, mais est difficile à atteindre sur une palette entière. La plupart des équipes traitent AA comme la barre de passe et l'AAA comme une aspiration à un contenu de lecture critique.
Comment le rapport de contraste est-il calculé ?
Chaque couleur est convertie en sa luminance relative WCAG, une mesure de luminosité corrigée par le gamma et pondérée perceptivement. Le rapport est (L_Lighter + 0,05) divisé par (L_Darker + 0,05), produisant une valeur de 1:1 pour des couleurs identiques à 21:1 pour le noir pur sur le blanc pur.
La transparence affecte-t-elle le résultat du contraste ?
Oui. Une couleur de texte semi-transparente laisse passer l'arrière-plan, ce qui change sa couleur effective. La méthode correcte consiste à compositer le premier plan translucide sur l'arrière-plan d'abord, puis à mesurer le rapport, de sorte que le score reflète ce qu'un utilisateur voit réellement plutôt que la couleur nominale que vous définissez.
Pourquoi mon texte passe-t-il en grande taille mais échoue-t-il à sa taille normale ?
Les seuils diffèrent. Le texte normal a besoin de 4,5:1 pour les AA, tandis que le texte volumineux n'a besoin que de 3:1, donc un rapport compris entre 3 et 4,5 passe pour les en-têtes mais échoue pour la copie corporelle. Augmentez le contraste pour le corps du texte ou assurez-vous que le jumelage n'est utilisé que dans les grandes tailles lorsque le seuil relâché s'applique.
Un rapport de contraste de passage est-il suffisant pour l'accessibilité ?
non Le contraste est nécessaire mais pas suffisant. Vous avez également besoin d'états de mise au point visibles, vous devez éviter de transmettre une signification uniquement par la couleur et vous devez tester avec un contenu réel et une technologie d'assistance. Le passage du rapport supprime une barrière commune mais ne rend pas en soi une interface accessible.
Le vérificateur de contraste de couleurs envoie-t-il mes couleurs n'importe où ?
non . L'analyse et les mathématiques sont exécutées localement dans votre navigateur à l'aide de JavaScript. Aucune valeur de couleur, de palettes de marques ou de captures d'écran ne sont téléchargées ou stockées, et l'outil continue de fonctionner sans connexion réseau une fois la page chargée.