About
Affichage en Français Passer à l'anglais

Convertisseur de couleur et vérificateur de contraste

Convertissez entre HEX, RGB et HSL, et vérifiez le contraste d’accessibilité WCAG entre deux couleurs. Tout s’exécute dans votre navigateur.

Convertisseur de couleur

Vérificateur de contraste WCAG

Texte normal (16 px)

Texte large (24 px / gras 18.66)

Rapport de contraste —
WCAG AA Texte normal— Texte large—
WCAG AAA Texte normal— Texte large—
  1. Choisissez une couleur dans l’échantillon ou saisissez une valeur HEX, RGB ou HSL — les autres se mettent à jour automatiquement.
  2. Descendez jusqu’au Vérificateur de contraste et définissez une couleur de premier plan et d’arrière-plan.
  3. Lisez le rapport calculé et les badges succès/échec AA / AAA pour le texte normal et large.
  4. Ajustez l’une ou l’autre couleur jusqu’à ce que le rapport dépasse le seuil requis par votre design.
Que fait-il ?

Le convertisseur traduit une couleur entre HEX (#rrggbb), RGB (rgb(r, g, b)) et HSL (hsl(h, s%, l%)) en temps réel : quel que soit le format utilisé par votre système de design, vous obtenez les deux autres. Le vérificateur de contraste prend un premier plan et un arrière-plan, linéarise les deux via la courbe gamma sRGB, puis affiche le rapport WCAG 2.x avec les verdicts AA / AAA pour le texte normal et large.

Exemple

Entrée — un bleu de marque typique :

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Associé à un arrière-plan blanc (#ffffff) :

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Pourquoi cette paire de couleurs échoue-t-elle à WCAG AAA ?

Voici les pièges les plus courants en matière de contraste et de conversion :

  • Confondre AA grand et AA normal. Le texte large ne demande que 3:1 ; un lien qui passe bien dans un H1 peut donc échouer en taille de paragraphe. Une paire à 3.5:1 passe les titres mais échoue sur le corps.
  • Utiliser la luminosité HSL comme équivalent du contraste. hsl(0, 100%, 50%) (rouge) et hsl(240, 100%, 50%) (bleu) ont tous deux L=50% mais des luminances très différentes. Calculez toujours le contraste à partir des valeurs RGB, pas de la luminosité HSL.
  • Oublier la composition alpha. Un texte rgba(0, 0, 0, 0.6) sur blanc équivaut en fait à #666666. Vérifiez le HEX aplati, pas la valeur semi-transparente.
  • Mauvaise longueur de HEX. #fff se développe en #ffffff, mais #ffff est la forme courte à 4 chiffres avec un octet alpha. Vérifiez le nombre de chiffres quand un champ HEX rejette silencieusement l’entrée.
  • Mélanger display-P3 et sRGB. Des couleurs prélevées dans un outil comme Figma en mode gamut large peuvent sortir de la plage sRGB, et les navigateurs les écrêtent. Convertissez en sRGB dans l’outil source avant de copier le HEX.
  • Tester le contraste uniquement sur blanc pur. Si la mise en page réelle place le texte sur #f3f4f6 ou sur une photo, le contraste visible est plus faible. Testez avec l’arrière-plan réel.
Questions fréquentes

Quel rapport de contraste faut-il pour valider WCAG AA ?

WCAG 2.1 AA exige 4.5:1 pour le texte courant et 3:1 pour le texte large — large signifiant au moins 18 pt (24 px) régulier ou 14 pt (18.66 px) en gras. Les composants d’UI et objets graphiques doivent atteindre 3:1 sur leur arrière-plan. AAA monte la barre à 7:1 pour le texte normal et 4.5:1 pour le texte large.

Pourquoi le HSL que je resaisis donne-t-il des RGB légèrement différents ?

La plupart des outils stockent le HSL en pourcentages entiers : l’aller-retour RGB → HSL → RGB peut donc décaler d’une unité par canal. Ce décalage reste sous le JND et est invisible à l’écran ; si vous avez besoin d’une fidélité parfaite, gardez le HEX ou RGB comme source et traitez le HSL comme une vue.

Cet outil utilise-t-il la correction gamma sRGB pour le contraste ?

Oui. Le calcul suit la formule WCAG 2.x : linéarisation de chaque canal sRGB via la courbe gamma, calcul de la luminance relative, puis (L1 + 0.05) / (L2 + 0.05). Une simple moyenne de canaux ou la luminosité HSL donnent des chiffres trompeurs qui ne correspondent pas au résultat WCAG.

Comment gérer l’alpha ou les couleurs semi-transparentes ?

Le contraste WCAG se définit sur un arrière-plan opaque. Aplanissez donc l’alpha en composant d’abord le premier plan sur le vrai fond. Par exemple, un bloc de texte noir à 50% sur une page blanche équivaut à #808080 sur #ffffff. Donnez ce HEX aplani au vérificateur, pas la valeur semi-transparente.

Le HEX #rgb est-il identique à #rrggbb ?

Oui. La forme courte à 3 chiffres répète chaque quartet : #f0c devient #ff00cc. Les formes à 4 et 8 chiffres ajoutent un canal alpha. Cet outil accepte les HEX 3, 6 et 8 chiffres ; comme WCAG exige une couleur opaque composée, l’octet alpha n’est qu’informatif pour le contraste.

Enregistrez-vous les couleurs que je saisis ou choisis ?

Non. Nous ne gardons aucune trace des couleurs que vous testez, convertissez ou vérifiez. Tout ce que vous saisissez ou glissez dans le sélecteur est supprimé à la fermeture de l’onglet — aucun journal, aucune analyse sur vos valeurs. Consultez les outils de développement du navigateur si vous voulez vous en assurer.