Palette de couleurs accessible
Générez une palette dans l’outil principal et vérifiez les paires texte/fond prévues. L’export reste disponible même si une paire échoue au contrôle.
Ce guide explique le fonctionnement. Utilisez l’outil principal lié ci-dessous pour générer les couleurs et exporter les fichiers.
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.
Le panneau de contraste présente des combinaisons fortes et faibles. Utilisez le vérificateur manuel pour chaque paire prévue, y compris les couleurs extérieures à la palette.
- É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 — Contraste : Le générateur crée des harmonies et des nuances. Le vérificateur WCAG évalue une paire texte/fond choisie. Utilisez les deux étapes : une palette peut contenir des couleurs décoratives inadaptées au texte courant.
- Étape 4 — Ajustement manuel : choisissez une autre nuance ou modifiez la couleur saisie, puis vérifiez à nouveau la paire.
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 :
- Revue d’accessibilité : documentez chaque paire texte/fond de l’interface et vérifiez-la dans son contexte.
- 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
Quel modèle de contraste utilise Chromoforge ?
Chromoforge utilise le modèle WCAG 2.x basé sur la luminance relative. WCAG 2.2 exige 4,5:1 pour le texte courant AA et 3:1 pour le grand texte AA. L’outil ne calcule pas APCA.
Ma couleur de marque échoue le contraste AA sur fond blanc. Que faire ?
Essayez une nuance plus sombre pour le texte sur blanc, une autre couleur de texte ou réservez la couleur de marque à la décoration. Modifiez la couleur manuellement et vérifiez la paire dans le panneau de contraste.
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.
Continuer avec ces outils
Outils et guides associés
Exemple pratique
Vérifiez ensemble le texte et le fond réels. Un nom de couleur ou un numéro de nuance ne garantit pas un texte lisible.
.button {
background: #E24B4A;
color: #111111; /* AA for normal text: 4.80:1 */
}
/* White on the same coral: 3.93:1, fails normal-text AA. */