← Retour à Theming

Mode haute contraste pour l'accessibilité et conformité WCAG

WCAGConformité d'Accessibilité

Ratios de contraste conformes aux standards WCAG 2.1 AAA

7:1
Texte Normal
WCAG AAA
4.5:1
Texte Large
WCAG AAA
3:1
UI Components
WCAG AAA
COLORSPalette Haute Contraste

Couleurs optimisées pour une lisibilité maximale

Mode Clair HC

#000000 - Texte Principal
#FFFFFF - Arrière-plan
#1E3A8A - Liens/Actions

Mode Sombre HC

#FFFFFF - Texte Principal
#000000 - Arrière-plan
#FACC15 - Liens/Actions
CSSImplémentation CSS

Media query et variables pour le mode haute contraste

@media (prefers-contrast: high) {
  :root {
    /* High Contrast Light */
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --primary: 221 83% 23%;
    --primary-foreground: 0 0% 100%;
    --border: 0 0% 0%;
    --ring: 221 83% 23%;
  }

  .dark {
    /* High Contrast Dark */
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --primary: 48 96% 53%;
    --primary-foreground: 0 0% 0%;
    --border: 0 0% 100%;
    --ring: 48 96% 53%;
  }
}
DEMOExemples de Composants HC

Composants optimisés pour le mode haute contraste

Mode Clair HC

Texte avec contraste 7:1

Mode Sombre HC

Texte avec contraste 7:1

A11YFonctionnalités d'Accessibilité

Fonctionnalités avancées pour utilisateurs à besoins spécifiques

🔍 Visibilité

  • • Focus indicators renforcés
  • • Bordures épaisses (4px+)
  • • Shadows contrastées
  • • État hover accentué

⚡ Performance

  • • Animations réduites
  • • Transitions simplifiées
  • • Respect prefers-reduced-motion
  • • Chargement optimisé