All Tools
Contrast Checker
Check WCAG color contrast ratios. Ensure accessible text.
Color Inputs
Contrast Ratio6.75:1Luminance: Text 0.320 | BG 0.005
WCAG 2.1 Guidelines
AA Normal Text (4.5:1) PASS
AA Large Text (3.0:1) PASS
AAA Normal Text (7.0:1) FAIL
AAA Large Text (4.5:1) PASS
Normal Text (14pt / 16px)
Design is not just what it looks like and feels like. Design is how it works.
Large Text (18pt / 24px Bold)
Design is not just what it looks like and feels like. Design is how it works.
How it works
- Set a foreground (text) color and a background color.
- The contrast ratio is calculated and checked against WCAG levels.
- See at a glance whether it passes AA and AAA for normal and large text.
- Adjust the colors until it passes.
What people use it for
- Checking that body text is readable on its background.
- Meeting WCAG 2.1 accessibility requirements for a site.
- Choosing an accessible text color for a brand palette.
Good to know
- It measures the WCAG contrast ratio; real-world legibility also depends on font size, weight, and rendering — the tool reports the large-text thresholds separately.
- It checks a single foreground/background pair, not an entire interface at once.
Frequently asked questions
What ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. The tool shows which levels your pair passes.
Why does large text pass at a lower ratio?
Larger, heavier text is easier to read, so WCAG allows a lower contrast threshold for it. The checker reports both cases.
Is anything uploaded?
No. The contrast calculation runs entirely in your browser.