Daltonisme : Concevoir des interfaces de couleur accessibles

Le daltonisme (deficience de la vision des couleurs, ou CVD) est cause par une fonction reduite ou absente d'un ou plusieurs des trois types de cellules cones de la retine. Ces cellules photoreceptrices detectent la couleur en conditions de lumiere diurne.

Comment l'oeil detecte la couleur

La retine humaine contient trois types de cellules cones, chacune sensible a une plage de longueurs d'onde differente :

• Cones L (Longs) — sensibilite maximale a ~564 nm (lumiere rouge). Detectent les teintes chaudes.
• Cones M (Moyens) — sensibilite maximale a ~534 nm (lumiere verte). Se chevauchent fortement avec les cones L, ce qui explique pourquoi la confusion rouge-vert est si courante.
• Cones S (Courts) — sensibilite maximale a ~420 nm (lumiere bleue). Beaucoup moins nombreux que les cones L ou M.

La perception des couleurs nait du rapport des signaux entre les trois types de cones. Quand un type est absent ou decale, certaines paires de couleurs produisent le meme rapport de signal et deviennent indiscernables.

Mode de transmission

La plupart du daltonisme est recessif lie a l'X. Les genes codant les photopigments des cones L et M se trouvent sur le chromosome X. Les hommes (XY) n'ont qu'un seul chromosome X, donc une seule copie defectueuse cause le daltonisme. Les femmes (XX) ont besoin de copies defectueuses sur les deux chromosomes X — les rendant beaucoup moins touchees (0,5 % vs 8 % chez les hommes).

La deficience de la vision des couleurs est classee selon le type de cone affecte. La severite va de la trichromasie anomale (sensibilite decalee, legere) a la dichromasie (type de cone absent, severe).

Deuteranopie (faiblesse verte) — ~5 % des hommes

Le type le plus courant. Les cones M (vert) sont absents ou ont une sensibilite decalee. Rouges, verts et bruns paraissent tres similaires — tous decales vers le jaune-brun.

Protanopie (faiblesse rouge) — ~2,5 % des hommes

Les cones L (rouge) sont absents ou decales. Similaire a la deuteranopie dans les couleurs confondues, mais les rouges apparaissent aussi nettement plus sombres.

Tritanopie (bleu-jaune) — <0,01 %

Les cones S (bleu) sont absents ou decales. Bleu et vert peuvent etre confondus ; jaune et rose paraissent similaires. Extremement rare et non liee a l'X.

Monochromasie — extremement rare

Absence complete de toute fonction des cones (achromatopsie). Les personnes atteintes voient entierement en nuances de gris. Tres rare (~1 sur 30 000).

/* Palette problematique — rouge vs vert */
--status-success: #22c55e;
--status-error: #ef4444;

/* Palette accessible — bleu vs orange + icones */
--status-success: #2563eb;  /* bleu */
--status-error: #ea580c;    /* orange */
/* Toujours accompagner de forme : icones coche / X */

Quand la couleur est le seul canal pour transmettre du sens, une portion significative de votre audience recoit des informations degradees ou nulles.

Anti-patterns courants

• Statut feu tricolore — Les indicateurs rouge/ambre/vert paraissent identiques aux deuteranopes.
• Validation de formulaire par couleur seule — Une bordure rouge sur les champs invalides est invisible sans message texte ou icone.
• Graphiques circulaires avec segments rouges et verts — Apparaissent comme une seule couleur sans etiquettes ou motifs.
• Cartes de chaleur (degradees rouge-vert) — Apparaissent comme un jaune-brun uniforme.
• Liens colores sans soulignement — Si les liens ne se distinguent du texte que par la couleur, les daltoniens ne peuvent pas les trouver.
• Badges de couleur sans etiquettes — "Priorite : Haute" comme un point rouge ne signifie rien si rouge et vert se ressemblent.

Mauvais exemple : statut par couleur seule

<!-- La couleur est le seul signal -->
<span style="color: red">Erreur</span>
<span style="color: green">Succes</span>

<!-- Couleur + icone + ARIA -->
<span style="color: #ea580c" role="alert">
  <svg aria-hidden="true">...</svg> Erreur
</span>
<span style="color: #2563eb">
  <svg aria-hidden="true">...</svg> Succes
</span>

La seconde version communique le statut par trois canaux : couleur, forme de l'icone et etiquette texte.

Les WCAG 2.1 definissent des ratios de contraste minimaux pour garantir que texte et elements UI soient perceptibles par les utilisateurs avec des deficiences visuelles.

Seuils de ratio de contraste

• AA texte normal — minimum 4,5:1 (texte inferieur a 18px ou 14px gras)
• AA grand texte (18px+) — minimum 3:1
• AA composants UI et objets graphiques — minimum 3:1
• AAA texte normal — minimum 7:1 (niveau ameliore)
• AAA grand texte — minimum 4,5:1

La formule : (L1 + 0.05) / (L2 + 0.05), ou L1 est la luminance relative de la couleur la plus claire et L2 de la plus sombre.

Formule de luminance relative

La luminance relative se calcule en convertissant les valeurs sRGB en lumiere lineaire : L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

:root {
  /* Conforme WCAG AA — tous les ratios verifies */
  --text-primary: #1a1a2e;     /* 15.4:1 sur blanc */
  --text-secondary: #4a4a5a;   /* 7.2:1 sur blanc */
  --text-link: #1d4ed8;        /* 8.6:1 sur blanc */
  --bg-error: #fef2f2;
  --text-error: #991b1b;       /* 12.1:1 sur #fef2f2 */
}

1. Ne jamais se fier a la couleur seule

Chaque information transmise par la couleur doit avoir un signal redondant : etiquette texte, icone, motif, position ou forme.

2. Utiliser des palettes sures pour les daltoniens

Bleu et orange sont distinguables par pratiquement tous les types de vision des couleurs. Evitez d'associer rouge et vert. Les palettes IBM Design Language et ColorBrewer fournissent des ensembles pre-testes.

3. Ajouter des motifs aux visualisations de donnees

Les barres de graphiques et parts de camembert qui ne different que par la couleur sont inaccessibles :

/* Remplissage a motif pour graphiques */
.bar-a {
  background: #2563eb;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 8px
  );
}
.bar-b {
  background: #ea580c;
}

4. Supporter les modes contraste eleve

Les media queries CSS permettent d'adapter le design :

@media (prefers-contrast: more) {
  :root {
    --border-color: #000;
    --text-muted: #333;
    --focus-ring: 3px solid #000;
  }
}

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }
}

5. Tester avec de vrais utilisateurs

Les outils automatises detectent les echecs de ratio de contraste, mais ne peuvent pas evaluer si l'architecture de l'information repose sur la couleur.

Simulation dans le navigateur

Chrome DevTools inclut un simulateur integre de deficience de vision des couleurs. Ouvrez DevTools (F12), appuyez sur Ctrl+Shift+P, tapez "Rendering", faites defiler jusqu'a Emulate vision deficiencies et selectionnez parmi Deuteranopie, Protanopie, Tritanopie, Achromatopsie ou Vision floue.

Plugins pour outils de design

• Figma — Integre : Menu > View > Color blindness simulation. Le plugin "Color Blind" est egalement disponible.
• Sketch — Le plugin "Stark" offre verification du contraste et simulation de daltonisme.
• Adobe XD — Utilisez le plugin "Include" ou "Stark" pour des previsualisations d'accessibilite.

Audits automatises

• WAVE — Extension navigateur qui signale les erreurs de contraste et textes alt manquants.
• axe DevTools — Audit d'accessibilite complet integre dans Chrome DevTools.
• Lighthouse — Integre dans Chrome. Lancez un audit Accessibilite depuis l'onglet Lighthouse.

Simulation par filtres CSS

Vous pouvez approximer la simulation du daltonisme avec des filtres CSS via un feColorMatrix SVG :

/* Simuler la deuteranopie avec un filtre CSS (approximation) */
.simulate-deuteranopia {
  filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='d'><feColorMatrix values='0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0'/></filter></svg>#d");
}

/* Ou utilisez Chrome DevTools :
   1. Ouvrez DevTools (F12)
   2. Ctrl+Shift+P → "Rendering"
   3. Defilez jusqu'a "Emulate vision deficiencies"
   4. Selectionnez : Deuteranopia / Protanopia / Tritanopia */

Notez que les matrices de filtres CSS sont des approximations. Pour des tests fiables, utilisez la simulation Chrome DevTools ou des outils dedies comme le Simulateur de Daltonisme PixCode.