Vérifie le contraste des couleurs selon WCAG AA et AAA. Corrections en un clic qui passent — texte normal, texte large et composants UI.
Couleur du texte (premier plan)
Couleur d'arrière-plan
—:1
Ratio de contraste
Aperçu — texte sur arrière-plan
Le renard rapide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ceci est du texte de corps à 14px pour vérifier le contraste des petits textes.
Bouton
Aperçu — inversé
Le renard rapide
Même texte et arrière-plan, inversés. Certaines paires de couleurs ne marchent que dans un seul sens.
Bouton
Corrections rapides — couleurs validantes les plus proches
À propos du contraste WCAG
AA est le standard légal dans la plupart des juridictions : 4.5:1 pour le texte normal, 3:1 pour le grand texte (18pt+ ou 14pt gras).
AAA est "renforcé" : 7:1 normal, 4.5:1 grand. Vise ça pour le corps de texte si tu peux.
Les composants UI (boutons, bordures de formulaire, icônes) ont besoin de 3:1 contre leur couleur adjacente — comme le grand texte.
Méfie-toi du sens porté uniquement par la couleur. Associe la couleur à une icône, un soulignement ou un label pour que les utilisateurs daltoniens aient aussi le signal.
Apple HIG et Material exigent tous les deux un minimum de 4.5:1 pour le texte dans ton app — échouer là-dessus est un signal de revue d'accessibilité App Store connu.
Besoin de captures d'app accessibles aussi ?
LaunchShots embarque des indicateurs de contraste intégrés dans l'éditeur — essaie.