Créer une palette sombre sans simplement inverser les couleurs

Commencer par les rôles plutôt que par une inversion

Une inversion automatique modifie mécaniquement chaque canal, alors que le sens d’une interface n’est pas codé dans ces nombres. Une page blanche peut devenir noire tandis que les cartes surélevées, séparateurs, contrôles désactivés, illustrations et états perdent leurs relations. Définissez d’abord des rôles sémantiques : canevas, surface élevée, texte principal, texte secondaire, bordure, accent, danger et focus. Affectez ensuite des valeurs sombres à chaque rôle de façon indépendante. Le code des composants reste stable et la hiérarchie devient contrôlable. Un jeton à la fonction documentée est aussi plus précis qu’un nom indéterminé comme dark-gray-3.

• Prévoyez au moins deux niveaux de surface afin que cartes et superpositions se détachent sans dépendre uniquement des ombres.
• Séparez le texte principal du texte secondaire, puis mesurez chaque rôle sur toutes ses surfaces possibles.
• Réservez les accents aux actions et à l’emphase pour empêcher la décoration de concurrencer les contrôles interactifs.
• Nommez les jetons par fonction, comme text-muted ou border-subtle, afin de modifier les valeurs sans réécrire les composants.

Construire volontairement l’échelle des surfaces

Les surfaces sombres exigent une séparation suffisante pour exprimer l’imbrication, mais de grands écarts de luminance créent des bandes et du bruit visuel. Commencez par le canevas le plus sombre, puis ajoutez des valeurs légèrement plus claires pour les cartes, menus et boîtes de dialogue. Une bordure peut renforcer une limite lorsque deux remplissages voisins sont proches. Les ombres restent possibles, mais elles sont moins visibles sur un fond sombre et ne doivent pas être le seul signal. Testez des compositions imbriquées réelles : dialogue sur la page, menu sur une carte et champ dans un panneau. La comparaison utile porte toujours sur des couleurs rendues adjacentes.

Créer des jetons explicites et déclarer le schéma

Des jetons centralisés rendent le mode sombre vérifiable. Dans cet exemple explicitement sombre, color-scheme: dark demande aux agents utilisateurs compatibles de rendre les contrôles de formulaire et les autres éléments natifs selon un schéma sombre, tandis que les propriétés personnalisées portent les choix de l’application. Seul le schéma sombre est déclaré ici, car les jetons présentés ne contiennent aucun remplacement pour un thème clair. Cette déclaration ne prouve pas l’accessibilité et ne remplace pas les essais de composants. Les valeurs restent un point de départ : typographie, anticrénelage, couleurs voisines et états concrets influencent le résultat. Le bloc de code est identique dans toutes les traductions.

:root {
  color-scheme: dark;
  --surface-0: #101318;
  --surface-1: #181C22;
  --text-primary: #F2F4F7;
  --text-muted: #B8C0CC;
  --border: #46505E;
  --accent: #8AB4F8;
  --focus: #FFD166;
}

Mesurer séparément texte, contrôles et focus

Les exigences WCAG décrivent un contenu et un état précis, pas une note unique attribuée à toute la palette. Le texte ordinaire demande généralement un rapport de contraste d’au moins 4,5:1 selon le critère 1.4.3, tandis qu’un grand texte répondant aux conditions bénéficie d’un seuil de 3:1. Les objets graphiques essentiels et les informations visuelles nécessaires pour identifier les composants relèvent du contraste non textuel. L’apparence du focus possède ses propres exigences dans WCAG 2.2. Mesurez le premier plan par rapport à la couleur directement située derrière lui, y compris au survol, à l’activation, à la sélection, à la désactivation et lors de la validation.

• Mesurez les textes principal et atténué sur chaque surface autorisée, pas seulement sur le canevas de la page.
• Vérifiez icônes et limites lorsqu’elles sont nécessaires pour identifier le contrôle ou comprendre son état.
• Évaluez l’indicateur de focus contre les couleurs qu’il touche, celles du composant et de la surface environnante.
• Après opacité ou mélange, calculez le contraste de la couleur composée finale réellement perçue.
• Testez séparément les états sélectionné, survolé, actif, erroné et désactivé en plus de l’état par défaut.

Maîtriser les accents sans effacer leur fonction

Un accent saturé efficace sur blanc peut vibrer sur une surface presque noire ou échouer lorsqu’il sert de texte. Considérez le remplissage, le texte, l’icône et la bordure comme des paires distinctes. Un lien sur fond sombre peut réclamer un accent plus clair, tandis que le texte d’un bouton rempli par l’accent peut nécessiter un premier plan sombre. La signification d’un état doit aussi passer par le texte, une icône, la position ou un motif lorsque la couleur ne peut pas être l’unique indice. Placez les effets décoratifs derrière le contenu et contrôlez les pixels réels. Pour un dégradé, examinez la zone la moins favorable plutôt que les seuls extrêmes.

Évaluer le thème comme un système complet

Terminez par une matrice de composants plutôt que par l’examen d’une capture. Rendez titres, corps de texte, liens, boutons, champs, tableaux, alertes, graphiques, menus et dialogues sur chaque surface prise en charge. Parcourez l’interface au clavier et examinez le focus avec un zoom normal puis accru. Essayez les couleurs forcées ou les réglages de contraste élevé lorsqu’ils existent et confirmez que la sémantique native transmet toujours l’état. Les contrôles automatiques aident pour les paires stables, mais superpositions, dégradés, anticrénelage et états dynamiques demandent une inspection humaine. Consignez les combinaisons testées près des jetons afin de répéter ces preuves après chaque évolution.

• Inventoriez chaque jeton sémantique et documentez les surfaces ou composants dans lesquels son emploi est permis.
• Produisez une matrice couvrant les états par défaut, survolé, focalisé, actif, sélectionné, désactivé et validé.
• Exécutez des calculs déterministes pour les paires de couleurs unies et joignez les mesures à la revue de conception.
• Testez clavier, zoom et appareils réels avant publication, puis recommencez lorsque les jetons partagés changent.