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 Chromoforge.
- 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 être lisible par tous les utilisateurs, y compris ceux ayant une déficience visuelle.
Chromoforge généré des palettes accessibles en suivant un processus rigoureux :
- Étape 1 — Couleur de base : saisissez votre couleur principale (couleur de marque, par exemple). L'outil l'analyse et calcule sa luminance relative.
- Étape 2 — Génération 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.
- Étape 3 — Vérification automatique : chaque combinaison texte/fond est testée. Les paires qui passent AA sont marquées vertes, celles qui échouent sont signalées.
- Étape 4 — Ajustement assisté : pour les paires en échec, l'outil propose automatiquement une version ajustee qui passe le niveau désiré (AA ou AAA).
Résultat : une palette complète ou vous savez exactement quelles couleurs peuvent être utilisées sur quels fonds.
Exemples pratiques
L'accessibilité des couleurs n'est pas optionnelle dans ces contextes :
- Applications gouvernementales et services publics : le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) exige le niveau AA pour tous les sites publics français. Une palette validee évite les non-conformités.
- Composants de design system : documentez quelles combinaisons couleur/fond sont approuvées dans votre Storybook ou Figma pour que l'equipe les utilise correctement.
- Applications médicales et financières : les utilisateurs stresses ou ages ont besoin de contrastes eleves. Visez AAA dans ces domaines.
- Emails HTML : les clients mail affichent parfois les couleurs différemment. Utilisez des contrastes suffisamment eleves pour compenser les variations de rendu.
FAQ — Accessibilité des couleurs
Quelle est la différence 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 façon plus fine. Chromoforge calcule selon WCAG 2.1, le standard actuellement en vigueur et exige par les législations.
Ma couleur de marque échoue le contraste AA sur fond blanc. Que faire ?
Trois options : 1) Assombrissez la couleur jusqu’à passer le ratio (la teinte reste reconnaissable). 2) Utilisez la couleur de marque uniquement en décoration (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. Chromoforge peut calculer la version minimale qui passe AA.
Les images de fond comptent-elles pour le contraste ?
Oui, si du texte est pose sur une image. Évaluez le contraste sur la zone la plus problématique de l'image (zone la plus claire si le texte est sombre). La pratique recommandée est d'ajouter une superposition de couleur semi-opaque entre l'image et le texte pour garantir un contraste constant.