Le contraste dans le contexte d'un design de produit numérique accessible se réfère à la clarté et la distinction nette entre les éléments visuels présenté à l’écran, tels que le texte et son arrière-plan. Cette distinction est cruciale pour assurer que tous les utilisateurs, y compris ceux ayant des déficiences visuelles, peuvent facilement lire et comprendre le contenu.

Contraste entre le texte et son arrière-plan

Pour une lisibilité optimale un contraste de couleur adéquat entre le texte et son arrière-plan est essentiel :

• Texte standard : Un rapport de contraste d’au moins 4.5:1 est requis.
• Texte de grande taille : Un rapport de contraste d'au moins 3:1 est requis.

Qu’est-ce qu’un texte de grande taille?

Sur les pages Web, la taille du texte est généralement définie en pixels plutôt qu'en points.

Un texte de grande taille correspond généralement à

• 18 points (24 pixels)
• 14 points (18,67 pixels) en gras

En CSS, un texte est rendu en gras en utilisant la propriété font-weight:bold ou en définissant font-weight à 700 ou plus.

Contraste des hyperliens

• Les hyperliens doivent présenter un rapport de contraste d'au moins 4.5:1 avec l'arrière-plan pour un texte standard et 3:1 pour un texte de grande taille.
• Un contraste de 3:1 est requis entre le texte de l'hyperlien et le texte adjacent.