Real preview
Aa Sample heading
This is a sample paragraph at the usual body-text size for a web page, so you can see how it would read in practice.
Small text, like a caption or a photo credit — the most demanding case.
For someone with low vision, insufficient contrast can make text outright unreadable, not just uncomfortable to read. AA is the minimum recommended by WCAG; AAA is the ideal for critical content. "Large text" means 18pt (24px) or larger, or 14pt (18.66px) bold.
How it works
Three steps, no fuss
No account to create, nothing to install. Come in and use the tool right away.
Pick your colors
Use the visual picker, the eyedropper, or type the hex code for the text and background directly.
See the result instantly
The tool calculates the real contrast ratio and shows you whether it passes AA and AAA, for normal and large text.
Adjust it if needed
If the combination doesn't pass, a close shade that does gets suggested automatically, one click away.
Ideas for use
What can you use it for?
Contrast matters anywhere text sits on a colored background.
Web and app design
Check that buttons, links, and text read well before you ship.
Documents and slide decks
Review PDF templates, slides, or materials before sending or printing them.
Signage and posters
Check that information can be read from a distance, indoors or outdoors.
Content for older adults
Make sure text reads effortlessly, even with low vision or presbyopia.
Brand and identity
Test palette combinations before rolling them out at scale.
Education and materials
Check that handouts, guides, and slides are readable for the whole classroom.
FAQ
Common questions about contrast and readability
What is color contrast and why does it matter for readability?
Color contrast is the difference in luminosity between text and the background it sits on. The smaller that difference, the more effort the eye needs to tell the letters apart. Low contrast can make text outright unreadable for many people, not just uncomfortable to read.
What do the WCAG AA and AAA levels mean?
They are the conformance levels of the Web Content Accessibility Guidelines (WCAG) 2.1. AA is the recommended minimum: 4.5:1 for normal text and 3:1 for large text. AAA is the most demanding level, meant for critical content: 7:1 for normal text and 4.5:1 for large text.
How does low contrast affect people with low vision?
For someone with low vision, insufficient contrast can make letters blend into the background until the text simply can't be read, regardless of font size or typeface. Meeting AA or AAA directly reduces that barrier.
What contrast should I use for content aimed at older adults?
Contrast sensitivity commonly declines with age, even without a diagnosis of low vision. It's worth aiming for at least AA, and AAA whenever possible, paired with generous font sizes.
Do I need to sign up, or is my data uploaded anywhere?
No. The tool runs entirely in your browser, doesn't require an account, and no color you enter is ever sent to a server.
Does it work for checking PDFs, signage, or printed materials?
Yes. Although the tool is calculated with screens in mind, the contrast ratio is a solid starting point for any color combination, including signage, posters, and printed documents.
Glossary
Key terms, in a few words
Short definitions to get oriented fast. Updated: August 2026.
- Contrast ratio
- A measure, on a scale from 1:1 to 21:1, of how much the text's luminosity differs from the background's.
- WCAG
- The Web Content Accessibility Guidelines: the international standard that defines the A, AA, and AAA levels.
- AA level
- The WCAG-recommended minimum: 4.5:1 for normal text, 3:1 for large text.
- AAA level
- The most demanding WCAG level, for critical content: 7:1 for normal text, 4.5:1 for large text.
- Low vision
- A loss of visual acuity that isn't fully corrected by glasses, lenses, or surgery.
Share
Know someone else who could use this?
If you found it useful, share it with whoever might need it.