Color Contrast Checker
Test whether your text and background colours meet WCAG accessibility standards. See the exact contrast ratio, AA/AAA pass or fail for text, and the separate 1.4.11 ratio for UI components and icons, all at a glance.
The quick brown fox jumps over the lazy dog.
Small text sample — 14px
How to use color contrast checker
- Set two colours
Choose your text colour and background colour, or click Swap to flip them.
- Read the ratio
The contrast ratio updates live between 1:1 and 21:1.
- Check the grades
See whether the pair passes WCAG AA and AAA for normal and large text, plus the separate UI-component/icon ratio.
Features
Instant pass/fail against both accessibility levels.
Large text has an easier threshold, shown separately.
Checks the separate 3:1 ratio WCAG requires for icons, borders and interactive UI parts, not just body text.
A sample paragraph renders in your chosen colours.
Supported formats and limitations
Text and structured input supported by this tool.
Use cases include personal workflows, content preparation, and quick checks. Review output before relying on it for legal, financial, accessibility, or production decisions.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
Roughly 18.66px bold or 24px regular and above. Larger text is easier to read, so it has a lower requirement.
What is the UI component / icon check?
WCAG success criterion 1.4.11 (Non-text Contrast) separately requires a 3:1 ratio for meaningful UI parts — icons, form-field borders, focus indicators, chart segments — against their adjacent background. It shares the same 3:1 number as AA large text but is a distinct requirement covering graphics, not prose.
Why does contrast matter?
Sufficient contrast makes text and interface elements readable for people with low vision or colour deficiencies, and in bright conditions.