Localisateur de paires de couleurs accessibles

WCAG (Web Content Accessibility Guidelines) définit les rapports de contraste minimum entre les couleurs du texte et de l’arrière-plan pour assurer la lisibilité des personnes ayant des déficiences visuelles. Le rapport de contraste varie de 1:1 (aucun contraste) à 21:1 (maximum, noir sur blanc). Le niveau AA exige 4.5:1 pour le texte normal et 3:1 pour le texte grand. Le niveau AAA exige 7:1 pour le texte normal. Le respect de ces normes garantit que votre site Web est accessible à environ 1 homme sur 12 et 1 femme sur 200 qui ont une déficience de la vision des couleurs, ainsi qu’aux personnes malvoyantes.

AA est le niveau d’accessibilité minimum recommandé et exige un rapport de contraste de 4.5:1 pour le texte de taille normale et de 3:1 pour le texte grand (18 points ou 14 points en gras et plus). AAA est le niveau le plus élevé, exigeant 7:1 pour le texte normal et 4.5:1 pour le texte grand. La plupart des organisations ciblent la conformité AA car elle offre une bonne accessibilité tout en permettant une flexibilité de conception raisonnable. AAA est idéal pour le contenu critique tel que le texte du corps sur les sites gouvernementaux ou de soins de santé. Le texte grand a des exigences plus faibles car les caractères plus grands sont intrinsèquement plus faciles à lire.

La luminance relative mesure la luminosité perçue d’une couleur sur une échelle de 0 (noir) à 1 (blanc). La formule WCAG convertit d’abord les valeurs sRGB (0-255) en RVB linéaire en divisant par 255 et en appliquant une correction gamma. Pour les valeurs 0.04045 ou moins, divisez par 12.92. Pour les valeurs plus élevées, ajoutez 0.055, divisez par 1.055 et élevez à la puissance 2.4. La luminance finale est de 0.2126 fois le rouge plus 0.7152 fois le vert plus 0.0722 fois le bleu. Ces poids reflètent la façon dont l’œil humain perçoit la luminosité, le vert contribuant le plus.

Oui. Entrez la couleur d’arrière-plan de votre marque et l’outil affiche toutes les couleurs de texte qui respectent les normes d’accessibilité. Ceci est particulièrement utile lors du développement ou de la refonte de marque lorsque vous devez vous assurer que votre palette de couleurs fonctionne pour la conception Web accessible. Vous pouvez également vérifier les paires de couleurs de marque existantes pour vérifier qu’elles respectent les exigences WCAG. La fonction d’exportation CSS vous permet de copier des paires accessibles directement dans vos feuilles de style, ce qui permet de gagner du temps de développement et d’assurer la conformité dès le départ.