Instead of typing in two colours, this collects every piece of text on the page you have open and lists what is hard to read.
Keep it in your bookmarks bar and press it whenever a page looks off.
Neither this page nor the audit itself makes any network request.
Everything happens inside your own browser. The address and the contents of the page you were reading are never sent anywhere.
Take the yellow button and drag it onto your bookmarks bar.
On a phone, or anywhere you cannot drag, open “Add it by hand” below instead.
Want to see what it does first? Try it right here →
(press again to close the results)
Use it
Open a page that looks hard to read
Press “Contrast Audit” in your bookmarks bar
The results appear at the bottom right. Press any entry to scroll to that spot and outline it in red
Press the bookmark again to close it
What it looks at
It collects every element that holds text, then reads the text colour actually in effect on that element and the background colour you can actually see, walking up through transparent parents to find it
From those two colours it computes the contrast ratio with the WCAG 2.1 formula
It picks the threshold from the size and weight of the text. 24px and above, or 18.66px and above in bold, needs 3:1; everything else needs 4.5:1 (level AA)
Only the ones that fall short are listed, smallest ratio first
What it cannot do (said up front)
A clean result here does not on its own mean the page is readable.
The following cannot be judged automatically, so check them with your own eyes.
Text sitting on a photo or a gradient. The background differs from place to place, so a single pair of colours cannot describe it. This audit treats the nearest solid colour it finds as the background
Anything inside an iframe (embedded videos, embedded posts). It counts as a separate page, so the contents cannot be read
Hover and active colours. Only the state currently on screen is examined
Borders, icons and anything that is not text. Only elements holding text are considered
On pages with a very large number of elements it stops after the first 4000 (and says so on screen when it does)
Add it by hand (if you cannot drag)
Create a new bookmark and paste the whole snippet below into its address field. The name can be anything.