floobits.com
floobits.com
🌐 Web et technique
Mesurez le rapport de contraste de deux couleurs et vérifiez les niveaux AA et AAA pour le texte normal, le grand texte et les composants.
Par Jimenez Julien, éditeur de Floobits.com · mis à jour le
Un texte n'est lisible que si sa couleur se détache assez de celle du fond. Les règles d'accessibilité WCAG, reprises par le RGAA en France, mesurent cet écart par un rapport de contraste compris entre 1 : 1 (aucune différence) et 21 : 1 (noir sur blanc). Il se calcule à partir de la luminance relative de chaque couleur, définie sur les canaux sRGB linéarisés avec les coefficients 0,2126, 0,7152 et 0,0722.
Le niveau AA exige 4,5 : 1 pour le texte normal et 3 : 1 pour le grand texte (24 px ou 18,5 px en gras) ainsi que pour les composants d'interface et les éléments graphiques utiles. Le niveau AAA monte à 7 : 1 pour le texte normal et 4,5 : 1 pour le grand texte. Quand un couple échoue, l'outil cherche la couleur de texte la plus proche, à teinte et saturation constantes, qui atteint le seuil, puis vous permet de l'appliquer en un clic.
C'est un texte d'au moins 24 px (18 points) en graisse normale, ou d'au moins 18,5 px (14 points) en gras. Le seuil de contraste AA y est abaissé à 3 : 1.
Non. Les logotypes, le texte purement décoratif et les éléments inactifs (boutons désactivés) sont exemptés du critère de contraste minimum.
Un rapport de 4,497 arrondi à 4,50 laisserait croire que le seuil est atteint alors qu'il ne l'est pas. La troncature évite ce faux positif.