Quels sont les objectifs ?
Faciliter la visibilité du contenu pour tous.
L’objectif du ratio de contraste est d’obtenir un contraste suffisant entre le texte et son arrière-plan, afin que tout le monde puisse le lire.
Comment améliorer votre ratio de contraste ?
Règles principales d’un texte :
Les directives d’accessibilité au contenu Web (WCAG) proposent une série de recommandations pour rendre le Web plus accessible.
Concernant les couleurs, la norme définit deux niveaux de contraste :
- AA (contraste minimum)
- AAA (contraste renforcé).
Habituellement, nous parlons du ratio de contraste sous la forme : la valeur : 1 (par exemple 4,5:1). Ici, pour faciliter l’écriture, nous n’utiliserons que la valeur seule (par exemple 4,5:1 est maintenant 4,5).
Le niveau AA exige un rapport de contraste d’au moins 4,5 pour le petit texte et de 3 pour le grand texte (au moins 18 pt) ou le texte en gras.
Le niveau AAA impose un rapport de contraste d’au moins 7 pour le petit texte et de 4,5 pour le grand texte ou le texte en gras.
Explanation Contrast ratio and visual acuity:
L’acuité visuelle est un critère de bonne vision basé sur la perception du contraste entre un texte et son fond.
Les personnes ayant une acuité visuelle de 20/40 peuvent voir à 20 pieds ce que les autres verront à 40 pieds.
Les exigences en matière de rapport de contraste ont augmenté en même temps que l’acuité visuelle diminuait, afin de la compenser et de permettre à chacun d’obtenir un contraste suffisant entre le texte et le fond.
La norme [ARDITI-The FAYE] explique qu’une acuité visuelle de 20/40 équivaut à une perte de sensibilité au contraste de 1,5. Aussi, si les personnes ayant une bonne acuité visuelle ont besoin d’un rapport de contraste de 3:1, les personnes ayant une acuité visuelle de 20/40 ont besoin de 4,5:1 (détails du calcul : 3*1,5 = 4,5 pour 1)
Les règles sont donc liées aux normes [ISO-9241-3] et [ANSI-HFES-100-1988].
Pour aller plus loin :
- Les couleurs : La teinte et la saturation des couleurs ne sont pas des facteurs clés dans le calcul du contraste. Certaines personnes ont des difficultés à percevoir les couleurs. C’est pourquoi le calcul du contraste est effectué en tenant compte de la limitation de la couleur, afin que toutes les personnes puissent obtenir un contraste suffisant entre le texte et le fond.
- La typographie du texte : La taille et le style du texte sont pris en compte pour calculer le contraste, car certaines typographies sont moins lisibles que d’autres.
- Le grand texte : Le texte avec une police minimale de 18 points ou 14 points gras. Ce type de texte peut fonctionner avec un faible taux de contraste parce que ses caractères sont grands et faciles à lire. Cela laisse plus de possibilités dans le choix de la couleur.
- Le texte fin : Les polices de caractères dont les traits sont plus fins ou les styles plus manuscrits peuvent être plus difficiles à lire. Elles doivent donc composer avec un rapport de contraste élevé pour être lisibles.
- Le texte décoratif. Il désigne le texte qui ne porte aucune information. Son but et sa présence ne sont qu’esthétiques. Par conséquent, ce texte peut facilement être remplacé par d’autres mots. Il est souvent utilisé en arrière-plan. Il peut fonctionner avec un faible taux de contraste dans la mesure où l’on souhaite valoriser l’aspect esthétique plutôt que la lisibilité du texte.
- Les logotypes : Il n’y a pas d’exigence de contraste pour ce type de texte, car lisible ou non, il a un style propre à l’identité de la marque.
Review
Comment calculer le ratio de contraste ?
La formule à calculer est (L1 + 0,05) / (L2 + 0,05) avec :
L1 : La luminance relative de la plus claire des couleurs.
L2 : La luminance relative de la plus sombre des couleurs.
La luminance relative est la luminosité d’un point dans un espace couleur. Elle est comprise entre 0 (le noir le plus sombre) et 1 (le blanc le plus clair). Plus la luminance relative du point sera proche de 0, plus la couleur sera foncée et inversement.
