Pourquoi mes couleurs de marque échouent-elles au test de contraste sur le web ?

Les couleurs de marque sont en général choisies pour l'impression ou les logos, pas pour un texte lisible. Un ton moyen qui rend bien en aplat peut se situer bien en dessous du rapport de 4,5 pour 1 exigé pour le corps de texte. Il faut alors l'assombrir ou l'associer à une autre couleur de texte.

Quel rapport de contraste viser ?

Le niveau WCAG AA exige 4,5 pour 1 pour le texte normal et 3 pour 1 pour le grand texte. Le niveau AAA est plus strict, à 7 pour 1. Pour la plupart des sites, atteindre le niveau AA sur le corps de texte est l'objectif réaliste.

Créer une palette de couleurs accessible à partir de votre logo

4 étapes Environ 10 minutes

Votre logo contient vos couleurs de marque, mais leurs valeurs brutes échouent souvent au test de contraste. Extrayez, testez, puis construisez autour de ce qui passe.

Un logo contient déjà vos couleurs de marque, mais reporter ces valeurs brutes telles quelles sur un site web fait souvent échouer les contrôles d’accessibilité dès qu’on y pose du texte. Le travail consiste à extraire la palette avec précision, à la tester selon de vraies règles de contraste, puis à construire les nuances de soutien autour des couleurs qui tiennent la route. Ainsi, la version accessible reste reconnaissable comme votre marque, et non une approximation édulcorée.

Extraire les couleurs du logo

Importez le logo et récupérez ses couleurs dominantes. Vous obtenez ainsi les vraies valeurs hexadécimales au lieu de les estimer à l'œil.

Ouvrir Palette

Tester chaque couleur avec votre texte

Vérifiez chaque couleur par rapport à la couleur de texte que vous comptez lui associer. Visez un rapport d'au moins 4,5 pour 1 pour le corps de texte afin de satisfaire le niveau WCAG AA.

Ouvrir Contrast

Construire les teintes et les nuances

Générez des déclinaisons plus claires et plus foncées autour des couleurs validées, pour avoir des options pour les arrière-plans, les bordures et les états de survol.

Ouvrir Palette

Ajouter un dégradé (facultatif)

Combinez deux couleurs de marque dans un dégradé CSS pour les en-têtes ou les boutons, si votre design en a besoin.

Ouvrir Gradient

Questions fréquentes

Pourquoi mes couleurs de marque échouent-elles au test de contraste sur le web ?: Les couleurs de marque sont en général choisies pour l'impression ou les logos, pas pour un texte lisible. Un ton moyen qui rend bien en aplat peut se situer bien en dessous du rapport de 4,5 pour 1 exigé pour le corps de texte. Il faut alors l'assombrir ou l'associer à une autre couleur de texte.
Quel rapport de contraste viser ?: Le niveau WCAG AA exige 4,5 pour 1 pour le texte normal et 3 pour 1 pour le grand texte. Le niveau AAA est plus strict, à 7 pour 1. Pour la plupart des sites, atteindre le niveau AA sur le corps de texte est l'objectif réaliste.

Un projet plus ambitieux ?

Hivly est créé par CodingEagles, un studio logiciel qui livre des applications web de production. Si vous avez un vrai projet, contactez-nous.

Découvrez ce que fait CodingEagles →