Convertisseur de couleurs
Convertissez n'importe quelle couleur entre HEX, RGB, HSL et HSV. Utilisez le sélecteur ou tapez dans n'importe quel champ — les autres se mettent à jour en direct. Avec un vérificateur de contraste WCAG pour des paires accessibles.
Utile pour transposer les couleurs d'un design system, choisir des paires texte/fond accessibles et aligner les valeurs entre outils.
Vérificateur de contraste WCAG
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Seuils WCAG
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
Le ratio est calculé à partir de la luminance relative WCAG 2.1, via les canaux sRGB linéarisés et les poids 0.2126·R + 0.7152·G + 0.0722·B.
Notes sur les formats
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
FAQ
Pourquoi HSL et HSV ne correspondent-ils pas exactement à mes valeurs Photoshop / Figma ?
Arrondi. Hue, saturation et lightness sont continus ; les outils les arrondissent différemment. Une différence d'1° de hue ou 1% de saturation est attendue et visuellement identique.
Le vérificateur de contraste prend-il en compte l'alpha (transparence) ?
Non. Les ratios WCAG supposent des couleurs totalement opaques. Si votre premier plan est semi-transparent, mélangez-le d'abord au fond et vérifiez la couleur opaque résultante.
Et APCA, le nouvel algorithme de contraste ?
APCA est candidat au remplacement du ratio WCAG 2.x dans WCAG 3.0 (encore en brouillon). Pour le travail en production aujourd'hui, c'est le ratio WCAG 2.1 que les auditeurs et Lighthouse vérifient.
Quelque chose est-il envoyé à un serveur ?
Non. Toute la conversion et les calculs de contraste tournent dans votre navigateur.