Vérifier une capture dont vous n'avez pas la source — landing marketing, UI concurrente, PDF. Auditer un logo sur un fond photo chargé où la "couleur de fond" n'est pas une valeur unique. Vérifier le pire cas de contraste le long d'un dégradé ou derrière du texte translucide. Comparer rapidement deux états UI (p. ex. bouton repos vs hover) sans refaire le design.

Anti-aliasing. Les bords de texte se moyennent à des couleurs hors design intent. Cliquez au milieu d'un trait de lettre, pas sur son bord. Compression JPEG. Les images très compressées dérivent en couleur dans les zones plates. La moyenne 5×5 lisse ça. Calques translucides. Ce qui compte pour le contraste est le pixel rendu, pas la couleur source. Cet outil lit le pixel rendu — exactement ce que vous voulez. Vous vérifiez les couleurs, pas l'intent. Si votre bouton passe AA au repos mais échoue au hover sur une autre capture, les deux états sont des bugs a11y. Mise à l'échelle. L'outil réduit les grandes images pour la performance. Le pixel échantillonné reflète le pixel affiché ; pour un sampling pixel-perfect d'un petit élément, croppez avant l'upload.

Vérificateur de contraste sur image

Cliquez deux points dans une image pour vérifier le contraste WCAG — AA, AAA, seuils texte grand. Pensé pour les designers vérifiant de vraies captures, pas juste des codes hex.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Résultat

Sample two colours to see the contrast ratio.

À quoi ça sert ?

Les vérificateurs WCAG demandent normalement deux codes hex — mais un designer faisant un pass d'accessibilité sur une vraie capture n'a pas de hex, il a des pixels. Cet outil vous laisse uploader une image (capture, hero design, logo sur fond chargé) et cliquer deux points. Il échantillonne la couleur sous le curseur (1 pixel ou moyenne 3×3/5×5) et calcule le ratio de contraste WCAG 2.1. Verdict pour AA, AA-grand, AAA, AAA-grand et seuil composants UI (1.4.11). Tout dans le navigateur.

Quand l'utiliser

Vérifier une capture dont vous n'avez pas la source — landing marketing, UI concurrente, PDF.
Auditer un logo sur un fond photo chargé où la "couleur de fond" n'est pas une valeur unique.
Vérifier le pire cas de contraste le long d'un dégradé ou derrière du texte translucide.
Comparer rapidement deux états UI (p. ex. bouton repos vs hover) sans refaire le design.

Comment fonctionne l'échantillonnage

Un échantillon 1-pixel est précis mais bruyant — anti-aliasing, artefacts JPEG, rendu sous-pixel font diverger les voisins. La moyenne 5×5 est généralement ce que vous voulez en UI : elle retourne la couleur qu'un humain décrirait, pas le pixel exact sous le clic. Utilisez 1px pour un bord de logo ou une frontière de couleur nette.

Pièges courants

Anti-aliasing. Les bords de texte se moyennent à des couleurs hors design intent. Cliquez au milieu d'un trait de lettre, pas sur son bord.
Compression JPEG. Les images très compressées dérivent en couleur dans les zones plates. La moyenne 5×5 lisse ça.
Calques translucides. Ce qui compte pour le contraste est le pixel rendu, pas la couleur source. Cet outil lit le pixel rendu — exactement ce que vous voulez.
Vous vérifiez les couleurs, pas l'intent. Si votre bouton passe AA au repos mais échoue au hover sur une autre capture, les deux états sont des bugs a11y.
Mise à l'échelle. L'outil réduit les grandes images pour la performance. Le pixel échantillonné reflète le pixel affiché ; pour un sampling pixel-perfect d'un petit élément, croppez avant l'upload.