Encoders & Utilities

Convertisseur de couleur & contraste WCAG

HEX ↔ RGB ↔ HSL avec générateur de palette et vérificateur WCAG.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

À propos de cet outil

Color Converter traduit les couleurs entre les formats que les designers et développeurs utilisent quotidiennement : HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK, plus les couleurs CSS nommées (rebeccapurple, tomato, les 147 d'entre elles). Tapez n'importe quel format et les autres se mettent à jour instantanément ; l'alpha est préservé à travers les formats qui le supportent.

Deux extras en font plus qu'un convertisseur passif. Le générateur de palette produit des échelles tonales (50/100/.../900) et des groupes d'harmonie (complémentaire, triadique, tétradique, complémentaire fendue) autour de votre couleur de base — utile pour remplir un système de design. Le vérificateur de contraste WCAG choisit un premier plan et un arrière-plan, calcule le ratio de contraste selon WCAG 2.2 et vous indique si la paire passe AA (4,5:1 petit, 3:1 grand) et AAA (7:1 petit, 4,5:1 grand).

Quand utiliser cet outil

Construire un système de design. Choisissez une couleur de marque, obtenez une échelle tonale complète pour les rôles primaire/secondaire/neutre.
Auditer l'accessibilité. Passez chaque paire texte/arrière-plan dans le vérificateur de contraste ; en dessous de 4,5:1 signifie que le critère d'acceptation WCAG AA échoue.
Migrer le CSS. Convertissez les anciennes constantes hex en OKLCH pour le workflow moderne en gamut étendu.
Handoff designer-développeur. Traduisez les valeurs RGB Figma en hex CSS (ou vice-versa) sans erreurs d'arrondi.

À propos du contraste WCAG et OKLCH

Le contraste WCAG 2.2 utilise la formule historique de « luminance relative » — adéquate pour la plupart des cas mais connue pour sur- et sous-évaluer certaines paires de couleurs. APCA (l'algorithme prévu pour WCAG 3) corrige cela avec une métrique perceptuellement uniforme ; nous affichons les deux nombres afin que vous puissiez planifier à l'avance. OKLCH est un espace de couleur CSS récent qui est perceptuellement uniforme — des pas numériques égaux en L (luminosité) semblent égaux à l'œil, ce qui rend la génération de palettes cohérentes beaucoup plus facile qu'avec HSL.

Questions fréquentes

Quel est le seuil WCAG AA ?

Pour le texte normal : ratio de contraste ≥ 4,5:1 entre texte et arrière-plan. Pour le grand texte (≥ 18pt régulier, ou ≥ 14pt gras) : ratio ≥ 3:1. Le niveau AAA est plus strict (7:1 / 4,5:1). La plupart des sites grand public visent AA ; les interfaces gouvernementales et de santé exigent de plus en plus AAA. Notre vérificateur affiche succès/échec pour chaque seuil afin que vous n'ayez pas à mémoriser les chiffres.

Pourquoi HEX et RGB sont-ils équivalents ?

Ce sont la même couleur écrite différemment. #3366FF est juste une abréviation pour « rouge=0x33 (51), vert=0x66 (102), bleu=0xFF (255) » — trois octets. La notation RGB en CSS (rgb(51, 102, 255)) écrit les mêmes trois octets en décimal. HEX est plus compact (7 caractères vs ~17) ; RGB est plus lisible quand vous devez calculer sur les canaux. Utilisez celui qui convient à votre contexte ; le résultat est identique.

Qu'est-ce qu'OKLCH et devrais-je l'utiliser ?

OKLCH est un espace de couleur CSS Color 4 conçu pour être perceptuellement uniforme — des sauts numériques égaux en L (luminosité), C (chroma) ou H (teinte) semblent égaux à l'œil. HSL n'est pas uniforme ; un jaune vif à L=80 semble bien plus brillant qu'un marine à L=80. Pour les systèmes de design et palettes tonales OKLCH est dramatiquement plus facile à utiliser. Le support navigateur est excellent (Safari 16.4+, Chrome 111+, Firefox 113+).

Le vérificateur de contraste prend-il en charge l'opacité ?

Oui — les premiers plans semi-transparents sont composités contre la couleur d'arrière-plan avant que le contraste soit calculé, ce qui correspond à ce que les humains voient réellement. rgba(0,0,0,0.6) sur blanc rend la même couleur que #666666 sur blanc, et nous les traitons identiquement. Si vous composez contre un arrière-plan complexe (image, dégradé), choisissez la couleur moyenne d'arrière-plan comme référence.