Aller au contenu

Outil gratuit

Palette couleurs WCAG.

Generez une palette accessible respectant WCAG 2.1 AA depuis une seule couleur. Verifie le contraste sur fond clair et sombre. Variables CSS pretes a copier.

Couleur de base

Au format hexadécimal, par exemple #00d4c8. Les variantes sont calculées automatiquement.

Tester un contraste manuel

Ratio 21.0:1
AA texte normal (4.5:1)PASS
AA grand texte (3:1)PASS
AAA texte normal (7:1)PASS
AAA grand texte (4.5:1)PASS

Palette generee

Cliquez sur une nuance pour copier sa valeur hex.

Fond clair

Texte courant — voici un paragraphe d’exemple pour juger la lisibilité.

Grand texte / titre

Fond sombre

Texte courant — voici un paragraphe d’exemple pour juger la lisibilité.

Grand texte / titre

Variables CSS

 

Une charte graphique complète ?

On cree votre identite visuelle complete : palette, typos, logos, supports.

Questions fréquentes

Tout ce qu'on nous demande.

01 C'est quoi le WCAG, et pourquoi ça compte ?

Les WCAG (Web Content Accessibility Guidelines) sont le standard mondial d'accessibilité numérique. Le niveau AA est le minimum légal dans l'Union européenne depuis l'European Accessibility Act, entré en vigueur en juin 2025. Il demande un contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour les grands caractères, à partir de 18 pt.

02 Est-ce qu'on risque vraiment des poursuites pour un mauvais contraste ?

En Belgique, les boutiques en ligne et les services privés doivent respecter le WCAG 2.1 AA depuis juin 2025. Les sanctions vont jusqu'à 60 000 € d'amende et au retrait du marché. Mais le vrai coût est ailleurs : un visiteur qui n'arrive pas à lire votre texte s'en va, et il ne vous le dira jamais.

03 Comment construire une palette accessible en partant de zéro ?

Choisissez votre couleur principale, celle de votre marque. L'outil en dérive les variantes — claire, foncée, survol — et vérifie que chacune tient le contraste sur fond clair comme sur fond sombre. Les deux, parce qu'une couleur qui passe en mode clair échoue souvent en mode sombre.

04 Comment intégrer cette palette à mon site ?

Copiez les variables CSS dans votre :root. Elles fonctionnent avec Tailwind, du CSS classique, ou n'importe quel autre outil : ce ne sont que des variables natives du navigateur.

Newsletter

Restez dans la boucle.

Une fois par mois maximum. Actus, conseils, retours d'expérience. Zéro spam.

Desabonnement en un clic. Politique de confidentialite