Outil gratuit

Générateur de palette de couleurs accessible

Générez gratuitement une palette de couleurs harmonieuse et vérifiez instantanément le contraste de chaque nuance selon les seuils WCAG et RGAA.

En Bref

  • Une palette n'est « accessible » que si les combinaisons texte/fond réellement utilisées respectent RGAA 3.2 (WCAG 1.4.3) : 4,5:1 pour le texte normal, 3:1 pour le grand texte (24 px ou plus, 18,5 px ou plus en gras).
  • Les composants d'interface et graphiques porteurs d'information (icônes, bordures actives) exigent aussi 3:1 (RGAA 3.3 / WCAG 1.4.11).
  • Couleur de marque et couleur de texte sont deux usages distincts : une teinte peut rester en aplat de marque tout en étant remplacée par une nuance plus foncée ou plus claire dès qu'elle porte du texte.
  • Exportez les nuances validées en tokens (variables CSS, config Tailwind, JSON) pour éviter les valeurs hexadécimales dupliquées à la main ; revérifiez le contraste dès qu'un token est réutilisé face à un nouveau fond.

Définir la couleur

Choisissez votre couleur principale. Nous générons automatiquement une harmonie monochrome, avec le contraste de chaque nuance sur blanc et sur noir.

Aperçu de la palette

Contraste texte normal (≥ 4,5:1) En dessous de 4,5:1

Ces ratios comparent chaque nuance au blanc et au noir. Le seuil AA du RGAA (critère 3.2) est de 4,5:1 pour le texte normal et 3:1 pour le grand texte (≥ 24px, ou ≥ 18,5px en gras) ; les composants d'interface (critère 3.3) relèvent aussi de 3:1. Le niveau AAA (7:1) est un renfort WCAG non exigé par le RGAA. Vérifiez toujours la paire de couleurs réellement utilisée dans votre interface.

Exporter le code

:root {

}

Qu'est-ce qu'une palette accessible ?

Une palette de couleurs n'est jamais « accessible » en soi. Ce qui compte, c'est le contraste de chaque paire texte/fond réellement utilisée dans l'interface. Le critère 3.2 du RGAA (aligné sur le critère de succès WCAG 1.4.3) exige un ratio minimum de 4,5:1 pour le texte normal et de 3:1pour le grand texte (24 px ou plus, ou 18,5 px ou plus en gras). Le critère 3.3 (WCAG 1.4.11) impose le même seuil de 3:1 pour les composants d'interface et graphiques porteurs d'information : icônes fonctionnelles, bordures de champ à l'état actif, pictogrammes d'alerte.

Ce générateur part d'une seule couleur de base, souvent votre couleur de marque, et calcule une échelle de nuances du plus clair au plus foncé. Pour chaque nuance, il affiche son ratio de contraste face au blanc et au noir : vous identifiez ainsi immédiatement quelles nuances peuvent porter du texte lisible, et lesquelles ne conviennent qu'à un fond, une bordure ou un état décoratif.

Une fois la palette générée, revérifiez systématiquement les paires effectivement présentes dans vos maquettes (texte sur fond de carte, bouton au survol, badge d'état) avec notre calculateur de contraste : le blanc et le noir servent de repères, pas de garantie universelle pour toutes vos combinaisons réelles.

Palette et design system : les tokens de couleur

Une charte graphique impose souvent une teinte précise pour le logo ou les éléments de marque, mais cette même teinte ne convient pas toujours comme couleur de texte. La bonne pratique consiste à dériver, à partir de cette couleur de marque, une échelle de nuances dont chacune a un usage défini : fond très clair, texte principal, état survol ou focus, fond sombre pour le thème dark.

  • Texte sur fond coloré : privilégiez les nuances foncées (700-900) sur les nuances claires (50-200) pour obtenir un ratio généralement suffisant, à confirmer avec les ratios affichés ci-dessus.
  • États interactifs : prévoyez des nuances distinctes, déjà vérifiées, pour le survol (hover) et le focus.
  • Mode sombre : la même échelle peut s'adapter à un thème sombre, à condition de revérifier les contrastes propres à ce thème.

Exportez ensuite la palette en variables CSS, configuration Tailwind ou JSON, pour que chaque composant référence la même source de vérité plutôt qu'une valeur hexadécimale dupliquée à la main. Le contraste doit néanmoins être revérifié dès que le token est employé face à un nouveau fond.

Questions fréquentes

Allez plus loin dans l'accessibilité

Cet outil cible les palettes de couleurs, un aspect parmi d'autres de l'accessibilité. Lancez un audit complet gratuit pour analyser les 106 critères du RGAA.

Scanner mon site gratuitement

Outils complémentaires

Continuez votre démarche d'accessibilité avec ces outils gratuits, dans la même thématique.