Concevoir un système de couleurs accessible : contraste, états, mode sombre et variables CSS

Choisir trois jolies couleurs de marque est facile. En faire une interface fiable l’est moins. Il faut du texte lisible, des boutons reconnaissables, un focus clavier visible, des messages d’état compréhensibles et un thème sombre qui ne se perde pas dans des gris trop proches. Vous pouvez traiter ces besoins de façon systématique plutôt que de choisir chaque code hexadécimal isolément.

Ce guide part d’une petite palette, la transforme en variables CSS nommées selon leur rôle, puis vérifie les associations que les visiteurs verront réellement. Le Studio de couleurs permet d’explorer les couleurs et leurs rapports de contraste WCAG. Sa présentation sur le blog explique les fonctions de palette, de conversion, de nuances et d’export.

Séparer les couleurs de la palette des rôles de l’interface

Une palette indique quelles couleurs vont ensemble. Un système de couleurs précise à quoi sert chacune d’elles. Cette distinction devient utile lors d’une refonte ou de l’ajout d’un thème sombre.

Dans les règles des composants, partez de rôles plutôt que de noms comme --blue-500 :

• --surface et --surface-raised pour les fonds de page et de carte.
• --text et --text-muted pour le texte principal et secondaire.
• --link pour les liens de navigation.
• --action-bg et --action-text pour les boutons principaux.
• --border et --focus pour les limites des composants et la navigation au clavier.
• --error et --success pour les messages, accompagnés d’un texte visible ou d’un autre indice qui transmet le sens sans dépendre de la couleur.

Une couleur d’accent peut attirer l’attention tout en étant inadaptée à du petit texte blanc. Ne supposez pas que la couleur de marque convient automatiquement au fond des boutons, aux liens, au contour de focus et aux graphiques.

Vérifier le contraste là où les couleurs se rencontrent

Le niveau AA des WCAG 2.2 demande généralement un rapport de contraste minimal de 4,5:1 pour le texte courant et de 3:1 pour le grand texte. Le grand texte correspond à au moins 18 pt (24 px CSS), ou 14 pt en gras (environ 18,67 px CSS) ; un titre n’entre pas dans cette catégorie simplement parce qu’il semble important. Certaines limites essentielles de l’interface et certains éléments graphiques significatifs doivent aussi atteindre 3:1 avec les couleurs adjacentes, selon le critère de contraste non textuel.

Pour une vérification pratique, préparez un petit tableau :

Ce sont des points de contrôle, pas un audit d’accessibilité complet. Vérifiez les états réellement affichés : survol, focus, sélection, désactivation, erreur de validation et mode de contraste élevé. Les contrôles inactifs sont exemptés de ces critères de contraste textuel et non textuel, mais leurs libellés devraient rester compréhensibles. Un bouton sombre peut convenir sur du blanc et disparaître sur un panneau sombre.

Utilisez le vérificateur de contraste du Studio de couleurs pour évaluer les paires, puis vérifiez la page finale avec les outils d’accessibilité du navigateur et, si possible, au clavier et avec des technologies d’assistance. Consultez les WCAG 2.2 en français  pour les exigences détaillées ; le texte original en anglais  fait foi.

Créer des variables CSS nommées selon leur rôle

Voici un point de départ compact. Ces valeurs servent d’exemple : elles ne constituent pas un ensemble de paires de contraste certifiées. Validez les associations que vous utilisez réellement.

:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-raised: #f5f7fb;
  --text: #172033;
  --text-muted: #46536a;
  --border: #6a7689;
  --action-bg: #174a8b;
  --action-text: #ffffff;
  --link: #164a86;
  --focus: #c24b14;
}

a {
  color: var(--link);
  text-decoration: underline;
}

body {
  background: var(--surface);
  color: var(--text);
}

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.button-primary {
  background: var(--action-bg);
  color: var(--action-text);
  border: 2px solid transparent;
  border-radius: 0.4rem;
  padding: 0.7rem 1rem;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

Appliquez .button-primary à un <button> natif pour une action, ou à un <a> doté d’un href pour une navigation. Gardez les liens dans le texte soulignés afin que la couleur ne soit pas leur seul signe distinctif. L’exemple couvre les couleurs de base et le focus ; ajoutez les états de survol, de sélection et de validation nécessaires à vos composants.

L’intérêt se voit à l’entretien du site. Si un client change sa couleur de marque, vous modifiez les variables et revérifiez les paires de rôles au lieu de chercher dans des centaines de déclarations. Si un composant a besoin d’un contour de focus contrasté sur deux surfaces différentes, créez une seconde variable de focus plutôt que d’imposer la même couleur partout.

Pour des cartes et formulaires réalistes, remplissez votre maquette avec le générateur de Lorem Ipsum. Ses longueurs variées et ses listes HTML font apparaître des problèmes de retour à la ligne et d’espacement qu’un seul titre court peut masquer.

Ajouter un thème sombre sans simplement inverser les couleurs

Un thème sombre repose sur un autre ensemble de relations entre les rôles. Inverser mécaniquement la luminosité peut transformer un thème clair discret en thème sombre éblouissant, surtout avec des accents saturés et des bordures subtiles.

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #111723;
    --surface-raised: #1c2635;
    --text: #f3f6fc;
    --text-muted: #c6d0de;
    --border: #93a0b3;
    --action-bg: #b9d6ff;
    --action-text: #0e223c;
    --link: #b5d5ff;
    --focus: #ffd071;
  }
}

Examinez des captures et manipulez les contrôles dans les deux modes. Les champs natifs et les barres de défilement peuvent réagir à color-scheme, mais cela ne remplace pas la vérification de vos composants personnalisés. Si vous proposez un sélecteur de thème manuel, permettez-lui de prendre le pas sur la préférence du système et de mémoriser le choix du visiteur sans empêcher l’accès à la page.

Le Studio de couleurs convertit entre HEX, RGB, HSL, Oklab et OKLCH, ce qui facilite les essais de clarté et de chroma. Une couleur OKLCH peut toutefois sortir du gamut sRGB utilisé pour l’affichage : inspectez le résultat rendu plutôt que de supposer que la conversion numérique conserve tous les tons vifs.

Ne pas faire de la couleur le seul message

Imaginez un champ d’inscription avec une bordure rouge mais aucun message d’erreur. Une personne qui ne distingue pas cette couleur risque de ne pas comprendre pourquoi l’envoi a échoué. Un message comme “Saisissez une adresse e-mail valide”, associé au champ dans le balisage, est plus robuste. Le même principe vaut pour les confirmations, les séries d’un graphique et les statuts d’un tableau.

Essayez les états d’erreur et de réussite dans des conditions d’affichage neutres ou monochromes. Si toutes les couleurs disparaissaient, saurait-on encore ce qui s’est passé ? Sinon, ajoutez des mots, des formes, des libellés ou des icônes qui transmettent le sens indépendamment.

Lorsqu’une icône accompagne un texte visible, masquez le symbole décoratif aux technologies d’assistance pour éviter les annonces en double. Donnez un nom accessible pertinent aux contrôles constitués d’une icône seule, et préférez du texte visible pour les actions importantes. Notre guide des sprites CSS modernes explique la distinction entre images décoratives et contrôles porteurs de sens. Pour un exemple de confirmation et d’erreur qui dépasse le simple changement de couleur, consultez Créer un bouton de copie dans le presse-papiers accessible à tous.

Tester le focus et les modes de contraste élevé de Windows

La navigation au clavier demande une indication visible du focus. Parcourez la page avec Tab et Maj+Tab, depuis l’en-tête jusque dans les boîtes de dialogue et les formulaires. Un contour :focus-visible doit rester reconnaissable sur les liens, les boutons pleins et les cartes pouvant recevoir le focus, dans les deux thèmes. Vérifiez que les en-têtes fixes et les éléments superposés ne masquent pas le contrôle actif. Évitez de remplacer le contour du navigateur par une ombre à peine visible.

Les réglages de contraste élevé de Windows peuvent conduire le navigateur à remplacer de nombreuses couleurs définies par le site. Les limites importantes qui reposent uniquement sur des fonds colorés ou des ombres peuvent alors disparaître. Testez dans un environnement de couleurs forcées ; pour certains cas, les mots-clés de couleurs système comme Canvas, CanvasText ou Highlight sont utiles. Il vaut généralement mieux laisser le navigateur adapter les couleurs que désactiver ce comportement avec forced-color-adjust: none.

Testez aussi les dégradés, les éléments semi-transparents et les images derrière le texte. Un vérificateur qui compare deux couleurs unies ne garantit pas la lisibilité sur chaque pixel d’une photo. Préférez un panneau de texte uni ou suffisamment opaque lorsque le fond varie.

Vérifier une vraie page avant la mise en ligne

Avant de publier un nouveau thème, examinez une petite page réelle plutôt qu’une palette seule. Incluez un titre, deux paragraphes, un lien, un libellé de champ et son erreur, un bouton actif et un bouton inactif, une bordure de carte et un élément ayant le focus. Répétez la vérification en mode clair, en mode sombre, à 200 % de zoom et en contraste élevé si ce mode est disponible. Vérifiez ensuite la navigation au clavier et la clarté des annonces du lecteur d’écran.

Un bon système de couleurs n’est pas une collection de codes hexadécimaux parfaits. C’est un petit ensemble documenté de rôles qui reste utilisable quand le contenu, les appareils et les préférences des visiteurs changent.

Envie d’essayer avec votre couleur de marque ? Ouvrez le Studio de couleurs, vérifiez quelques paires de texte et de fond réelles, puis exportez la palette en variables CSS. Associez ensuite ces valeurs aux rôles de votre feuille de style.