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.

Tous les calculs de couleur s'exécutent localement dans votre navigateur. Aucun téléversement, aucun compte, aucune donnée de conception ne quitte votre appareil.

Couleur de premier plan

Couleur de fond

Ratio de contraste 4.51:1

AA corps de texte Réussi

AAA corps de texte Échec

AA grand texte Réussi

Tester pour le daltonisme

Conversions de la couleur principale

HEX #1A73E8

RGB rgb(26, 115, 232)

HSL hsl(214 82% 51%)

OKLCH oklch(0.574 0.195 257.9)

Palette générée

#1A73E8

Principale

#E88F1A

Complémentaire

#1ADAE8

Analogue à gauche

#281AE8

Analogue à droite

#0F4A97

Ombre

#6DA6F0

Teinte

Variables CSS

:root {
  --color-primary: #1A73E8;
  --color-background: #FFFFFF;
  --color-accessible: #1A73E8;
  --color-complementary: #E88F1A;
  --color-analogous-left: #1ADAE8;
  --color-analogous-right: #281AE8;
  --color-shade: #0F4A97;
  --color-tint: #6DA6F0;
}

Tailwind v4 @theme

@theme {
  --color-primary: oklch(0.574 0.195 257.9);
  --color-background: oklch(1.000 0.000 89.9);
  --color-accessible: oklch(0.574 0.195 257.9);
  --color-complementary: oklch(0.727 0.156 65.4);
  --color-analogous-left: oklch(0.811 0.135 203.2);
  --color-analogous-right: oklch(0.443 0.276 269.2);
  --color-shade: oklch(0.421 0.139 257.6);
  --color-tint: oklch(0.717 0.124 255.4);
}

Qu'est-ce qu'un vérificateur de contraste de couleurs WCAG ?

Le vérificateur Palette de Couleurs + WCAG évalue les paires de couleurs premier-plan/arrière-plan par rapport aux exigences de rapport de contraste des Web Content Accessibility Guidelines (WCAG 2.1). Il rapporte le rapport de contraste exact, le statut de réussite/échec pour la conformité AA et AAA à la fois pour les tailles de texte standard et grand, et suggère la couleur conforme la plus proche lorsque votre paire échoue. Au-delà de la vérification de contraste, l'outil génère une palette de couleurs complète — variantes complémentaires, analogues, ombres et teintes — à partir de votre couleur principale et les exporte sous forme de propriétés personnalisées CSS ou de jetons Tailwind v4 @theme utilisant des valeurs oklch(). Vous pouvez également télécharger une feuille d'échantillons PNG pour le transfert au design. Tout le calcul s'exécute localement sans service tiers impliqué.

Comment utiliser le vérificateur de couleurs WCAG

Entrez une couleur de premier-plan et d'arrière-plan sous forme de valeurs HEX (par ex. #1A73E8 sur #FFFFFF). Le vérificateur affiche instantanément le rapport de contraste et les badges de réussite/échec pour le texte standard WCAG AA (4,5:1), le texte standard AAA (7:1) et le grand texte AA (3:1). Si la paire échoue, l'outil suggère la couleur de premier-plan conforme la plus proche qui préserve votre teinte et saturation d'origine. Cliquez sur « Utiliser la couleur suggérée » pour l'appliquer. Sous le vérificateur, parcourez les variantes de palette générées, copiez les variables CSS ou les jetons de thème Tailwind v4 et téléchargez un échantillon PNG pour le partage avec les designers.

Pourquoi la conformité au contraste de couleurs WCAG compte

Les exigences de contraste WCAG 2.1 ne sont pas des directives facultatives — ce sont des exigences légales dans de nombreuses juridictions sous l'ADA (États-Unis), l'EAA (UE) et EN 301 549 (Europe). Ne pas respecter les ratios de contraste AA signifie que certains utilisateurs ne peuvent physiquement pas lire votre texte, et cela expose votre organisation à des poursuites pour accessibilité. Les systèmes de design qui intègrent la conformité WCAG dès le départ évitent des refontes coûteuses. Vérifier le contraste pendant la phase des jetons de design — avant que les composants ne soient construits — est bien moins cher que d'auditer un produit livré. Exporter des jetons conformes directement sous forme de variables CSS ou de valeurs Tailwind v4 @theme comble l'écart entre l'intention de design et le code de production.

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.

Parcourir les mêmes tags

Passez à d'autres outils qui partagent le même flux, format ou cas d'usage.