Créer une palette de couleurs lisible pour le mode clair

Définir une hiérarchie de surfaces mesurée

Commencez avec un canevas et une ou deux surfaces de panneau. Le blanc pur peut servir de panneau tandis qu’un neutre légèrement plus sombre distingue le fond de page, mais chaque presque-blanc supplémentaire crée une différence à apprendre et à tester. Attribuez des rôles comme canvas, panel, raised panel ou selected region. Ne fondez pas la hiérarchie seulement sur de minuscules écarts RGB qui disparaissent sur un autre écran ou sous des reflets. Espacement, regroupement, titres, bordures et élévation doivent renforcer la structure. Documentez les jetons de premier plan autorisés sur chaque surface avant toute combinaison arbitraire.

Les surfaces neutres ne doivent pas être parfaitement achromatiques, mais toute teinte doit être intentionnelle et cohérente. Une orientation chaude ou froide modifie la relation avec bordures, ombres, images et accent. Vérifiez la palette sur des écrans ordinaires et calibrés sans promettre une perception identique à tous. N’utilisez pas une surface teintée comme unique signal de succès, avertissement ou erreur. L’agent utilisateur peut remplacer les couleurs en mode forced-colors : HTML sémantique et structure visible doivent survivre. Le thème reste compréhensible lorsque les différences décoratives de fond sont réduites.

Garantir la lisibilité des niveaux de texte

Définissez du texte principal, secondaire, atténué et inversé seulement si chaque niveau possède un usage documenté. Le principal porte le contenu, le secondaire le soutient, l’atténué convient parfois aux métadonnées mais garde un contraste suffisant à sa taille et graisse réelles. Le critère WCAG 2.2 1.4.3 demande au moins 4,5:1 pour le texte normal et 3:1 pour le texte agrandi selon sa définition, avec des exceptions précises. Une étiquette n’est pas exemptée parce que la maquette la qualifie de subtile. Le placeholder communique aussi une information et ne doit pas être l’unique étiquette d’un champ.

:root {
  --surface-canvas: #f8fafc;
  --surface-panel: #ffffff;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --border-default: #cbd5e1;
  --accent: #4338ca;
  --focus-ring: #2563eb;
}

Donner un vrai rôle aux bordures et à l’élévation

Les bordures séparent des panneaux, identifient les champs ou décorent. L’exigence dépend de leur fonction. Le contraste non textuel WCAG demande 3:1 avec les couleurs adjacentes pour les informations visuelles nécessaires à l’identification des composants et états, avec des exceptions définies. Un séparateur décoratif diffère de l’unique contour visible d’un champ. N’assombrissez pas toutes les lignes automatiquement : identifiez les limites essentielles et fournissez une preuve. L’élévation et les ombres aident au regroupement, mais une ombre douce peut disparaître en contraste élevé, à l’impression, au zoom ou sous une forte lumière.

• Surfaces canvas, panel et raised avec paires de texte documentées.
• Texte principal, secondaire et atténué lié à des rôles précis.
• Bordures essentielles et focus vérifiés face aux couleurs adjacentes.
• Paires accent/on-accent et variantes d’accent sur surface.

Traiter l’accent comme des rôles appariés

Un accent n’est pas une valeur universellement valide. Traitez le fond accent et son premier plan on-accent comme une paire testée, puis testez séparément texte ou icône accentué sur une surface claire. Une couleur saturée adaptée au fond d’un gros bouton peut échouer comme petit texte sur blanc. Les liens demandent une indication reconnaissable en contexte, avec les états de survol et visité si nécessaire ; la couleur seule peut être insuffisante. Les statuts utilisent aussi texte, icône, libellé ou motif. Une action destructive se distingue par son libellé et son interaction, pas uniquement par une teinte rouge.

Concevoir focus et états interactifs

Le focus clavier doit être visible. Son anneau contraste avec les couleurs adjacentes dans chaque état, ne se trouve pas coupé par overflow et ne se réduit pas à un changement subtil de nuance. :focus-visible peut adapter l’indicateur à la modalité d’entrée tout en conservant une solution de repli conforme à la politique de navigateurs. Les états de survol, actif, sélectionné, désactivé et de validation ont besoin de paires réfléchies. Certains critères prévoient des exceptions pour les éléments inactifs, mais réduire systématiquement le contraste nuit à la lecture. N’appliquez pas un style de désactivation à une information encore nécessaire pour comprendre la tâche.

.card {
  color: var(--text-primary);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
}

.control:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

Mesurer après composition

Les calculs de contraste utilisent les couleurs finales rendues. Si le texte ou la bordure a un alpha, composez-le d’abord sur la surface réelle puis calculez la luminance relative. Un panneau translucide sur une image crée de nombreux fonds ; une mesure sur blanc seul n’est pas représentative. Pour un dégradé, vérifiez les points pertinents sous le contenu. L’anticrénelage peut rendre une fonte fine visuellement plus claire, même si le calcul de conformité porte sur les couleurs spécifiées ; la revue pratique inspecte la typographie au zoom normal. Conservez valeurs sources et rapport reproductible.

• Mesurez le texte normal selon le critère 4,5:1 lorsqu’il s’applique.
• Mesurez grand texte et limites non textuelles essentielles selon les critères 3:1 applicables.
• Composez tout premier plan translucide sur son fond réel.
• Inspectez les états de focus, de survol, de sélection, de désactivation, d’erreur et forced-colors.

Valider le thème dans des écrans complets

Validez des écrans complets, pas seulement une page de jetons. Couvrez formulaires, tableaux, navigation, dialogues, états vides, erreurs, sélections, ordre de focus, zoom et longues chaînes localisées. Après les règles automatiques, examinez manuellement images, dégradés, transparence, icônes et sémantique. Essayez une forte lumière ambiante, une différenciation chromatique réduite, forced-colors et l’agrandissement du texte sans prétendre qu’une simulation reproduit tous les handicaps. Documentez chaque échec avec la paire et l’état exacts. Le thème est prêt lorsque rôles et contenu essentiel restent perceptibles.