Palette de mode sombre accessible avec contrôle des contrastes WCAG

Prompt

Agis comme designer de design system spécialisé en couleur et en accessibilité (WCAG 2.2).

Contexte :
- Couleurs de marque (hex) : {{couleurs_marque}}
- Produit : {{produit}}
- Surface de base du mode sombre : {{surface}}
- Niveau de conformité visé : {{niveau_wcag}}
- Composants à couvrir : {{composants}}

Livrables :
1. Principes du mode sombre pour ce produit : pourquoi éviter le noir pur sauf sur écran OLED, comment exprimer l'élévation par des surfaces plus claires et comment désaturer les couleurs de marque pour éviter qu'elles ne vibrent.
2. Tableau de tokens sémantiques avec valeurs claire et sombre : fond, surfaces 1 à 3, texte principal, secondaire et désactivé, bordures, primaire et ses états (survol, pressé), anneau de focus, succès, avertissement, erreur, information et leurs couleurs « on » (texte posé sur cette couleur).
3. Tableau de contraste par paire (texte sur fond, texte sur surfaces, texte sur primaire, bordures et focus sur fond) : ratio calculé avec la formule de luminance relative WCAG 2.x, exigence applicable (4,5:1 texte normal, 3:1 grand texte et composants non textuels ; 7:1 et 4,5:1 en AAA) et résultat.
4. Pour chaque paire en échec, une valeur alternative conforme qui respecte l'intention de marque.
5. Couleurs de graphiques (4 à 6 séries) distinguables sur fond sombre sans reposer uniquement sur la teinte.
6. Mise en œuvre : variables CSS, prefers-color-scheme et bascule manuelle avec préférence mémorisée.

Contraintes :
- Montre la formule et les valeurs intermédiaires. Précise clairement que les ratios doivent être vérifiés avec un outil de contraste avant validation.
- Ne transmets jamais une information par la seule couleur ; propose icônes ou texte d'appui.
- S'il manque des couleurs clés (par exemple la couleur d'erreur de la marque), demande-les ; ne présente pas de valeurs inventées comme « officielles ».

Format : tableaux de tokens et de contrastes, liste des corrections et bloc de code CSS.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

:root { --surface-1: #FFFFFF; --text: #101828; --primary-text: #1E5EFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF;
  }
}
[data-theme="dark"] { --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF; }

Informations clés

Catégorie

Design UI/UX · Accessibilité

Type de résultat

Texte

Niveau

Avancé

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Couleurs de marque (hex), Produit, Surface de base, Niveau WCAG et Composants

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes