Générateur de palette accessible WCAG (AA, AAA, Tailwind)

Créez un nuancier design system accessible conforme aux normes WCAG 2.2 avec ratios de contraste en direct et export Tailwind CSS.

Palette de couleurs accessible : contrastes WCAG et exemple

À partir d'une couleur de base, l'outil construit une palette de 5 rôles (fond, primaire, accent, neutre foncé, teinte douce) puis mesure le contraste de chaque teinte sur fond blanc et sur fond sombre #0f172a. Le badge suit les seuils WCAG : 7:1 pour AAA, 4,5:1 pour AA, 3:1 pour le grand texte (badge « AA grand texte »).

La méthode

  • La couleur de base est convertie en TSL (teinte, saturation et luminosité gardées avec leurs décimales ; seul le résultat RGB est arrondi). Chaque harmonie fixe 5 couleurs : en mode complémentaire, fond (même teinte, luminosité 95 %), primaire (luminosité ramenée entre 35 et 65 %), accent (teinte + 180°, luminosité 50 %), neutre foncé (saturation 15 %, luminosité 20 %) et teinte douce de l'accent (92 %).
  • Luminance relative WCAG : chaque canal sRGB c = valeur ÷ 255 est linéarisé (c ÷ 12,92 si c ≤ 0,04045, sinon ((c + 0,055) ÷ 1,055)2,4), puis L = 0,2126 R + 0,7152 V + 0,0722 B.
  • Contraste = (L claire + 0,05) ÷ (L foncée + 0,05).

Exemple recalculé

Base #3b82f6, mode complémentaire (TSL 217,2°, 91,2 %, 59,8 %). La primaire reste #3b82f6, sa luminosité étant déjà comprise entre 35 et 65 % : 3,68:1 sur blanc, donc AA grand texte seulement, et 4,85:1 sur #0f172a (AA). L'accent orange #f29b0d ne tient que sur fond sombre (8,05:1, AAA ; 2,22:1 sur blanc). Le neutre #2b313b atteint 13,08:1 sur blanc.

Limites

  • Seuls deux fonds sont testés ; le contraste entre deux couleurs de la palette n'est pas mesuré. Pour convertir une seule couleur entre HEX, RGB, HSL et CMJN et lire son contraste sur blanc et sur noir, utilisez plutôt le convertisseur de couleurs.
  • Le seuil 3:1 vaut pour le grand texte (18 pt, ou 14 pt en gras) et pour les composants d'interface (critère 1.4.11), pas pour le texte courant.
  • L'export Tailwind reprend les 5 couleurs sous les noms surface, primary, accent, dark et support.

Sources et dates : W3C, WCAG 2.2 (critères 1.4.3, 1.4.6 et 1.4.11, glossaire « relative luminance »), Recommandation du 12/12/2024 ; seuil de linéarisation 0,04045 (0,03928 avant mai 2021, sans effet sur les valeurs 8 bits) (vérifié le 14/10/2026).

Questions fréquentes

Quel contraste faut-il pour du texte selon les WCAG ?

Le niveau AA demande au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte (18 pt, ou 14 pt en gras). Le niveau AAA monte à 7:1 et 4,5:1.

Pourquoi le bleu #3b82f6 n'est-il pas validé AA sur fond blanc ?

Son contraste sur blanc est d'environ 3,7:1, sous le seuil de 4,5:1 du texte courant. Il convient pour un bouton ou un grand titre (3:1), pas pour un paragraphe.

Le blanc sur une couleur vive est-il toujours lisible ?

Non. Le blanc a une luminance relative de 1 : un orange comme #f29b0d n'offre que 2,2:1 avec lui. Sur le fond sombre #0f172a, le même orange atteint 8:1.

Quelle norme WCAG l'outil applique-t-il ?

Les seuils de contraste et la formule de luminance de WCAG 2.2, recommandation W3C du 12 décembre 2024, identiques sur ce point à WCAG 2.1. La linéarisation utilise le seuil 0,04045.

L'outil est-il vraiment gratuit ?

Oui, l'intégralité des outils sur Kristools sont 100% gratuits et accessibles sans inscription.

Mes données sont-elles protégées ?

Oui. Tous les traitements sont effectués directement et en toute sécurité dans votre navigateur. Aucune donnée personnelle n'est envoyée vers nos serveurs.