Contraste des couleurs

Qu'est-ce que le contraste des couleurs ?

Le contraste des couleurs est la différence de luminosité entre une couleur de premier plan, comme un texte ou une icône, et l'arrière-plan qui la porte. Il s'exprime par un ratio de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Plus le ratio est élevé, plus le contenu est lisible, notamment pour les personnes malvoyantes, daltoniennes ou face à un écran en plein soleil.

Le contraste est à la fois un principe de design et une exigence légale et d'accessibilité dans de nombreux pays.

Les ratios de contraste WCAG

Les Web Content Accessibility Guidelines (WCAG) fixent des ratios minimaux selon la taille du texte et le niveau de conformité.

Le niveau AA est la cible habituelle des sites web et la référence de la plupart des réglementations.

Comment le ratio est calculé

Le ratio compare la luminance relative de deux couleurs : (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire. Inutile de le calculer à la main : les outils de développement du navigateur et les vérificateurs l'affichent immédiatement.

/* 4,6:1 sur blanc, conforme AA */
color: #767676;
background: #ffffff;

Erreurs fréquentes

• Texte gris clair sur fond blanc, très répandu dans les designs minimalistes mais souvent sous 3:1.
• Texte posé sur des images ou des dégradés sans calque de renfort.
• Placeholders et états désactivés trop pâles.
• Transmettre une information par la seule couleur, comme un rouge pour les erreurs sans icône ni libellé.
• Oublier les états de survol, de focus et le mode sombre.

Bonnes pratiques

• Tester chaque paire de couleurs de la palette et documenter les combinaisons conformes dans le design system.
• Associer le contraste à la taille et à la graisse pour construire une hiérarchie visuelle claire.
• Revérifier le contraste en mode sombre, car une palette valide en mode clair peut échouer en mode sombre.
• Tester avec un simulateur de daltonisme, pas seulement avec un vérificateur de ratio.

Le contraste des couleurs chez BeBranded

Nous vérifions le contraste dès la construction de la palette, pas après la mise en ligne. Dans notre travail de design, chaque paire de couleurs est validée selon le niveau AA des WCAG et documentée, pour que votre marque reste lisible et accessible sur le site comme dans l'interface.