Comment bien utiliser le contraste dans votre marque
Le contraste est la différence de luminosité entre le texte et ce qui se trouve derrière. Quand il est faible, le texte est difficile à lire : sur un écran en plein soleil, sur un téléphone avec la luminosité au minimum ou pour toute personne malvoyante. C’est pourquoi les règles d’accessibilité WCAG fixent un minimum mesurable.
Ce que signifient AA et AAA
- AA, texte normal : 4,5 pour 1. C’est le minimum recommandé pour les paragraphes, menus, boutons et formulaires.
- AA, grand texte : 3 pour 1. S’applique aux titres de 24 px ou plus, ou de 18,66 px ou plus en gras.
- AAA : 7 pour 1 et 4,5 pour 1. C’est le niveau le plus exigeant. À viser pour les textes longs.
- Icônes et bordures de champs : 3 pour 1. Les éléments graphiques nécessaires pour comprendre ou utiliser quelque chose ont eux aussi besoin de contraste.
Contraste et couleurs de marque
Beaucoup de marques ont une couleur principale qui fonctionne très bien en fond et très mal en texte, comme les jaunes et les bleus clairs. La solution n’est pas de changer de marque : c’est de définir dans la charte graphique quelles combinaisons servent au texte et lesquelles seulement aux fonds, aux formes ou aux détails. Deux ou trois variantes plus foncées ou plus claires de la même couleur suffisent généralement.
Ce que le chiffre ne mesure pas
Le ratio de contraste ne tient compte ni de la graisse de la police, ni de la taille réelle à l’écran, ni du daltonisme. Une typographie très fine demande plus que le contraste minimum. Et n’utilisez jamais la couleur seule pour transmettre une information, comme une erreur dans un formulaire : accompagnez-la d’un texte ou d’une icône.
Questions fréquentes
Comment calcule-t-on le ratio de contraste ?
On compare la luminance relative des deux couleurs avec la formule WCAG : (la plus claire + 0,05) divisée par (la plus foncée + 0,05). Le résultat va de 1 pour 1 (même couleur) à 21 pour 1 (noir sur blanc).
Quel niveau dois-je respecter ?
Pour la plupart des sites, le niveau AA : 4,5 pour 1 pour le texte normal et 3 pour 1 pour le grand texte. C’est celui qu’exigent les lois et normes d’accessibilité de nombreux pays.
Est-ce que ça fonctionne avec des couleurs transparentes ?
Non. Utilisez la couleur finale affichée à l’écran, avec la transparence déjà appliquée sur le fond. Vous pouvez la relever avec la pipette de votre navigateur ou de votre logiciel de design.
Conservez-vous les couleurs que je teste ?
Non. Le calcul se fait dans votre navigateur et rien n’est envoyé.
Réponses de l'équipe AiDo Creative