Color Contrast Checker
Check text contrast against WCAG AA and AAA accessibility levels.
Large text sample
Normal body text at 16 pixels — the size most of your content will actually use.
Small print at 14 pixels.
7.73:1
Contrast ratio
AA — normal text
Needs 4.5:1
AA — large text (18.66px bold / 24px)
Needs 3:1
AAA — normal text
Needs 7:1
AAA — large text
Needs 4.5:1
Non-text elements (icons, borders)
Needs 3:1
About Color Contrast Checker
Contrast ratio is the most testable accessibility requirement there is, and low-contrast text is one of the most common failures found in audits.
This checker computes the WCAG relative luminance ratio between your foreground and background, shows pass or fail for each conformance level and text size, and previews real text at both sizes.
Frequently asked questions
What 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?
At least 18.66 pixels bold, or 24 pixels regular.
Does contrast apply to icons and borders?
Yes. Meaningful non-text elements such as icons and input borders need at least 3:1 under WCAG 2.1.