Convertisseur de couleur et de contraste
À propos de cet outil
Saisissez une couleur en HEX, RGB, HSL ou HSV et consultez les valeurs équivalentes dans les autres formats. Vous pouvez aussi choisir les couleurs du texte et de l'arrière-plan et vérifier si leur contraste respecte les exigences WCAG AA ou AAA pour le texte normal et le grand texte.
Mode d'emploi
- Conversion bidirectionnelle HEX, RGB, HSL, HSV
- Aperçu de couleur en direct
- Calculateur de ratio de contraste WCAG
- Indicateurs de réussite AA et AAA
- Copier n'importe quel format en un clic
- Saisissez une couleur: Tapez #hex, rgb(), hsl() ou utilisez le sélecteur.
- Consultez les conversions: Copiez le format nécessaire pour votre CSS ou votre système de jetons de conception.
- Vérifiez le contraste: Définissez les couleurs de texte et d'arrière-plan pour valider la lisibilité.
Exemples
- Valider le contraste d'une palette de marque pour la conformité WCAG AA
- Convertir les valeurs HEX de Figma en hsl() pour les utiliser dans des variables CSS
- Vérifier les couleurs du texte en mode sombre
- Documenter les nuances de couleur d'un système de design
Limites
- La prise en charge de la transparence est limitée dans l'aperçu du contraste
- La précision du sélecteur dépend de la calibration de l'écran
- Les valeurs de couleur saisies sont traitées directement dans votre navigateur et ne sont envoyées à aucun serveur.
FAQ
- Quel ratio de contraste réussit WCAG AA ?
- Le texte normal nécessite 4,5:1 ; le grand texte (18pt+ ou 14pt gras) nécessite 3:1.
- HSL contre HSV ?
- La luminosité HSL diffère de la valeur HSV ; les deux sont affichées pour correspondre à la convention de votre outil.
- La transparence influence-t-elle le contraste ?
- Oui. Le contraste réel d'un texte semi-transparent dépend de l'arrière-plan situé en dessous. L'aperçu simplifié utilise principalement des couleurs opaques.