Convertissez n'importe quelle couleur et vérifiez son contraste avec le convertisseur de couleurs — HEX, RGB, HSL et ratios WCAG, tout dans votre navigateur.
Trois vues de la même couleur
Les outils de design, le CSS et les panneaux d'inspection présentent chacun les couleurs différemment. HEX est un encodage hexadécimal compact, RGB exprime directement les canaux rouge/vert/bleu, et HSL décrit la même couleur comme teinte, saturation et luminosité.
Aucun format n'est plus précis — ce sont des conversions de la même valeur sRGB. Le choix est une question de lisibilité : HSL est plus facile à raisonner pour une variante plus claire ou moins saturée, HEX est compact, RGB correspond aux canaux du périphérique.
Comment les formats se correspondent
`#3b82f6` se décode en rgb(59, 130, 246). Convertissez ces canaux en HSL et vous obtenez hsl(217.2, 91.4%, 59.8 %) — un bleu moyen.
Les conversions sont sans perte en pratique lorsque vous arrondissez aux canaux entiers, c'est pourquoi les convertisseurs affichent la même nuance depuis n'importe quel format d'entrée.
- HEX : #rrggbb ou raccourci #rgb ; #rrggbbaa ajoute l'alpha
- RGB : rgb(r, g, b) avec canaux de 0 à 255 ou en pourcentage
- HSL : hsl(h, s%, l%) avec teinte de 0 à 360 degrés et saturation/luminosité de 0 à 100 %
Alpha : quand le quatrième canal compte
L'alpha stocke la transparence. Le HEX à huit chiffres (#rrggbbaa), rgba() et hsla() la portent tous.
La transparence change le contraste effectif : un premier plan semi-transparent se mélange à l'arrière-plan derrière lui, donc une paire qui passe le test à 100 % d'opacité peut échouer une fois composée sur une image chargée.
Contraste : le chiffre qui protège la lisibilité
WCAG 2.x définit le contraste comme un ratio entre les luminances relatives de deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc).
Les seuils pratiques : au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte pour atteindre AA, et 7:1 pour le texte normal au niveau AAA.
| Cible | Texte normal | Grand texte |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Un flux de travail couleur reproductible
- Saisissez une couleur de votre outil de design en HEX, rgb() ou hsl().
- Lisez les valeurs équivalentes et copiez le format utilisé par votre codebase.
- Définissez les couleurs de premier plan et d'arrière-plan dans le vérificateur de contraste.
- Confirmez que la paire atteint la cible AA ou AAA pour la taille de texte utilisée.
- Testez la paire finale sur de vrais écrans, y compris en mode sombre.
FAQ
Q.Les conversions sont-elles sans perte ?
A.En pratique, oui : HEX, RGB et HSL décrivent la même couleur sRGB, et les convertisseurs arrondissent les canaux à des entiers, ce que CSS et les outils de design utilisent.
Q.Mes couleurs quittent-elles le navigateur ?
A.Non. La conversion et les calculs de contraste s'exécutent localement sur votre appareil.
Q.Quand ai-je besoin de AAA au lieu de AA ?
A.AA est la cible de conformité courante et est requise pour la plupart des textes publics. AAA est un standard plus strict, utile pour les produits riches en contenu ou lorsque l'accessibilité est une exigence produit. Visez AA comme base et AAA quand c'est faisable.
Références
Ce guide s'appuie sur les spécifications suivantes :
- W3C CSS Color Module Level 4 : https://www.w3.org/TR/css-color-4/
- W3C WCAG 2.2 – Contraste (minimum) : https://www.w3.org/TR/WCAG22/#contrast-minimum
- IEC 61966-2-1 – Espace colorimétrique sRGB (via ICC) : https://www.color.org/srgb.xalter
Convertissez une couleur et vérifiez le contraste
HEX, RGB, HSL, alpha et ratios WCAG — entièrement dans votre navigateur.
Même couleur, meilleures décisions
Les conversions de format sont la partie facile. Les décisions — quel format votre équipe utilise, si l'alpha est sûr, si une paire passe le contraste — sont là où vit la qualité.
Convertissez et vérifiez avec le convertisseur de couleurs, et contrôlez la paire finale avant de figer la palette.