Guide couleur pratique
Palette pour mode sombre : contraste, surfaces et UI accessible
Construisez une palette sombre avec surfaces hierarchisees, texte lisible, accents accessibles et variables CSS pratiques.
Ouvrir l outil lieEviter le noir pur partout
Une interface sombre utile combine plusieurs surfaces presque noires au lieu d un fond #000 uniforme. De petites differences de luminosite separent page, navigation, panneaux et controles sans bordures lourdes.
Definir les roles de surface et de texte
Commencez par les tokens page, surface surelevee et surface discrete. Definissez ensuite texte principal, secondaire et desactive. Les noms par role facilitent la maintenance.
- --surface-page et --surface-raised
- --text-primary et --text-muted
- --border-subtle et --focus-ring
Reduire les accents trop lumineux
Une couleur de marque adaptee au blanc peut sembler fluorescente sur fond sombre. Essayez une variante plus claire mais moins chromatique, puis verifiez le contraste.
Tester tous les etats
Controlez normal, hover, active, focus et disabled. Les champs, graphiques, alertes et blocs de code revelent souvent des problemes invisibles dans un simple test texte.
Respecter la preference utilisateur
Utilisez prefers-color-scheme comme choix initial et conservez le choix explicite du visiteur. Alignez color-scheme pour que les controles natifs restent coherents.
References techniques
Ce guide a ete verifie avec les sources primaires suivantes.
Questions frequentes
Le mode sombre doit-il utiliser du noir pur ?
Pas necessairement. Les surfaces presque noires offrent souvent une hierarchie plus confortable.
Les regles WCAG changent-elles en mode sombre ?
Le calcul ne change pas. Testez les vraies valeurs de premier plan et de fond de chaque etat.