L’accessibilité numérique : concevoir pour tous

Ce que vous saurez faire à la fin

1. Comprendre la roue chromatique et les harmonies de couleurs
2. Distinguer teinte, saturation, luminosité et appliquer le modèle HSL
3. Choisir une couleur primaire alignée avec le positionnement de la marque
4. Construire une palette complète primaire, secondaire, neutres et accent
5. Vérifier le contraste WCAG pour l’accessibilité du web
6. Déployer la palette dans Figma et dans des tokens CSS pour le code

Durée : 5h. Pré-requis : savoir utiliser Figma ou Adobe Illustrator, comprendre les bases des codes hexadécimaux et RGB, avoir un projet de marque ou de site à habiller, disposer d’une connexion pour utiliser Coolors, Realtime Colors et Stark, prévoir 0 FCFA (tous les outils de cette session sont gratuits ou freemium).

Étape 1 — Comprendre la roue chromatique

La roue chromatique de Newton organise les 12 teintes principales en cercle : 3 primaires (rouge, jaune, bleu), 3 secondaires (orange, vert, violet) et 6 tertiaires. Sur cette base, on définit les harmonies : monochromatique (variations d’une seule teinte), analogue (3 teintes voisines), complémentaire (2 teintes opposées), triadique (3 teintes équidistantes) et split-complémentaire (1 teinte + 2 voisines de son opposée). Aucun outil ne remplace cette compréhension : sans elle, vos palettes seront du hasard.

Étape 2 — Maîtriser le modèle HSL plutôt que HEX

HEX (#FF6A3D) est un format d’écriture, pas un modèle de pensée. Pour raisonner couleurs, basculez en HSL (Hue, Saturation, Lightness). Hue est la teinte de 0 à 360 degrés. Saturation est l’intensité de 0 à 100 %. Lightness est la clarté de 0 à 100 %. En HSL, vous pouvez créer une variation d’une couleur en gardant la teinte et en modifiant uniquement la luminosité. Tous vos outils modernes (Figma, Tailwind, Chrome DevTools) acceptent HSL.

EXEMPLE HSL POUR UNE MARQUE TECH

Couleur primaire : hsl(220, 90%, 55%) -- bleu vif
Variation 100 (claire) : hsl(220, 90%, 95%)
Variation 300 : hsl(220, 90%, 80%)
Variation 500 (base) : hsl(220, 90%, 55%)
Variation 700 : hsl(220, 90%, 35%)
Variation 900 (sombre) : hsl(220, 90%, 15%)

Étape 3 — Définir la psychologie associée à votre marque

Chaque famille de couleurs porte des connotations culturelles. Au Sénégal et en Afrique de l’Ouest, ces associations s’ajoutent au socle universel.

Étape 4 — Choisir la couleur primaire en 3 critères

La primaire est la couleur que les utilisateurs associeront à votre marque dans 3 ans. Trois filtres avant de la valider : 1) elle ne doit pas être déjà occupée par un concurrent direct (vert clair = Wave au Sénégal), 2) elle doit fonctionner sur fond clair ET sur fond sombre, 3) elle doit avoir suffisamment de saturation pour rester reconnaissable en petite taille. Pour valider le critère 2, ouvrez votre couleur dans Figma et placez-la successivement sur #FFFFFF puis sur #0E0E0E.

Étape 5 — Construire l’échelle tonale (5 à 10 nuances)

Une couleur unique ne fait pas une palette. Vous avez besoin d’une échelle pour les états (hover, disabled), les fonds, les bordures et les textes. Le standard Tailwind avec 11 paliers (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) est devenu la référence. Le palier 500 est votre base, les paliers inférieurs sont les versions claires, les paliers supérieurs sont les versions sombres.

ÉCHELLE TONALE TYPE TAILWIND POUR ORANGE

50  : #FFF7ED  (presque blanc, fond très clair)
100 : #FFEDD5
200 : #FED7AA
300 : #FDBA74
400 : #FB923C
500 : #F97316  -- BASE
600 : #EA580C
700 : #C2410C
800 : #9A3412
900 : #7C2D12
950 : #431407

Étape 6 — Ajouter les neutres (gris)

Les neutres représentent 70 à 80 % de la surface visible d’une interface. Choisissez une famille : gris purs (hue 0, sat 0), gris chauds teintés vers le rouge (hue 30, sat 5), ou gris froids teintés vers le bleu (hue 220, sat 5). Les gris froids vont avec les marques tech, les chauds vont avec la mode et le bien-être. Construisez la même échelle 50 à 950 pour vos neutres : ce sont eux qui structurent vos pages.

Étape 7 — Définir les couleurs sémantiques

Tout produit numérique a besoin de 4 couleurs de feedback indépendantes de la marque : success, warning, danger, info. Ces couleurs doivent être universellement reconnaissables (vert, jaune, rouge, bleu). N’inventez pas un rouge marketing pour les erreurs : vos utilisateurs s’attendent à un vrai rouge.

Étape 8 — Vérifier les contrastes WCAG

L’accessibilité n’est pas optionnelle. WCAG 2.1 impose un ratio de contraste de 4.5:1 minimum entre un texte normal et son fond, 3:1 pour les textes larges (18 pt et plus). Utilisez Stark dans Figma, ou WebAIM Contrast Checker en ligne. Si votre marque impose un orange clair sur blanc et que le ratio tombe à 2:1, vous DEVEZ utiliser une nuance plus sombre pour le texte (le palier 700 ou 800 de votre échelle), tout en gardant le palier 500 pour les boutons.

Étape 9 — Tester la palette en daltonisme

8 % des hommes et 0,5 % des femmes ont un déficit de vision des couleurs. Si votre seul indicateur de différence entre deux états est rouge vs vert, vous excluez une partie de vos utilisateurs. Téléchargez l’extension Chrome Colorblindly ou utilisez Figma plugin Color Blind, et testez votre interface en deuteranopia, protanopia, tritanopia. Ajoutez systématiquement un second indicateur (icône, texte) en plus de la couleur.

Étape 10 — Construire la palette complète documentée

Synthèse de la palette à livrer pour un projet PME.

PALETTE COMPLÈTE EXEMPLE

PRIMAIRE (orange) : 50 à 950 (11 paliers)
SECONDAIRE (vert kaki) : 50 à 950
ACCENT (rose vif) : 100 à 700
NEUTRES (gris chauds) : 50 à 950
SÉMANTIQUE : success, warning, danger, info
SURFACES :
  background : #FFFFFF
  surface-1 : #FAFAF9
  surface-2 : #F5F5F4
  surface-elevated : #FFFFFF + ombre
TEXTE :
  text-primary : #1C1917 (gris 900)
  text-secondary : #57534E (gris 600)
  text-disabled : #A8A29E (gris 400)
  text-inverse : #FAFAF9 (sur fond sombre)

Étape 11 — Implémenter dans Figma avec les Variables

Depuis 2023, Figma propose les Variables qui remplacent les anciens Color Styles. Créez une collection nommée Brand Tokens, ajoutez chaque couleur en variable, regroupez-les par dossier (primary, neutral, semantic). Utilisez ensuite ces variables dans tous vos composants. Lorsque vous changerez la primaire, l’intégralité de la maquette se mettra à jour. Activez en plus les modes light et dark dans la même collection pour préparer le thème sombre.

Étape 12 — Exporter en tokens CSS pour le code

Pour que les développeurs n’aient pas à recopier vos HEX manuellement, exportez vos variables en tokens CSS dans un fichier dédié.

/* tokens.css */
:root {
  --color-primary-50: #FFF7ED;
  --color-primary-500: #F97316;
  --color-primary-700: #C2410C;

  --color-neutral-50: #FAFAF9;
  --color-neutral-900: #1C1917;

  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;
  --color-info: #0EA5E9;

  --bg-default: var(--color-neutral-50);
  --text-default: var(--color-neutral-900);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-default: var(--color-neutral-900);
    --text-default: var(--color-neutral-50);
  }
}

Étape 13 — Outils gratuits à intégrer dans votre workflow

Voici les outils que vous utiliserez quotidiennement, tous accessibles gratuitement.

Étape 14 — Documenter dans le brand book

Ajoutez à votre brand book une page couleurs propre. Pour chaque couleur, indiquez : nom (Orange Téranga par exemple), HEX, RGB, CMJN pour l’impression, Pantone si disponible, contexte d’usage (boutons primaires, fonds, bordures), exemples interdits (jamais sur fond rouge, jamais sous 4.5:1 de contraste). Cette page protège la cohérence de la marque dans la durée et évite que le commercial improvise une fausse couleur sur un PowerPoint.

Erreurs fréquentes

• Choisir une primaire identique à un concurrent local : confusion garantie.
• Travailler en HEX uniquement et perdre la logique tonale.
• Ignorer le contraste : interface jolie mais inaccessible.
• Utiliser uniquement la couleur pour distinguer success/danger : exclut les daltoniens.
• Ne pas créer d’échelle tonale : impossibilité de gérer les états hover et disabled.
• Oublier les neutres : interface qui crie de partout.
• Aligner les sémantiques sur la marque (rouge marketing pour erreurs) : confusion utilisateur.
• Livrer la palette sans tokens CSS : les développeurs réinventeront.
• Tester la palette uniquement sur Figma fond blanc : effondrement en mode sombre.
• Ne pas documenter dans le brand book : massacre de marque dans 6 mois.

Checklist avant livraison palette

• Couleur primaire validée vs concurrents locaux.
• Échelle tonale 50 à 950 pour la primaire.
• Couleur secondaire et accent définies.
• Échelle neutres complète (gris chauds ou froids).
• 4 couleurs sémantiques (success, warning, danger, info) standards.
• Tous les ratios texte/fond passent WCAG 4.5:1 minimum.
• Palette testée en daltonisme avec un second indicateur visuel.
• Variables Figma créées et nommées proprement.
• Tokens CSS exportés dans un fichier tokens.css.
• Page couleurs documentée dans le brand book.
• Versions HEX, RGB, CMJN et Pantone fournies.
• Mode clair et mode sombre prévus.