Palette de couleurs + vérificateur WCAG
Vérifiez les ratios de contraste, la conformité AA/AAA, générez des variantes de palette et exportez des jetons de couleur CSS ou Tailwind v4 localement.
Couleur de premier plan
Couleur de fond
Conversions de la couleur principale
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)Palette générée
Variables CSS
:root {
}Tailwind v4 @theme
@theme {
}Vous venez de tester Palette de couleurs + vérificateur WCAG — Essayez Test de daltonisme ensuite →
Qu'est-ce qu'un vérificateur de contraste de couleurs WCAG ?
Le Color Palette + WCAG Checker calcule le rapport de contraste de luminance relative entre deux couleurs sRGB et le classe selon les directives d'accessibilité du web (WCAG). La formule est fixe : linéariser chaque canal de sRGB en lumière linéaire (L = R*0.2126 + G*0.7152 + B*0.0722 après décodage gamma), puis (L_lighter + 0.05) / (L_darker + 0.05). Le résultat est le rapport de contraste, allant de 1,0 (couleurs identiques) à 21,0 (noir pur sur blanc). WCAG 2.1 fixe trois seuils : 4,5:1 pour le texte courant normal (AA), 3:1 pour le texte large ≥18pt ou 14pt en gras (AA), et 7:1 / 4,5:1 pour les grades AAA plus stricts. WCAG 2.2 (publié en octobre 2023) ajoute une exigence de 3:1 pour les composants UI et les contours de focus visibles qui n'existaient pas dans la version 2.1. Au-delà de la classification, l'outil génère une palette coordonnée — complémentaire, analogue, ombre, teinte — à partir d'une seule couleur de base en espace OKLCH (uniforme perceptuellement contrairement à HSL), et exporte le résultat en tant que propriétés CSS personnalisées ou tokens Tailwind v4 @theme. Une feuille d'échantillons PNG est fournie pour la transmission du design.
Comment utiliser le vérificateur de couleurs WCAG
Entrez une couleur de premier plan et d'arrière-plan au format HEX (#1A73E8 sur #FFFFFF) — le rapport de contraste et les badges réussite/échec pour AA normal (4,5:1), AAA normal (7:1), AA grand (3:1) et AA UI (3:1, WCAG 2.2) apparaissent instantanément. Quand une paire échoue, le suggesteur ajuste le premier plan vers le plus foncé ou le plus clair le long de l'axe de luminance OKLCH tout en préservant la teinte et la saturation, pour que l'identité de la couleur de marque reste intacte. Cliquez sur Utiliser la couleur suggérée pour l'appliquer. L'échec classique au test : texte blanc sur jaune pur #ffff00 (#ffffff premier plan) — le rapport est de 1,07:1, bien en dessous de 3:1, malgré un apparence « à haut contraste » à l'œil nu. Noir sur jaune est 19,55:1, dépassant largement. Sous le vérificateur, le panneau de palette affiche les variantes complémentaires et analogues générées à partir de votre entrée. Copiez les variables CSS, copiez les tokens de thème Tailwind 4, ou téléchargez l'échantillon PNG.
Pourquoi la conformité au contraste de couleurs WCAG compte
La conformité du contraste WCAG est une loi exécutoire en vertu de l'ADA aux États-Unis, de la Directive Accessibilité Européenne (EAA) effective en juin 2025 pour les produits et services vendus dans l'UE, et de la norme EN 301 549 pour les marchés publics. Les amendes en vertu de l'EAA peuvent atteindre de €30 000 à €500 000 selon la juridiction. Au-delà des risques juridiques, le seuil de 4,5:1 correspond approximativement au contraste qu'une personne ayant une vision de 20/40 a besoin pour lire confortablement un texte courant — ce n'est pas un cas de handicap marginal, ce sont la plupart des lecteurs de plus de 40 ans après le jaunissement naturel du cristallin. Concevoir des tokens conformes dès le départ évite le coût de la refonte de l'exécution de correctifs couleur de marque à travers chaque composant. Un piège courant est de juger le contraste à l'œil : les roses de marque et les bleu-vert pâle « semblent lisibles » aux designers avec une vision 20/20 sous éclairage de studio et échouent de 2× sous éclairage fluorescent de bureau. Exécuter le rapport en amont — au stade de la définition des tokens, non à la construction des composants — règle la question par l'arithmétique plutôt que par l'opinion.
Questions fréquentes
Comment fonctionne la suggestion de couleur conforme ?
TeaFun conserve la teinte et la saturation aussi proches que possible de votre couleur de premier plan choisie, puis ajuste la luminosité jusqu'à ce que la paire atteigne au moins le niveau WCAG AA pour le corps de texte.
L'export Tailwind utilise-t-il le nouveau format v4 ?
Oui. L'export utilise des jetons `@theme` avec des valeurs `oklch()` que vous pouvez coller directement dans un projet Tailwind v4.
Puis-je l'utiliser pour du travail client ?
Oui. Le vérificateur fonctionne uniquement dans le navigateur, vous pouvez donc tester les couleurs de marque, exporter des jetons et générer des échantillons PNG sans rien envoyer à un service tiers.
Utiliser cet outil dans un flux plus large
Ces collections regroupent les outils et guides qui reviennent souvent dans le même travail.
Parcourir les mêmes tags
Passez à d'autres outils qui partagent le même flux, format ou cas d'usage.