Ratio de contraste des couleurs et WCAG expliqués

Les chiffres à retenir

Les Règles pour l'accessibilité des contenus web (WCAG 2.1 et 2.2 appliquent les mêmes règles de contraste) définissent trois critères de succès pour le contraste. La plupart des lois et des règles de marchés publics renvoient au niveau AA : c'est donc la cible pratique pour les sites et les applications. En France, le RGAA reprend ces mêmes seuils.

Pour tester une paire, saisissez la couleur du texte dans l'outil ci-dessous (toute couleur CSS fonctionne : code hexadécimal, rgb(), hsl() ou nom de couleur), indiquez la couleur de fond et lisez le résultat de chaque ligne. Inverser échange les deux couleurs, ce qui est pratique pour le mode sombre.

Comment se calcule le ratio de contraste

Le ratio compare la luminance relative, c'est-à-dire la clarté apparente d'une couleur sur un écran sRGB standard, de 0 pour le noir à 1 pour le blanc. Chaque canal rouge, vert et bleu est d'abord converti de l'échelle 0 à 255 vers 0 à 1, puis linéarisé (les valeurs sont élevées à peu près à la puissance 2,4, car les valeurs d'écran sont encodées en gamma). Ensuite, les canaux sont pondérés : la luminance vaut 0,2126 fois le rouge plus 0,7152 fois le vert plus 0,0722 fois le bleu.

Ces coefficients expliquent bien des surprises. Le vert compte le plus dans la clarté perçue et le bleu très peu : un texte bleu pur sur fond noir échoue nettement, tandis que du jaune sur blanc est presque invisible (environ 1,07:1). Le ratio lui-même vaut (luminance la plus claire plus 0,05) divisée par (luminance la plus sombre plus 0,05). Le 0,05 tient compte des reflets sur l'écran et évite à la formule de diviser par zéro.

La teinte n'apparaît nulle part dans la formule. Deux couleurs peuvent sembler nettement différentes, comme le rouge et le vert, et avoir pourtant presque la même luminance : c'est exactement la combinaison que les personnes atteintes de daltonisme rouge-vert ne distinguent pas.

Paires de couleurs réelles et leurs ratios

C'est sur le texte gris que la plupart des maquettes échouent. Le seuil se situe autour de #767676 sur blanc : un cran plus clair, et le texte normal ne passe plus le niveau AA.

Quel ratio pour quel élément

• Corps de texte, libellés de formulaire, texte des liens, texte indicatif (placeholder) qui porte une information, messages d'erreur : 4,5:1.
• Titres et autres textes de 24 px et plus, ou texte en gras d'environ 19 px et plus (18,66 px, soit 14 pt) : 3:1.
• Texte sur une image ou un dégradé : vérifiez l'endroit le plus défavorable derrière les lettres, pas la moyenne. Ajoutez un voile plein ou semi-transparent si besoin.
• Bordures de champs, contours de cases à cocher, états des interrupteurs, icônes sans texte, indicateurs de focus et lignes de graphiques : 3:1 par rapport à la couleur adjacente (critère 1.4.11, Contraste du contenu non textuel).
• Les boutons désactivés, les commandes inactives, les logos et la pure décoration sont exemptés. Exempté ne veut pas dire invisible : l'utilisateur doit quand même voir qu'un bouton désactivé existe.
• Les liens dans un texte, distingués uniquement par la couleur, doivent aussi avoir un contraste de 3:1 avec le texte qui les entoure, ou être soulignés.

Corriger des couleurs insuffisantes

Changer la teinte aide rarement ; changer la clarté, si. Gardez la teinte de la marque et assombrissez le texte (sur fond clair) ou éclaircissez-le (sur fond sombre) jusqu'à ce qu'il passe. La ligne Nuances sous le vérificateur affiche neuf versions plus claires et plus sombres de votre couleur, construites en OKLCH pour que les écarts paraissent réguliers ; choisissez la première qui passe et collez-la dans votre maquette.

Si la couleur de la marque doit rester exactement telle quelle, utilisez-la pour les grands titres, les bordures ou le fond de boutons avec un texte blanc ou noir, et prenez une variante plus sombre pour le petit texte. Beaucoup de design systems gardent pour cette raison deux versions de chaque couleur de marque : une pour les aplats et une pour le texte.

Un texte semi-transparent, par exemple du blanc à 60 % d'opacité, est d'abord mélangé au fond. Le vérificateur fait ce mélange, si bien que le ratio affiché correspond à ce que les gens voient réellement. Une surprise fréquente : un texte gris à opacité réduite sur une carte grise échoue alors que les deux couleurs passent chacune sur fond blanc.

Mode sombre, APCA et cadre légal

Les thèmes sombres demandent leur propre vérification. Le blanc pur sur noir pur (21:1) est techniquement parfait mais peut provoquer un effet de halo chez certains lecteurs ; un texte blanc cassé comme #E6E6E6 sur un fond gris foncé est souvent plus confortable et passe toujours le niveau AAA. Ne supposez pas qu'une palette valable en mode clair passe en mode sombre : les couleurs d'accent atténuées tombent souvent sous 3:1 sur les surfaces sombres.

Vous entendrez peut-être parler d'APCA, un nouveau modèle de contraste proposé pour de futures WCAG 3. Il tient compte de la graisse de la police et de la polarité, mais il reste à l'état de brouillon. Aujourd'hui, la conformité se mesure avec le ratio WCAG 2, et c'est ce que calcule ce vérificateur.

Le niveau AA des WCAG 2.1 est la référence de lois et de normes d'accessibilité dans de nombreux pays, dont la norme européenne EN 301 549 utilisée pour l'Acte européen sur l'accessibilité (European Accessibility Act) et les règles du secteur public, ainsi que le RGAA en France ; aux États-Unis, il sert couramment de référence dans les affaires liées à l'ADA. Si vous vendez en ligne au grand public, le contraste est l'une des exigences les plus faciles à respecter et l'un des défauts les plus souvent signalés par les audits automatiques.