Palette de couleurs accessible
Concevez des palettes qui gardent le texte lisible et compatibles WCAG.
Ce que couvre cette page
Cette page explique le flux de travail et renvoie directement vers la section correspondante de l’outil principal Chromaforge.
- Générez des palettes depuis une couleur de base.
- Vérifiez le contraste avant de publier du texte UI.
- Exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.
- Fonctionne localement dans le navigateur.
Comment ca fonctionne
Une palette accessible n'est pas simplement belle visuellement : chaque combinaison de couleur de texte et de fond doit satisfaire les ratios de contraste WCAG pour etre lisible par tous les utilisateurs, y compris ceux ayant une deficience visuelle.
Chromaforge généré des palettes accessibles en suivant un processus rigoureux :
- Etape 1 — Couleur de base : saisissez votre couleur principale (couleur de marque, par exemple). L'outil l'analyse et calcule sa luminance relative.
- Etape 2 — Generation des nuances : des variantes plus claires et plus sombres sont g?n?r?es en ajustant la luminosité dans l'espace perceptuel OKLCH pour des transitions visuellement linéaires.
- Etape 3 — Vérification automatique : chaque combinaison texte/fond est testee. Les paires qui passent AA sont marquees vertes, celles qui échouent sont signalees.
- Etape 4 — Ajustement assiste : pour les paires en echec, l'outil propose automatiquement une versión ajustee qui passe le niveau desire (AA ou AAA).
Resultat : une palette complète ou vous savez exactement quelles couleurs peuvent etre utilisees sur quels fonds.
Exemples pratiques
L'accessibilite des couleurs n'est pas optionnelle dans ces contextes :
- Applications gouvernementales et services publics : le RGAA (Referentiel General d'Amelioration de l'Accessibilite) exige le niveau AA pour tous les sites publics francais. Une palette validee evite les non-conformites.
- Composants de design system : documentez quelles combinaisons couleur/fond sont approuvees dans votre Storybook ou Figma pour que l'equipe les utilise correctement.
- Applications medicales et financieres : les utilisateurs stresses ou ages ont besoin de contrastes eleves. Visez AAA dans ces domaines.
- Emails HTML : les clients mail affichent parfois les couleurs differemment. Utilisez des contrastes suffisamment eleves pour compenser les variations de rendu.
FAQ — Accessibilite des couleurs
Quelle est la difference entre WCAG 2.1 et WCAG 3.0 pour le contraste ?
WCAG 2.1 utilise le ratio de contraste base sur la luminance relative (algorithme classique). WCAG 3.0, encore en draft, introduit APCA (Advanced Perceptual Contrast Algorithm) qui tient compte de la taille du texte, du poids de police et du contexte de lecture de facon plus fine. Chromaforge calcule selon WCAG 2.1, le standard actuellement en vigueur et exige par les legislations.
Ma couleur de marque échoue le contraste AA sur fond blanc. Que faire ?
Trois options : 1) Assombrissez la couleur jusqu'a passer le ratio (la teinte reste reconnaissable). 2) Utilisez la couleur de marque uniquement en decoration (fonds, icônes) et pas sur du texte. 3) Créez une variante "text-safe" de votre couleur, légalement plus sombre, dédiée aux textes. Chromaforge peut calculer la versión minimale qui passe AA.
Les images de fond comptent-elles pour le contraste ?
Oui, si du texte est pose sur une image. Evaluez le contraste sur la zone la plus problematique de l'image (zone la plus claire si le texte est sombre). La pratique recommandee est d'ajouter une superposition de couleur semi-opaque entre l'image et le texte pour garantir un contraste constant.
Le daltonisme est-il pris en compte dans les calculs WCAG ?
Les ratios WCAG 2.1 ne testent pas spécifiquement le daltonisme mais un fort ratio de luminance beneficie souvent aussi aux utilisateurs daltoniens. Pour tester spécifiquement le daltonisme, utilisez un simulateur de vision (deuteranopie, protanopie, tritanopie) en complement du vérificateur de contraste.