Sélecteur de couleurs et vérificateur de contraste
Choisissez les couleurs de premier plan et d’arrière-plan et vérifiez le contraste entre elles avant d’expédier. L'aperçu montre la paire sous forme de texte réel, vous pouvez donc juger directement de la lisibilité au lieu de deviner à partir de codes hexadécimaux.
Live Text Contrast Preview
Sample paragraph text demonstrating visual contrast between selected text and background colors.
13.98 : 1
Comment ça marche
- 1
Choisissez une couleur de premier plan (texte).
- 2
Choisissez la couleur d’arrière-plan sur laquelle il reposera.
- 3
Lisez l'aperçu sous forme de texte réel à des tailles réelles plutôt que sous forme de deux échantillons.
- 4
Copiez les valeurs dans votre feuille de style, votre fichier de jeton de conception ou votre configuration de thème.
Avantages et avantages clés
Jugé dans son contexte
Les couleurs sont affichées sous forme de texte sur un arrière-plan, ce qui est le seul moyen de voir si une association est réellement lisible.
Orienté vers l'accessibilité
Les problèmes de contraste deviennent évidents avant qu'ils n'atteignent les utilisateurs ou un audit d'accessibilité.
Valeurs prêtes à copier
Prenez les valeurs hexadécimales directement dans CSS, un fichier de jeton de conception ou un thème de bibliothèque de composants.
Itération instantanée
Ajustez l'une ou l'autre couleur et voyez l'effet immédiatement, sans construction ni rechargement.
Pourquoi les gens l’utilisent
- Vérifier l'association des couleurs d'une marque avant qu'elle n'arrive dans un système de conception.
- Correction du texte à faible contraste signalé dans un phare ou un rapport d'accessibilité.
- Choisir des couleurs de lien et de corps lisibles pour un thème clair et sombre.
- Documenter une paire de couleurs dans un guide de style avec les valeurs hexadécimales exactes.
Formats et options pris en charge
| Entrée de couleur | Valeurs hexadécimales via le sélecteur de couleurs natif ou saisie directe |
|---|---|
| Aperçu | Exemple de texte en direct au premier plan sur arrière-plan |
Confidentialité et traitement des données
La sélection et l'aperçu des couleurs s'effectuent entièrement dans la page. Aucune valeur n'est envoyée à un serveur ou stockée au-delà de l'onglet actuel.
Limites et choses à savoir
- Les exigences de contraste dépendent de la taille et du poids du texte : un texte volumineux a un seuil inférieur à celui du corps du texte, alors jugez l'association en fonction de la taille que vous utiliserez réellement.
- L’outil vérifie une seule paire de premier plan et d’arrière-plan. Le texte sur une image ou un dégradé présente une gamme de contrastes et doit être comparé à la pire partie.
- Les choix de couleurs affectent également les utilisateurs ayant des déficiences de vision des couleurs ; ne comptez jamais uniquement sur la teinte pour véhiculer un sens.
Dépannage
La couleur est différente dans l'application qu'ici
L'opacité, les modes de fusion et un arrière-plan parent peuvent tous modifier la couleur rendue. Comparez la couleur calculée dans les outils de développement du navigateur plutôt que celle déclarée.
Le sélecteur ne s'ouvre pas
L’entrée de couleur native nécessite un navigateur prenant en charge input type=color. Tapez la valeur hexadécimale directement si l'échantillon ne s'ouvre pas.
Online Color Picker — HEX, RGB & HSL Converter
Pick a colour and get its HEX, RGB, HSL and CSS values instantly, or pull an exact colour out of an uploaded image. A free online color picker and converter for web design, brand palettes and CSS work.
- HEX, RGB and HSL together — every format is shown at once and stays in sync, so you can copy whichever one your stylesheet, design tool or brand guide expects.
- Color picker from image — upload a screenshot, logo or photograph and sample the exact pixel value — the reliable way to match an existing brand colour.
- CSS-ready output — values copy in valid CSS syntax, ready to paste into a custom property, a Tailwind config or a component style.
- Build consistent palettes — adjust hue, saturation and lightness numerically to derive tints and shades that actually belong to the same colour family.
- Images stay on your device — sampling happens on a canvas in your browser, so unreleased mockups and client artwork are never uploaded.
Free with no sign-up. Turn a chosen colour into a frosted CSS panel with the Glassmorphism Generator.
Questions fréquemment posées
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). Judge the pairing at the size you will actually ship, since the threshold changes with it.
Why does the colour look different in my app?
Opacity, blend modes and a parent background all shift the rendered result. Check the computed colour in browser devtools rather than the value you declared.
Is contrast enough for accessibility?
It is necessary, not sufficient. Also avoid using colour alone to convey meaning — add an icon, label or pattern so the information survives for users who cannot distinguish the hues.
Qu’est-ce qu’un bon rapport de contraste WCAG ?
Un rapport de contraste de 4,5:1 est requis pour le texte normal selon les normes WCAG AA.
De quel rapport de contraste ai-je besoin ?
WCAG AA demande 4,5:1 pour le corps du texte et 3:1 pour le texte de grande taille (environ 24 px ou 19 px en gras). Jugez l'appariement en fonction de la taille que vous expédierez réellement, car le seuil change avec celle-ci.
Pourquoi la couleur est-elle différente dans mon application ?
L'opacité, les modes de fusion et un arrière-plan parent modifient tous le résultat rendu. Vérifiez la couleur calculée dans les outils de développement du navigateur plutôt que la valeur que vous avez déclarée.
Le contraste est-il suffisant pour l’accessibilité ?
C’est nécessaire, pas suffisant. Évitez également d'utiliser la couleur seule pour transmettre une signification : ajoutez une icône, une étiquette ou un motif afin que les informations survivent pour les utilisateurs qui ne peuvent pas distinguer les teintes.
Outils associés
Générateur de Glassmorphisme CSS
Générez des effets d'interface utilisateur en verre modernes et du code CSS
Générateur de codes QR
Transformez n'importe quel lien ou texte en un code QR scannable
Balise méta et générateur OpenGraph
Générez des balises méta SEO pour Google, Facebook et Twitter
Générateur de hachage SHA256 et MD5
Générez des hachages cryptographiques SHA-256, SHA-512 et MD5