Guide de contraste des couleurs WCAG
Comprenez les exigences de contraste AA et AAA, comment tester les composants de texte et d'interface utilisateur et comment corriger les paires défaillantes.
FAQ
- De quel rapport ai-je besoin pour les boutons ?
- Les composants de l'interface utilisateur et les objets graphiques nécessitent généralement au moins 3: 1 par rapport aux couleurs adjacentes. Le texte à l’intérieur des boutons nécessite toujours un format 4,5 : 1 (AA) ou 3 : 1 pour le texte volumineux.
Bases du contraste WCAG
WCAG 2.x définit des rapports de contraste minimaux entre les couleurs du texte et de l'arrière-plan. Le niveau AA est la cible juridique et produit commune ; AAA est plus strict et recommandé pour le corps du texte lorsque cela est possible.
Le contraste est basé sur la luminance relative et non sur la teinte. Deux couleurs peuvent paraître différentes mais échouer au contraste si leur luminosité est trop similaire.
Flux de travail de test
Choisissez les couleurs de premier plan et d’arrière-plan dans votre système de conception. Passez-les dans un vérificateur de contraste. Notez les seuils de texte normal et grand.
Testez les états de survol, de mise au point et désactivés, pas seulement les boutons et les liens par défaut.