← Retour au convertisseur de couleurs AdminTools.fr — Guide design

Hex, RGB, HSL et contraste : bien choisir ses couleurs

Trois façons d'écrire la même couleur, et un critère d'accessibilité trop souvent oublié : le contraste. Ce guide explique quand utiliser chaque format et comment vérifier qu'un texte reste lisible.

Hex, RGB, HSL : trois formats, une seule couleur

Le code hexadécimal (#9c7b3a) encode directement les trois canaux rouge, vert, bleu en base 16 — compact, mais peu intuitif à ajuster à la main. Le format RGB (rgb(156, 123, 58)) exprime les mêmes valeurs en base 10, plus lisible pour un humain. Le format HSL (hsl(36, 46%, 42%)) décrit la couleur par teinte (Hue, 0-360°), saturation et luminosité — bien plus pratique pour créer des variantes cohérentes d'une même couleur.

Quand utiliser quel format

Format	Cas d'usage
Hex	Valeur figée dans une charte graphique, code CSS compact.
RGB	Transparence avec rgba(), interopérabilité avec d'autres outils/langages.
HSL	Générer une palette de teintes ou de nuances cohérentes (ex : éclaircir/assombrir une couleur de base en ne touchant qu'à la luminosité).

Pour foncer ou éclaircir une couleur sans en changer la teinte, le plus simple est de passer en HSL et de ne modifier que la luminosité (L) — modifier RGB ou Hex directement décale souvent légèrement la teinte perçue.

Le ratio de contraste et les normes WCAG

Le ratio de contraste entre un texte et son fond va de 1:1 (aucun contraste, illisible) à 21:1 (noir pur sur blanc pur). Les normes d'accessibilité WCAG définissent des seuils minimaux pour qu'un texte reste lisible par le plus grand nombre, y compris les personnes malvoyantes :

• AA (minimum recommandé) : 4.5:1 pour le texte normal, 3:1 pour le texte large (≥18px gras ou ≥24px).
• AAA (renforcé) : 7:1 pour le texte normal, 4.5:1 pour le texte large.

Un site qui ne respecte pas au moins le niveau AA risque d'être illisible pour une part significative de ses visiteurs — et expose à un risque de non-conformité légale dans certains contextes (secteur public, e-commerce dans plusieurs juridictions).

Vérifier un contraste maintenant →

Erreurs courantes

• Choisir une couleur uniquement à l'écran sans vérifier le contraste — un gris clair sur blanc peut sembler lisible sur un écran calibré et devenir illisible sur un autre.
• Confondre luminosité perçue et valeur numérique — deux couleurs avec la même luminosité HSL (L) peuvent paraître plus ou moins claires à l'œil selon leur teinte (le jaune paraît toujours plus clair que le bleu à L égal).
• Tester uniquement la combinaison texte/fond la plus commune et oublier les états secondaires (texte désactivé, placeholder, bordures) qui ont aussi besoin d'un contraste suffisant pour rester perceptibles.

Questions fréquentes

Pourquoi mon Hex à 3 caractères (#fff) fonctionne aussi ?

C'est une notation raccourcie où chaque caractère est doublé : #fff équivaut à #ffffff. Pratique pour les couleurs simples, mais elle ne peut pas représenter toutes les nuances possibles en 6 caractères.

Le contraste suffit-il à garantir l'accessibilité d'une page ?

Non, c'est un critère parmi d'autres (texte alternatif des images, navigation au clavier, structure sémantique HTML...) mais c'est l'un des plus simples à corriger et l'un des plus impactants au quotidien.

Quelle différence entre HSL et HSB/HSV ?

Très proches mais pas identiques : HSL utilise la luminosité (Lightness), HSB/HSV utilise la valeur (Brightness/Value) — la même teinte et saturation peuvent donner un résultat visuellement différent entre les deux modèles à valeur numérique égale.