Guide
Bonnes pratiques de contraste pour boutons, liens et texte UI
Règles pratiques de contraste pour les éléments interactifs et les petits textes d'interface.
Les boutons, liens et textes d'aide sont les zones où un faible contraste impacte le plus l'action utilisateur.
Set minimum contrast targets by component type
Define baseline targets for body text, link text, button labels, and meta text.
Shared targets reduce debates and speed up reviews.
Design interactive states as complete sets
Plan default, hover, focus, active, and disabled states together.
A complete state system prevents hidden accessibility failures.
Prioritize link readability in content blocks
Links should remain clear without relying only on color differences.
Use underline or stronger weight where needed for clarity.
Protect small text in dense interfaces
Captions, form hints, and secondary labels often fail first.
Give small UI text extra contrast margin instead of aiming for the bare minimum.
Review with real backgrounds and themes
Test components on cards, tables, banners, and dark/light themes.
One passing pair on white does not guarantee full UI accessibility.
Great for
- Design system standards.
- Component library QA.
- Product interface refresh projects.
Make contrast a component requirement
Define contrast expectations inside component specs so teams do not need to re-decide rules in every sprint.