Retour

Contraste de couleurs

C’est quoi le contraste de couleurs ?

Le contraste de couleurs correspond à la capacité de deux choses à ressortir l’une par rapport à l’autre. Dans une interface digitale ce contraste concerne principalement la lisibilité du texte et des icônes par rapport au fond.

Pourquoi est-il important ?

Le contraste de couleurs est l’un des premiers éléments qui font qu’une page soit lisible pour les utilisateurs. Un faible contraste entre le texte et le fond peut rendre difficile la lisibilité par les utilisateurs, surtout pour ceux qui ont un problème de vue. 

Comment régler le contraste de couleurs ?

L'analyse suit les recommandations WCAG 2.1 dont les standards d'accessibilité sont les suivantes :

La présentation visuelle du texte et des images doit avoir un ratio de contraste d'au moins 4,5:1, sauf dans les cas suivants :

  • Le texte à grande échelle et les images de texte à grande échelle doivent avoir un ratio de contraste d'au moins 3:1 ;
  • Le texte ou les images de texte qui font partie d'un élément d'interface utilisateur inactif, qui sont de la pure décoration, qui ne sont visibles par personne ou qui font partie d'une image qui contient un autre contenu visuel important, n'ont pas d'exigence en matière de contraste
  • Le texte qui fait partie d'un logo ou d'une marque n'a pas besoin de contraste

Le ratio de contraste est une mesure de la différence de " brillance " ou de luminosité perçue entre deux couleurs. Cette différence de luminosité est exprimée sous la forme d'un rapport allant de 1:1 texte blanc sur fond blanc à 21:1 texte noir sur fond blanc.

  • Rouge (#FF0000) a un ratio de 4:1
  • Vert (#00FF00) a un faible ratio de 1.4:1
  • Bleu (#000FF) a un contraste de 8.6:1