Centre de Connaissances & Guide
Calculateur de Contraste de Couleur WCAG 2.1 et Accessibilité Web
Calculateur de Contraste de Couleur WCAG 2.1 et Accessibilité Web
Cet outil fonctionne à 100% côté client dans votre navigateur. Vos codes sources, jetons d'accès, clés API et données sensibles ne quittent jamais votre appareil.
Formule & Méthode de Calcul
Rapport de contraste = (L1 + 0.05) / (L2 + 0.05)
Où L1 est la luminance relative de la couleur la plus claire et L2 la luminance de la couleur la plus sombre. Le rapport résultant va de 1:1 (aucun contraste, blanc sur blanc) à 21:1 (contraste maximal, noir sur blanc).
Bonnes Pratiques & Conseils
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
Foire Aux Questions
Qu'est-ce que le niveau AAA des WCAG ?
Le niveau AAA est la norme d'accessibilité la plus stricte, exigeant un ratio de contraste de 7:1 pour le texte normal. Il n'est généralement imposé que pour des logiciels gouvernementaux ou médicaux hautement spécialisés.
Le contraste s'applique-t-il aux éléments d'interface non textuels ?
Oui. Les WCAG 2.1 ont introduit une exigence de ratio de contraste minimal de 3:1 pour les « composants d'interface utilisateur et objets graphiques », ce qui signifie que les bordures de champs de saisie et les arrière-plans de boutons doivent également contraster avec la page.
Pourquoi mes couleurs grises pures échouent-elles au test de contraste ?
Les gris moyens purs (comme #808080) placés sur un fond blanc pur oscillent généralement autour d'un ratio de 3,9:1, ce qui échoue strictement à l'exigence de 4,5:1 pour le corps de texte. Vous devez les assombrir.