Convertisseur de couleurs gratuit et vérificateur de contraste WCAG
Convertissez HEX, RGB, HSL, HSV et CMYK instantanément, puis vérifiez le contraste WCAG 2.1 AA/AAA pour un texte et une interface accessibles. Privé et gratuit dans votre navigateur.
Exemple de texte normal — Le rapide renard brun
Grand texte — Lisible à 18 pt+
Premier plan
#1a73e8
Arrière-plan
#ffffff
RGB / RGBA
HSL / HSLA
HSV
CMYK
Teintes et ombres
Vérificateur de contraste WCAG
Ratio de luminance entre premier plan et arrière-plan (couleurs opaques).
4.51:1
Référence : le noir (#000000) sur blanc (#ffffff) vaut 21:1. Le grand texte correspond environ à 18 pt regular ou 14 pt bold. Les composants d’interface et graphiques nécessitent au moins 3:1.
Comment utiliser le convertisseur de couleurs et le vérificateur de contraste
- Choisissez ou collez une couleur — utilisez le sélecteur natif, saisissez une valeur HEX (#RGB, #RRGGBB ou #RRGGBBAA), ou modifiez les champs RGB, HSL, HSV ou CMYK. Tous les formats restent synchronisés.
- Basculez Premier plan / Arrière-plan lorsque vous vérifiez l’accessibilité. L’aperçu en direct affiche le texte normal et grand sur votre paire.
- Lisez le ratio de contraste WCAG et les badges Réussi/Échoué pour le texte AA/AAA normal et grand, ainsi que le seuil 3:1 UI / non-texte.
- Copiez des valeurs prêtes pour CSS en un clic — HEX, rgb(), hsl(), HSV ou CMYK.
- Explorez teintes et ombres dans la bande sous le convertisseur, ou générez une couleur aléatoire d’abord puis convertissez-la ici.
À propos de ce convertisseur de couleurs gratuit
Les designers et développeurs traduisent sans cesse les couleurs entre HEX, RGB, HSL, HSV et CMYK — puis doivent encore vérifier si la paire est lisible. Des convertisseurs et outils de contraste séparés ralentissent ce flux.
Ce convertisseur de couleurs et vérificateur de contraste WCAG réunit les deux tâches sur une seule page. Modifiez n’importe quel format et le reste se met à jour en direct. Vérifiez les seuils AA/AAA pour le texte normal et grand, plus l’exigence WCAG 2.1 pour l’UI non textuelle (3:1). Tout s’exécute côté client, donc vos essais de palette ne quittent jamais le navigateur.
Associez-le au sélecteur de couleur aléatoire pour l’inspiration, au redimensionneur et recadrage d’images lorsque vous extrayez des couleurs d’assets, ou au convertisseur d’unités pour les calculs liés au design system.
Référence rapide HEX, RGB, HSL, HSV et CMYK
| Format | Usage typique | Exemple |
|---|---|---|
| HEX | CSS, outils de design, tokens de marque | #1a73e8 |
| RGB / RGBA | Rendu web, superpositions alpha, canvas | rgb(26, 115, 232) |
| HSL / HSLA | Thèmes, éclaircir/assombrir, design systems | hsl(214.5, 82%, 51%) |
| HSV | Sélecteurs de couleur, outils créatifs, edits par valeur | hsv(214.5, 88.8%, 91%) |
| CMYK | Remise approximative à l’impression (dépend de l’appareil) | cmyk(88.8%, 50.4%, 0%, 9%) |
Les valeurs CMYK ici sont une approximation standard RGB↔CMYK de référence — les flux d’impression calibrés nécessitent toujours des profils ICC et des épreuves presse.
Questions fréquemment posées (FAQ)
Comment convertir HEX en RGB ?
Collez un code hex comme #1a73e8 (3, 6 ou 8 chiffres avec alpha). L’outil affiche instantanément rgb(R, G, B) et garde HSL, HSV et CMYK synchronisés pour copier n’importe quel format pour CSS.
Comment convertir RGB en HEX ?
Saisissez les valeurs rouge, vert et bleu de 0–255 (et alpha optionnel). Vous obtenez un code hex à six chiffres — ou huit si alpha est défini — plus les valeurs HSL, HSV et CMYK correspondantes.
Quel ratio de contraste faut-il pour WCAG AA et AAA ?
WCAG 2.1 AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt+ ou 14 pt gras) et les composants d’UI. AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Ce vérificateur affiche Réussi/Échoué pour chaque seuil. En France, le RGAA s’appuie aussi sur ces ratios WCAG.
Qu’est-ce qu’un ratio de contraste WCAG ?
Un ratio de contraste WCAG mesure la différence de luminance entre les couleurs de premier plan et d’arrière-plan, de 1:1 (identiques) à 21:1 (noir sur blanc). Des ratios plus élevés facilitent la lecture pour les personnes malvoyantes.
Puis-je convertir HEX en HSL ou CMYK ?
Oui. Modifiez n’importe quel champ et HEX, RGB, HSL, HSV et CMYK se mettent à jour ensemble. HSL convient aux tokens CSS ; CMYK est une remise approximative utile pour l’impression. En français, RGB est parfois appelé RVB — l’interface conserve RGB pour rester compatible CSS.
Cela sert-il de vérificateur de couleurs accessibles pour l’UI et les icônes ?
Oui. Outre les contrôles AA/AAA du texte, il évalue l’exigence WCAG 2.1 3:1 pour le contraste UI non textuel (bordures, icônes et graphiques) afin que les couleurs interactives ne soient pas oubliées.
Mes données de couleur sont-elles envoyées à un serveur ?
Non. Les conversions de couleurs et les calculs de contraste s’exécutent entièrement dans votre navigateur avec JavaScript. Rien n’est envoyé aux serveurs ToolGenie.
Pourquoi utiliser un convertisseur de couleurs et un vérificateur de contraste combinés ?
La passation design a souvent besoin à la fois de « quelle est la valeur CSS ? » et « cette paire passe-t-elle AA ? ». Une page gratuite côté client évite d’aller-retour entre convertisseurs et outils de contraste séparés.
Conseils pour des choix de couleurs accessibles
- Ne vous fiez pas à la couleur seule. Associez le contraste à des icônes, des libellés ou des motifs pour que le sens survive au daltonisme et aux modes contraste élevé.
- Préférez AA pour le corps de texte (4,5:1) et visez AAA (7:1) sur les surfaces de lecture longue lorsque c’est possible.
- Vérifiez le chrome UI séparément — icônes, bordures et anneaux de focus nécessitent au moins 3:1 par rapport aux couleurs adjacentes.
- Utilisez HSL pour des ajustements systématiques. Variez la luminosité en gardant teinte et saturation stables pour monter vers un ratio conforme sans abandonner la teinte de marque.
- Vérifiez sur les deux thèmes. Une paire qui réussit sur fond blanc peut échouer sur fond sombre — échangez FG/BG et revérifiez.
- Besoin de texte de remplissage pour tester les tailles ? Essayez le générateur de lorem ipsum ou normalisez les noms de tokens avec le convertisseur de casse.