palette de couleurs accessible · WCAG 2.2 · contraste · indices redondants
Comment créer une palette de couleurs accessible
Transformez les couleurs de marque en rôles d’interface, testez les paires réellement adjacentes, préservez le focus et les états visibles, puis utilisez la simulation comme aide et non comme preuve unique.
palette de couleurs accessible
Qu’est-ce qui rend une palette de couleurs accessible ?
Une palette de couleurs accessible est un ensemble de couleurs affectées à des rôles dont les vraies combinaisons de texte, fond, contrôle, focus et graphique sont testées selon leur usage. Pour le niveau AA de WCAG 2.2, le texte normal demande généralement au moins 4,5:1, le grand texte 3:1 et l’information visuelle nécessaire pour identifier un contrôle actif ou un graphique pertinent 3:1 face aux couleurs adjacentes. La couleur ne doit pas être le seul indice. Chaque jeton doit avoir une mission, chaque paire atteindre son seuil sans arrondi, et les erreurs, liens, sélections et séries doivent aussi employer texte, forme, motif ou position.
Quatre règles pour une palette de couleurs accessible
- palette de couleurs accessible: attribuez d’abord des rôles sémantiques : canevas, surface, texte principal, accent, bordure, focus, succès, avertissement et erreur
- palette de couleurs accessible: mesurez chaque premier plan contre le fond réellement adjacent, y compris au survol, au focus, en sélection, en superposition et en thème sombre
- palette de couleurs accessible: traitez 4,5:1 et 3:1 comme des seuils minimaux non arrondis et gardez une marge pour les polices fines et les écrans réels
- palette de couleurs accessible: répétez le sens par libellé, icône, soulignement, forme, motif ou position afin que la teinte ne soit jamais l’unique instruction
palette de couleurs accessible: Contrôles WCAG 2.2 selon le rôle d’interface
| Usage d’interface | Paire à mesurer | Cible niveau AA | Note pratique |
|---|---|---|---|
| Texte normal · palette de couleurs accessible | texte contre son fond rendu | au moins 4,5:1 | 4,499:1 ne peut pas être arrondi vers la réussite |
| Grand texte · palette de couleurs accessible | grand texte contre son fond | au moins 3:1 | au moins 18 pt normal ou 14 pt gras, avec une taille équivalente pour les polices CJK |
| Contrôles actifs et graphiques utiles · palette de couleurs accessible | indice requis contre les couleurs adjacentes | au moins 3:1 | vérifiez bordures, icônes, focus, sélection et marques de données porteuses de sens |
| Information codée par couleur · palette de couleurs accessible | sens restant en plus de la teinte | un indice visible non chromatique | ajoutez texte, forme, motif, soulignement, icône ou position, même si les couleurs contrastent |
palette de couleurs accessible: Commencer par les rôles plutôt que par les teintes préférées
Une palette de marque décrit une identité ; une palette de couleurs accessible décrit des décisions. Inventoriez d’abord le canevas, la surface surélevée, les textes principal et secondaire, le lien, l’accent, la bordure, l’anneau de focus, le traitement inactif, puis les retours succès, avertissement et erreur. Donnez un jeton stable à chaque rôle au lieu de disperser des valeurs HEX dans les composants. Notez ensuite quels rôles se touchent. Le texte principal peut vivre sur la page et sur une carte ; une bordure d’erreur peut jouxter le champ et l’arrière-plan. Cette carte évite de tout tester sur blanc alors que le produit emploie panneaux teintés, transparence, images, dégradés et mode sombre. Une couleur de marque peut rester disponible pour la décoration tout en étant interdite pour le texte ou les contrôles si elle ne remplit pas ces fonctions en sécurité.
palette de couleurs accessible: Construire une matrice pour textes, contrôles et états
Testez les combinaisons, pas les couleurs isolées. Pour le texte, consignez premier plan, fond rendu, taille, graisse et état. Pour les contrôles, incluez l’information nécessaire pour repérer le composant et comprendre focus, coche, sélection, ouverture, invalidité et survol. WCAG exempte les composants inactifs de la règle de contraste non textuel, mais le produit peut encore garder ses états désactivés lisibles et reconnaissables. Mesurez les transparences après composition et le point crédible le plus défavorable pour un texte sur image ou dégradé. Conservez les résultats avec les jetons afin qu’un changement de thème ne casse pas silencieusement la palette de couleurs accessible. La matrice révèle aussi les variantes inutiles : si deux gris ont le même rôle et qu’un seul réussit sur toutes les surfaces, le système le plus petit est souvent plus sûr.
palette de couleurs accessible: Séparer contraste de luminance et sens codé par la couleur
Le contraste et l’usage de la couleur répondent à deux questions différentes. Une pastille verte de succès peut avoir un excellent texte et échouer si seul le vert la distingue d’une erreur rouge. Gardez la couleur, puis ajoutez mot, icône, motif ou structure qui survit au gris et aux variations de perception. Les liens dans un paragraphe gagnent à être soulignés. Les graphiques peuvent employer libellés directs, formes de points, styles de ligne et motifs lorsque l’identité des séries compte. Le focus doit rester visible sans reconnaître le nom d’une teinte. Les couleurs complémentaires ou éloignées sur une roue ne sont pas automatiquement accessibles : la distance de teinte ne garantit ni la luminance relative ni un deuxième indice. La palette de couleurs accessible fournit la base ; le contenu et le composant terminent la communication.
Liste de contrôle d’une palette de couleurs accessible
- palette de couleurs accessible: nommez chaque nuance par rôle sémantique et documentez les surfaces et états où ce rôle est autorisé
- palette de couleurs accessible: mesurez le texte normal à 4,5:1 ou plus et le grand texte à 3:1 ou plus contre le fond rendu
- palette de couleurs accessible: mesurez bordures actives, focus, états et graphiques nécessaires à 3:1 contre les couleurs adjacentes
- palette de couleurs accessible: vérifiez états normal, survol, focus, actif, sélectionné, invalide, désactivé, superposé, sombre et fort zoom
- palette de couleurs accessible: ajoutez libellé, forme, icône, motif, soulignement ou position quand la couleur transmet statut ou identité
- palette de couleurs accessible: conservez matrice, résultat d’outil, version du composant et date afin de retester les changements
palette de couleurs accessible: Créer et vérifier la palette en quatre étapes
palette de couleurs accessible: 1. Recenser les rôles
palette de couleurs accessible: listez textes, surfaces, bordures, contrôles, focus, données et retours, puis notez les contacts par thème et état.
palette de couleurs accessible: 2. Générer des candidats
palette de couleurs accessible: explorez des options cohérentes avec l’outil d’harmonie, en séparant préférence de marque et critères de contraste.
palette de couleurs accessible: 3. Mesurer la matrice
palette de couleurs accessible: contrôlez les vrais premiers plans et fonds sans arrondi ; remplacez ou limitez tout jeton sous son seuil attribué.
palette de couleurs accessible: 4. Examiner tous les états
palette de couleurs accessible: simulez plusieurs visions, inspectez gris et focus clavier, puis testez de vrais composants sur ordinateur et mobile.
palette de couleurs accessible: Ce que WCAG 2.2 établit réellement
- palette de couleurs accessible: Le critère 1.4.3 fixe 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA, définit le grand format à 18 pt normal ou 14 pt gras au minimum et interdit d’arrondir les seuils. Lire W3C Understanding SC 1.4.3
- palette de couleurs accessible: Le critère 1.4.11 exige au moins 3:1 face aux couleurs adjacentes pour l’information visuelle nécessaire aux contrôles actifs, à leurs états et aux objets graphiques significatifs. Lire W3C Understanding SC 1.4.11
- palette de couleurs accessible: Le critère 1.4.1 demande une solution visible supplémentaire quand la couleur transmet information, action, réponse ou distinction ; reconnaître une couleur exacte exige un autre indice même avec 3:1. Lire W3C Understanding SC 1.4.1
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
Questions sur une palette de couleurs accessible
Toutes les couleurs doivent-elles contraster entre elles ?
palette de couleurs accessible: Non. Testez les paires réellement destinées à se toucher et leur fonction. Le texte principal peut devoir réussir sur plusieurs surfaces, tandis qu’un accent décoratif ne porte ni texte ni contrôle. Documentez les restrictions pour éviter une réutilisation non testée. Une matrice de paires est plus exacte qu’une étiquette conforme ou non conforme sur une nuance isolée.
Les couleurs complémentaires sont-elles automatiquement accessibles ?
palette de couleurs accessible: Non. Des positions opposées sur une roue décrivent une relation de teinte, pas un résultat WCAG. Deux complémentaires vives peuvent avoir une luminance proche, rendre le texte difficile ou se confondre pour certaines visions. Générez des candidats harmonieux, puis mesurez leur contraste et ajoutez des indices non chromatiques.
Un simulateur de daltonisme prouve-t-il la conformité WCAG ?
palette de couleurs accessible: Non. La simulation aide à regarder ; elle ne remplace ni diagnostic, ni calcul de conformité, ni personnes handicapées. Mesurez les paires requises avec un outil déterministe, inspectez indices redondants et états complets, puis ajoutez une évaluation experte ou utilisateur selon le risque.