Advertisement
Guide
About the WCAG Contrast Checker
Color contrast is one of the most important — and most overlooked — parts of accessible design. If text doesn't stand out enough from its background, people with low vision, color blindness, or even just a bright screen in sunlight can't read it. This tool takes a foreground and background color, calculates the WCAG contrast ratio between them, and tells you instantly whether it passes AA and AAA for normal text, large text, and UI components.
A live preview shows real text in your chosen colors so you can see and measure legibility at the same time. Everything runs in your browser.
What the WCAG levels require
- AA normal text — at least 4.5:1. The baseline for body text.
- AA large text — at least 3:1 (roughly 18pt, or 14pt bold, and larger).
- AAA normal text — at least 7:1, the enhanced level.
- UI components / graphics — at least 3:1 for meaningful non-text elements like icons and input borders.
Why the ratio, not just “looks fine”
Contrast that looks acceptable on your monitor may fail for others on different screens or with different vision. The contrast ratio is an objective, standardized measure — it ranges from 1:1 (no difference) to 21:1 (black on white). Designing to meet the WCAG thresholds ensures your text is readable for the widest range of people and conditions, and it's often a legal requirement.
How to use it
- 1Enter or pick a foreground (text) color.
- 2Enter or pick a background color.
- 3Read the contrast ratio and the AA / AAA pass or fail results.
- 4Adjust the colors until they meet the level you need.
Frequently asked questions
What contrast ratio passes WCAG AA?
At least 4.5:1 for normal text and 3:1 for large text. UI components and meaningful graphics also need at least 3:1.
What counts as large text?
Roughly 18pt (24px) and above, or 14pt (about 18.66px) and above if bold. Large text has a lower contrast requirement than body text.
What is the difference between AA and AAA?
AA is the widely adopted baseline (4.5:1 for normal text). AAA is the enhanced level (7:1), recommended where the highest accessibility is needed.
Why does contrast matter if the colors look fine to me?
Other people use different screens and have different vision. The measured ratio is objective and ensures readability across those conditions, which subjective judgment cannot guarantee.
Is my color data uploaded?
No. The ratio is calculated entirely in your browser.