Color Contrast Checker | WCAG AA and AAA Test
Check text and background color contrast ratio, preview normal and large text, and see whether the pair passes WCAG AA or AAA thresholds.
Normal Text for everyday reading paragraphs.
Check Text Contrast Against WCAG
Compare foreground and background colors to calculate the contrast ratio and see whether normal text and large text meet WCAG AA or AAA accessibility thresholds.
Test Real UI Color Pairs
Use the same colors planned for buttons, links, headings, body text, cards, banners, and form labels. A pass result depends on text size and weight.
When Contrast Checking Matters
Run a contrast check before publishing landing pages, themes, ads, dashboards, forms, and brand palettes so important text remains readable for more visitors.
About This Tool
Color Contrast Checker measures the contrast ratio between two colours and checks whether the combination passes WCAG accessibility guidelines for normal text, large text, and UI components. It is essential for accessible web design.
When to Use It
Use this when choosing text and background colour combinations for a website, when auditing an existing design for accessibility compliance, or when a project requires WCAG AA or AAA certification.
How to Use
- Enter the foreground text colour as a hex code.
- Enter the background colour as a hex code.
- Click Check to see the contrast ratio.
- Review whether it passes WCAG AA (4.5:1) or AAA (7:1) for normal text.
Frequently Asked Questions
What contrast ratio is required for WCAG AA?
WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text over 18pt. UI components also need 3:1 against adjacent colours.
Does dark mode require separate contrast checks?
Yes. If your site has a dark mode, check contrast ratios for both light and dark colour combinations separately.
Why does white text on a light colour fail even if it looks readable to me?
Colour perception varies. People with low vision or colour blindness may find combinations unreadable that appear fine to others. The contrast ratio provides an objective standard.