01 avr. 2020

Verifier le contraste des textes dans Chrome Devtools

3 | 592

Dans ses versions récentes (66 à la rédaction de cet article), Chrome permet de vérifier que nos textes disposent d’un contraste suffisant. En effet, dans le cadre du référentiel français d’accessibilité (RGAA), le contraste des textes avec leur arrière-plan se doit d’être a minima de 4,5.

Exemple d’un texte sur fond blanc

Pour tester, le cas le plus classique, nous utiliserons un texte rose sur fond blanc.

<body style="background-color: white">
  <p style="color: #ffc0cb">Hello world</p>
</body>

En inspectant notre <h1> via la console de Google Chrome puis en cliquant sur le petit carré représentant notre rose, une pop-in s’ouvre alors. Cette dernière nous permet de modifier la couleur de l’élément mais nous affiche aussi son contraste avec le blanc en arrière-plan (champ Contrast ratio). Une petite icône nous indique alors si le score est suffisant ou non.

En dépliant ce bloc, la console nous indique alors le score minimal nécessaire suivant le niveau d’accessibilité visé (de A à AAA) et si ce niveau est atteint.

Note : Chrome DevTools se base sur le référentiel américain d’accessibilté, nommé WCAG (pour Web Content Accessibility Guidelines). Toutefois, les règles de contraste sont équivalentes à celles du RGAA.

En dépliant ce bloc, une ligne apparaît aussi sur la palette de couleurs pour nous indiquer la zone où notre couleur devra se situer pour être accessible.

Pour terminer, si la couleur de fond n’a pas pu être déterminée par la console de Google Chrome, il est possible de choisir nous-même cette couleur via un colorpicker.

Tout vérifier soi-même ? LightHouse à la rescousse !

Vérifier le contraste de tous ces éléments HTML serait fastidieux. Toutefois, Chrome a prévu le coup et nous permet de l’automatiser via Lighthouse, son outil d’analyse de sites web.

Disponible dans l’onglet Audits, LightHouse permet d’analyser plusieurs facettes de notre site dont l’accessibilité. Et, d’ailleurs, une fois l’audit d’accessibilité réalisé, le compte-rendu nous indique bien que la balise <p> ne dispose pas d’un ratio suffisant.

Bonus : comment est calculé le contraste ?

Nous allons ici éclaircir le calcul derrière le contraste de 1.54 obtenu dans Google Chrome.

Tout d’abord, nous sommes en présence de deux couleurs :

le rose : #ffc0cb, soit rgb(255, 192, 203)
le blanc : #fffff soit rgb(255, 255, 255)

Première étape

On divise toutes les couleurs par 255. Nous obtenons donc :

pour le rose : R=255/255=1 || G=192/255=0.753 || B=203/255=0.796
pour le blanc : R=255/255=1 || G=255/255=1 || B=255/255=1

Deuxième étape

Le calcul dépend de la valeur de la première étape :

si la valeur est inférieure à 0.03928, on la divise par 12.92
sinon on applique la formule suivante : ((Val + 0.055)/1.055)2.4

On obtient ainsi :

pour le rose : R=1 || G=0.5272 || B=0.5971
pour le blanc : R=1 || G=1 || B=1

Troisième étape

A cette étape, nous obtenons la luminance relative de notre couleur en appliquant la formule : L = 0.2126 * R + 0.7152 * G + 0.0722 * B où R,G et B sont les valeurs déterminées à l’étape 2.

pour le rose : Lrose = 0.2126 _ 1 + 0.7152 _ 0.5272 + 0.0722 * 0.5971 = 0.6328
pour le blanc : Lblanc = 0.2126 _ 1 + 0.7152 _ 1 + 0.0722 * 1 = 1

Dernière étape !

Maintenant que nous avons, les deux luminances relatives, nous ajoutons 0.05 aux deux valeurs puis divisons la plus grande valeur par la plus petite.

Constraste = (1+0.05) / (0.6327+0.05) = 1.53801 = 1.54 (environ)

Nous retombons ainsi sur le même contraste que sur la console de Google Chrome (encore heureux !)