Which text on my page fails contrast?
Takes a screenshot of the page and paints every text element that fails the WCAG contrast ratio over it in red, so you can see at a glance which grey-on-white captions and light buttons people with low vision cannot read. Needs a browser render, so results are queued.
Queued: needs a browser render
This one runs in a real browser (Chrome render), so it goes through a queue and the result is emailed to you. The queue is being wired up now. Leave your email and, if you like, the site to run it on.
What to do about it
The check found it. These are the ways to fix it, keep it fixed, or run the same check for every business you serve.
TagFrog Pro
Server-side tracking, consent and every ad platform API, proven with a real test order and kept current. Watch included when it launches.
See TagFrog ProWatch
Re-runs this check every week and emails you the moment the answer changes: site down, tag gone, score dropped, certificate expiring.
Join the waitlistWebsite
No website yet? $499, live in two days, or rebuild a tired one for the same price. Hosting and TagFrog on from day one, Watch when it launches, changes by chat, never a call. Have an agency? They can resell this.
Get online, $499OpsBlu
This same check, run for every local business in a territory. Leads with a reason to call, as CSV, API and MCP.
Go to opsblu.comWhat we check
- Every text node and its computed foreground and background colours
- WCAG AA ratio (4.5:1 body, 3:1 large text) per element
- Failures painted on a screenshot of the page
- Count of failing elements and the worst offenders
Cost of one run: Chrome render. Results for the same URL are kept for a few minutes, so running twice is free and instant.
Questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) at WCAG AA. Light grey placeholder and caption text is the usual failure.
Why a heatmap instead of a list?
A list of CSS selectors means nothing to the person who owns the brand colours. A picture of the page with the failures marked does.
Can I fix contrast without changing my brand colour?
Usually. Keep the brand colour for large headings and backgrounds, and use a darker shade of it for body text and small labels. A 10 to 15 percent darker tint is often enough.