Accessibilité chromatique : contraste, daltonisme et WCAG

Utilitaires

Accessibilité chromatique : pas seulement « joli »

Environ 8 % des hommes et 0,5 % des femmes dans le monde ont une déficience de la vision des couleurs — 1 utilisateur sur 12 ne peut pas distinguer normalement certaines couleurs.

Type de déficience chromatique Prévalence Couleurs difficiles à distinguer
Protanopie (cécité au rouge) 1 % Rouge-vert
Deutéranopie (cécité au vert) 5 % Rouge-vert
Tritanopie (cécité au bleu) 0,003 % Bleu-jaune
Achromatopsie (cécité totale aux couleurs) Extrêmement rare Toutes

I. Normes de contraste WCAG

Niveaux de conformité

Niveau Texte normal Grand texte Composants UI
AA ≥ 4,5:1 ≥ 3:1 ≥ 3:1
AAA ≥ 7:1 ≥ 4,5:1 —

Définition du grand texte : ≥ 18pt (24px) ou ≥ 14pt gras (18,66px bold).

Calcul du contraste

Contraste = (L1 + 0,05) / (L2 + 0,05)

L1 = Luminance relative de la couleur la plus claire
L2 = Luminance relative de la couleur la plus sombre

Luminance relative L :
  Pour sRGB où sRGB ≤ 0,03928 : L = sRGB / 12,92
  Pour sRGB où sRGB > 0,03928 : L = ((sRGB + 0,055) / 1,055)^2,4

  sRGB = R/255, G/255, B/255 (calculé par canal)

Contraste des combinaisons courantes

Premier plan Arrière-plan Contraste AA texte normal AA grand texte
#000000 #FFFFFF 21:1 ✅ ✅
#333333 #FFFFFF 12,6:1 ✅ ✅
#666666 #FFFFFF 5,7:1 ✅ ✅
#767676 #FFFFFF 4,5:1 ✅ (juste) ✅
#999999 #FFFFFF 2,8:1 ❌ ❌
#FF0000 #FFFFFF 3,99:1 ❌ ✅
#0000FF #FFFFFF 8,59:1 ✅ ✅

II. Vérification du contraste avec ToolsKu

Étapes de fonctionnement

  1. Ouvrez l'outil de contraste de couleur
  2. Entrez la couleur de premier plan et d'arrière-plan (prend en charge HEX, RGB, HSL)
  3. Consultez les résultats :
    • Rapport de contraste
    • Statut de conformité WCAG AA / AAA
    • Évaluation séparée pour texte normal / grand texte
  4. Ajustez les couleurs jusqu'à conformité

III. Simulation du daltonisme

Simulation avec CSS filter

/* Protanopie */
.protanopia { filter: url('#protanopia'); }

/* Deutéranopie */
.deuteranopia { filter: url('#deuteranopia'); }

/* Tritanopie */
.tritanopia { filter: url('#tritanopia'); }

Matrice de filtre SVG

<svg style="display:none">
  <!-- Matrice de simulation de protanopie -->
  <filter id="protanopia">
    <feColorMatrix type="matrix" values="
      0.567  0.433  0      0  0
      0.558  0.442  0      0  0
      0      0.242  0.758  0  0
      0      0      0      1  0
    "/>
  </filter>

  <!-- Matrice de simulation de deutéranopie -->
  <filter id="deuteranopia">
    <feColorMatrix type="matrix" 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>

IV. Stratégies d'adaptation au daltonisme

Stratégie 1 : Ne pas dépendre uniquement de la couleur pour transmettre l'information

<!-- Incorrect : distinguer les états uniquement par la couleur -->
<span class="status-error" style="color: red">Échoué</span>
<span class="status-success" style="color: green">Réussi</span>

<!-- Correct : couleur + icône -->
<span class="status-error" style="color: red">
  <svg>✕</svg> Échoué
</span>
<span class="status-success" style="color: green">
  <svg>✓</svg> Réussi
</span>

Stratégie 2 : Utiliser des combinaisons de couleurs adaptées aux daltoniens

Combinaison à éviter Combinaison alternative
Rouge + Vert Rouge + Bleu, ou Orange + Bleu
Rouge clair + Vert clair Rouge foncé + Vert clair
Vert succès + Rouge erreur Bleu information + Orange avertissement

Palette adaptée aux daltoniens de Wong

#000000 Noir
#E69F00 Orange
#56B4E9 Bleu ciel
#009E73 Turquoise
#F0E442 Jaune
#0072B2 Bleu
#D55E00 Vermillon
#CC79A7 Rose violet

Cette palette est distinguable sous tous les types de déficiences chromatiques.

Stratégie 3 : Utiliser des textures/motifs dans les graphiques

/* Différentes séries de données utilisent différentes textures */
.series-a { background-image: url('stripes.svg'); }
.series-b { background-image: url('dots.svg'); }
.series-c { background-image: url('crosshatch.svg'); }

V. Accessibilité en mode sombre

Pièges de contraste en mode sombre

Piège Description Solution
Fond noir pur avec texte blanc pur Contraste 21:1, mais provoque une fatigue oculaire Utiliser un fond gris foncé (#1a1a2e)
Réduire la saturation Saturation élevée en mode sombre est éblouissante Réduire la saturation de manière appropriée
Ombres invisibles Les ombres disparaissent sur fond sombre Utiliser des bordures ou une différence de luminance
Contraste insuffisant des images Les détails des images se perdent en mode sombre Ajuster avec CSS filter

Suggestions de couleurs pour le mode sombre

:root {
  /* Mode clair */
  --bg: #ffffff;
  --fg: #1a1a2e;
  --muted: #6b7280;
  --accent: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --fg: #e0e0e0;
    --muted: #9ca3af;
    --accent: #60a5fa; /* Bleu plus clair, maintient le contraste */
  }
}

VI. Vérification de l'accessibilité au niveau des composants

Messages d'erreur dans les formulaires

<!-- Incorrect : seule la bordure rouge comme indication -->
<input style="border: 1px solid red" />

<!-- Correct : bordure + texte + aria -->
<input
  style="border: 1px solid red"
  aria-invalid="true"
  aria-describedby="error-msg"
/>
<span id="error-msg" role="alert" style="color: #dc2626">
  Veuillez entrer une adresse e-mail valide
</span>

Contraste entre les liens et le texte environnant

Les liens ont besoin non seulement d'un contraste suffisant avec l'arrière-plan, mais aussi d'une distinction visuelle avec le texte environnant :

/* Les liens se distinguent non seulement par la couleur, mais aussi par le soulignement */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

VII. Détection automatisée

Intégration avec axe-core

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('accessibilité chromatique', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Audit avec Lighthouse

npx lighthouse https://example.com --only-categories=accessibility

Intégration CI

- name: Accessibility check
  run: npx pa11y https://staging.example.com

VIII. Liste des bonnes pratiques

  1. Contraste du texte ≥ 4,5:1 (texte normal niveau AA)
  2. Ne pas dépendre uniquement de la couleur pour transmettre les informations d'état
  3. Utiliser une palette adaptée aux daltoniens (comme la palette de Wong)
  4. Ajouter des textures/motifs aux graphiques pour la distinction
  5. Maintenir le contraste en mode sombre, éviter le fond noir pur
  6. Les liens ont un soulignement ou une autre distinction non chromatique
  7. Les messages d'erreur ont une description textuelle, pas seulement la couleur rouge
  8. Tests automatisés d'accessibilité intégrés au CI
#无障碍#WCAG#对比度#色盲#色彩设计