Hiérarchie visuelle
Le renard brun rapide saute par-dessus le chien paresseux. La lisibilité est essentielle.
Vérifiez instantanément les rapports de contraste des couleurs et la conformité WCAG 2.1. Collez deux couleurs pour voir si elles respectent les normes AA ou AAA pour le texte normal, le texte large et les composants d'interface. Obtenez des suggestions de correction automatique lorsque vos couleurs ne répondent pas aux exigences d'accessibilité.
Testez selon les normes AA (4,5:1 pour le texte normal, 3:1 pour le texte large) et AAA (7:1 / 4,5:1). Voyez le statut de réussite/échec en un coup d'œil.
Lorsque le contraste échoue, obtenez des ajustements de couleur suggérés qui maintiennent votre intention de conception tout en respectant les normes d'accessibilité.
Voyez à quoi ressemble réellement votre texte sur votre couleur de fond. Prévisualisez le texte normal, le texte large et les éléments d'interface en temps réel.
Saisissez les couleurs en HEX, RGB ou HSL. Le vérificateur gère la conversion automatiquement afin que vous puissiez travailler dans votre format préféré.
Pour WCAG AA : le texte normal nécessite au moins 4,5:1, le texte large (18pt ou 14pt en gras) nécessite au moins 3:1, et les composants d'interface non textuels nécessitent au moins 3:1.
AAA est une norme plus stricte : 7:1 pour le texte normal et 4,5:1 pour le texte large. La plupart des systèmes de conception visent AA comme minimum, avec AAA comme objectif ambitieux.
Non. WCAG 2.1 exige également un contraste de 3:1 pour les composants d'interface (boutons, bordures de champs, icônes) et les objets graphiques qui transmettent un sens.
Environ 8 % des hommes et 0,5 % des femmes présentent une forme de déficience de la vision des couleurs. Un bon contraste garantit que votre contenu est lisible pour tout le monde, y compris les personnes malvoyantes, en plein soleil ou sur des écrans de faible qualité.