Convertisseur de Couleurs - HEX, RGB, HSL et Contraste WCAG
Convertisseur de couleurs et vérificateur de contraste
HEX, rgb(), hsl() ou un nom de couleur CSS — les quatre sont acceptés.
Nuances
La même teinte à onze niveaux de clarté. Cliquez pour en faire la couleur courante.
Contraste
Le rapport entre deux couleurs, mesuré selon la définition du WCAG.
| Paire | Rapport | AA (4,5:1) | AAA (7:1) |
|---|
Ce que fait cet outil
Convertir une couleur d’une notation à l’autre tient en cinq lignes de calcul. La question plus difficile est de savoir si du texte de cette couleur est réellement lisible, et cette réponse exige une étape que la plupart des outils sautent. Les deux figurent ici, sur la couleur que vous avez saisie.
Comment l’utiliser
- 1 Saisissez une couleur dans n’importe quelle notation, ou utilisez le sélecteur.
- 2 Copiez la notation dont vous avez besoin, ou cliquez une nuance pour vous y déplacer.
- 3 Lisez le tableau de contraste. Tout ce qui est marqué non conforme sera difficile à lire pour quelqu’un.
Pourquoi la même teinte semble différente en HSL
HSL arrondit aux degrés et aux pourcentages entiers : passer en HSL puis revenir ne redonne pas toujours les octets de départ. C’est pourquoi le HEX affiché ici découle toujours de votre saisie, jamais d’un aller-retour par HSL — sinon le champ dériverait d’un cran à chaque clic.
Ce que signifient les chiffres de contraste
Le rapport va de 1:1 pour deux couleurs identiques à 21:1 pour du noir pur sur du blanc pur. Les seuils ci-dessous sont ceux que l’outil vérifie.
| 4.5:1 | Texte courant, WCAG AA |
| 3:1 | Texte grand ou gras, WCAG AA |
| 7:1 | Texte courant, WCAG AAA |
| 21:1 | Le rapport maximal possible : noir sur blanc |
L’étape que la plupart des outils sautent
La luminance relative n’est pas la moyenne des valeurs de canal. Chaque canal doit d’abord être linéarisé, car les nombres d’un code HEX sont encodés en gamma et non proportionnels à la lumière. Sauter cette étape donne quand même un nombre plausible, mais faux, et l’erreur est maximale dans les tons moyens, là où vivent la plupart des couleurs d’interface.
Le contraste est nécessaire, pas suffisant
Une paire peut dépasser 4,5:1 et rester un mauvais choix : le daltonisme rend certaines paires indistinguables même à des rapports élevés, et la couleur ne devrait jamais porter seule le sens. Considérez une conformité ici comme un seuil franchi, pas comme un verdict sur le design.