Générateur de palette accessible WCAG
Générez une palette de couleurs aléatoires et filtrez celles qui atteignent réellement un ratio de contraste WCAG AA ou AAA avec du texte blanc ou noir. Calcul de luminance et de ratio effectué directement dans votre navigateur.
Comment ça marche
Choisir une palette de marque uniquement pour son esthétique mène souvent à des couleurs qui échouent au test d'accessibilité une fois combinées à du texte. Cet outil tire des couleurs aléatoires, calcule leur luminance relative selon la formule WCAG, puis compare le ratio de contraste obtenu avec du texte blanc et du texte noir pour ne retenir (si vous le souhaitez) que celles qui atteignent le niveau AA ou AAA.
Comment le ratio de contraste est-il calculé ?
Le calcul suit la formule officielle WCAG : chaque couleur est convertie en luminance relative (une mesure de la clarté perçue tenant compte de la sensibilité de l'œil humain à chaque canal rouge, vert et bleu), puis le ratio est obtenu en comparant la luminance de la couleur la plus claire à celle de la plus sombre. Un ratio de 21:1 correspond au contraste maximal possible (noir pur sur blanc pur).
Pourquoi certaines couleurs affichent-elles "texte blanc" et d'autres "texte noir" ?
L'outil calcule le ratio dans les deux sens et retient automatiquement la couleur de texte (blanc ou noir) qui offre le meilleur contraste sur le fond généré : c'est cette combinaison que vous devriez utiliser si vous adoptez cette couleur comme fond dans votre interface.
Tout le calcul de luminance et de contraste s'exécute en JavaScript dans votre navigateur : aucune couleur générée n'est envoyée à un serveur.