appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/frComment vérifier le contraste du texte d'une couleur choisie avant de l'utiliser dans une interfaceLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Apprenez à vérifier le ratio de contraste WCAG et à ajuster les couleurs en HSL pour une interface toujours accessible et lisible.
DesignarticleAppStoryoPourquoi le contraste est crucialEnviron 300 millions de personnes dans le monde souffrent d'une forme de déficience visuelle des couleurs. Concevoir avec un bon contraste n'est pas qu'esthétique : dans de nombreuses régions, c'est une obligation légale. Le standard de référence est WCAG 2.1, qui définit :
Niveau AA : ratio de contraste de 4,5:1 pour le texte normal et 3:1 pour le texte large.
Niveau AAA : 7:1 pour le texte normal.
Erreurs courantesLes plus fréquentes sont : gris clair sur blanc (ratio parfois aussi bas que 1,5:1), boutons colorés avec texte blanc qui semblent lisibles mais échouent au AA, ou couleurs qui passent en mode clair mais échouent en mode sombre.
Flux de travail pratiqueCapturez la couleur de fond. Ouvrez Color Picker Camera: HEX RGB, pointez la caméra vers la surface et appuyez pour obtenir la valeur HEX immédiatement. L'application affiche aussi le HSL, utile pour l'étape suivante.
Capturez la couleur du texte de la même façon.
Vérifiez la paire dans un outil de contraste comme WebAIM Contrast Checker, le panneau Accessibilité dans les DevTools ou le plugin Contrast dans Figma.
Ajustez la luminosité en HSL jusqu'à passer le seuil. Gardez le H et le S, abaissez le L pour assombrir sans changer l'identité visuelle de la couleur.
Pourquoi HSL est idéal pour ajuster le contrasteRGB et HEX ne donnent pas de contrôle intuitif sur la luminosité. HSL sépare la teinte, la saturation et la luminosité. Color Picker Camera: HEX RGB affiche HEX, RGB, HSL et CMYK simultanément — sans conversions manuelles.
Exemple concretUn bouton bleu moyen (#4A90E2) avec texte blanc affiche un contraste d'environ 3,1:1, insuffisant pour le AA. En passant à un bleu marine foncé (#1A3A6B), le ratio monte à 9,4:1, dépassant même le AAA.
Note sur WCAG 3.0 et APCALa prochaine version des directives introduit l'APCA, un modèle de contraste perceptuel plus nuancé. WCAG 2.1 AA reste le standard applicable aujourd'hui, mais tester contre l'APCA vaut la peine si vous construisez quelque chose sur le long terme.
Téléchargez Color Picker Camera: HEX RGB gratuitement sur iOS ou Android — sans publicité, sans pistage, et l’appli fonctionne entièrement hors ligne.