WCAG contrast · free
I will check the text contrast on your creative
I find every text block, separate the letters from the background and measure the contrast. I show which lines do not read and how far they are from the norm.
Image
Drop a card or a bannerJPG, PNG, WEBP or GIF up to 10 MB
Show me an image — I will check “WCAG contrast”. This result comes first, 12 more checks are in the same report.
How I check
- I find the text blocks and their role: headline, price, discount, button, small print.
- Inside each box I split the pixels into letters and background with Otsu’s threshold and compute the WCAG 2.x ratio.
- The bar is 4.5 : 1 for body text and 3 : 1 for large text: 24 px on screen, or 18.7 px for a headline, price or button.
- The on-screen size comes from the platform: a marketplace card in search is 180 px wide, a social feed is 360 px.
Common mistakes
- White text on a light product photo without a plate.
- Grey “elegant” captions on white — usually 2–3 : 1.
- A red price on an orange background: almost 1 : 1 in luminance.
FAQ
What does 4.5 : 1 mean?
The ratio of the lighter colour’s luminance to the darker one by WCAG. Black on white is 21 : 1, equal colours are 1 : 1. At 4.5 : 1 body text reads on a phone in daylight.
Why is contrast on a photo approximate?
The background under the text can be busy. I compare the average letter colour with the average background inside the box — on a gradient the worst spot is lower.
How do I fix it?
Darker letters, a plate under the text or a darker photo under the line. Neuro does this in “Improve CTR” mode and checks the result the same way.