Utiliser les propriétés CSS personnalisées pour gérer les thèmes
Découvrez comment les variables CSS simplifient la gestion de deux thèmes et rendent votre code plus maintenable.
Concevoir deux schémas de couleurs cohérents pour votre marque
Maintenir l’identité visuelle en mode clair et sombre avec des palettes complémentaires
Vous avez une marque forte en mode clair. Mais qu’arrive-t-il quand vos utilisateurs basculent en mode sombre ? Les couleurs qui fonctionnaient parfaitement sur fond blanc deviennent illisibles sur fond noir.
C’est là qu’intervient la cohérence de palette. Vous ne pouvez pas simplement inverser vos couleurs et espérer que ça marche. Vos bleus deviennent violets. Vos rouges vifs ressemblent à du rose pâle. Vos utilisateurs ne reconnaissent plus votre marque.
Dans ce guide, nous vous montrons comment concevoir deux palettes qui fonctionnent ensemble — sans perdre l’identité de votre marque. Vous apprendrez les principes du contraste, les techniques de mapping couleur, et comment tester vos choix pour vous assurer qu’ils fonctionnent vraiment.
Ce que vous allez découvrir
- Les règles de contraste qui fonctionnent dans les deux modes
- Comment adapter votre palette sans la dénaturer
- Des outils et techniques de test pratiques
- Les pièges courants et comment les éviter
Comprendre le contraste dans les deux modes
Le contraste n’est pas un concept absolu. Une couleur qui contraste bien sur blanc contraste mal sur noir. C’est pourquoi vous ne pouvez pas réutiliser la même palette.
En mode clair, vous travaillez avec un fond à haute luminosité (blanc ou gris très clair). Vous avez besoin de textes sombres et de couleurs d’accent relativement saturées. Vos utilisateurs voient des contrastes forts qui facilitent la lecture.
En mode sombre, le fond a une faible luminosité (noir ou gris très foncé). Les mêmes couleurs d’accent deviennent trop sombres — elles disparaissent. Vous devez les éclaircir ou les désaturer légèrement pour maintenir le contraste.
Règle WCAG 2.1 AA
Le contraste minimum requis est de 4,5:1 pour le texte normal. Testez vos deux palettes avec un outil de contraste pour vous assurer que vous respectez ce seuil dans les deux modes.
Créer votre palette duale
La meilleure approche ? Commencez par vos couleurs de marque actuelles. Ne les jetez pas. Vous allez les adapter.
Pour chaque couleur, créez une version « sombre ». Cette version doit être plus claire et parfois légèrement désaturée. Par exemple, si votre bleu de marque est
#0066CC
en mode clair, votre version sombre pourrait être
#6BA3FF
— plus clair, mais toujours reconnaissablement bleu.
Ne changez pas la teinte (hue) de manière drastique. Vos utilisateurs doivent sentir que c’est la même marque. Ajustez seulement la luminosité et la saturation.
Technique : HSL pour le mapping
Convertissez vos couleurs en HSL (Teinte, Saturation, Luminosité). C’est plus facile de comprendre comment les ajuster. Gardez la teinte identique, augmentez la luminosité de 20-30%, réduisez légèrement la saturation si nécessaire.
Articles connexes
Tester et valider vos couleurs
La théorie c’est bien. La pratique, c’est mieux. Vous devez tester vos deux palettes réellement. Pas sur votre écran de designer avec des paramètres parfaits. Sur des appareils réels, dans des conditions réelles.
Ouvrez votre site en mode clair sur votre téléphone. Puis basculez en mode sombre. Les textes sont-ils toujours lisibles ? Les boutons ressortent-ils ? Les images ont-elles encore du contraste avec le fond ?
Processus de validation
- 1 Testez le contraste de tous les textes avec WebAIM ou Stark
- 2 Visualisez votre design sur un mobile en vraie grandeur
- 3 Testez avec des simulateurs de daltonisme (Coblis)
- 4 Demandez à des utilisateurs réels leurs retours
Éviter les pièges courants
Beaucoup de designers commettent les mêmes erreurs. Les connaître vous aide à les éviter.
Piège 1 : Inverser simplement les couleurs. Vous avez un fond blanc avec du texte noir. Vous basculez à fond noir avec texte blanc. Mais vos couleurs d’accent ne changent pas. Résultat : elles deviennent invisibles. Vous devez vraiment adapter chaque couleur individuellement.
Piège 2 : Ignorer les couleurs de marque. Vous créez deux palettes complètement différentes pour chaque mode. Mais vos utilisateurs ne reconnaissent plus votre marque. C’est trop extrême. Gardez vos couleurs primaires — ajustez-les seulement.
Piège 3 : Oublier les états (hover, focus). Vous avez créé des couleurs pour l’état normal. Mais qu’en est-il des boutons au survol ? Vous devez aussi adapter ces états pour que le contraste fonctionne dans les deux modes.
À propos de ce guide
Cet article fournit des conseils éducatifs sur la conception de palettes de couleurs cohérentes pour les thèmes clair et sombre. Les recommandations sont basées sur les standards WCAG 2.1 et les bonnes pratiques de l’industrie. Les résultats peuvent varier en fonction de votre contexte spécifique, de votre audience, et de vos outils de test. Nous recommandons de toujours tester vos implémentations avec de vrais utilisateurs et des outils d’accessibilité certifiés.
Récapitulatif : créer une cohérence durable
Concevoir deux schémas de couleurs cohérents n’est pas impossible. Ça demande de la réflexion, mais c’est faisable.
Commencez par comprendre le contraste
Le contraste n’est pas absolu. Les mêmes couleurs ne fonctionnent pas dans les deux modes.
Adaptez, ne changez pas
Gardez vos couleurs de marque. Ajustez leur luminosité et saturation pour le mode sombre.
Testez vraiment
Les outils automatiques sont utiles. Mais le test réel avec de vrais utilisateurs est irrempla çable.
Pensez à tous les cas
Texte normal, texte sur bouton, texte au survol, éléments désactivés — chaque cas a besoin d’attention.
Une bonne palette duale ? C’est quand vos utilisateurs ne remarquent pas les changements de couleur. Tout semble naturel, fluide, reconnaissable. C’est ça, la vraie cohérence.
Prêt à mettre cela en pratique ?
Les prochains articles de cette série vous montrent comment implémenter vos palettes avec les variables CSS et détecter les préférences des utilisateurs.
Lire l’article suivant