Accessibility
Color Contrast Checker - WCAG AA & AAA
Check text and background color contrast against WCAG AA and AAA. Preview normal text, large text, buttons, links and dark mode color pairs.
Readable color preview
Use this preview to judge text, controls and interface surfaces before shipping your design.
Large text · Normal text
- AA Normal text ≥ 4.5Pass
- AA Large text ≥ 3Pass
- AAA Normal text ≥ 7Pass
- AAA Large text ≥ 4.5Pass
How to use this tool
Test a foreground and background pair, preview normal and large text, then generate the nearest foreground color that passes WCAG AA. Use it for body copy, buttons, links, badges and dark mode surfaces.
- 1 Choose text and background colors.
- 2 Review AA and AAA results for normal and large text.
- 3 Use the suggested accessible color when a pair fails.
Frequently asked questions
What contrast ratio does WCAG AA require?
Normal text needs 4.5:1. Large text needs 3:1.
What contrast ratio does WCAG AAA require?
Normal text needs 7:1. Large text needs 4.5:1.
Should I check button and link colors?
Yes. Test default, hover, focus, disabled and visited states because each color pair may produce a different contrast ratio.
Can transparent colors be checked?
Transparent foregrounds or backgrounds should be composited over the final visible background before evaluating contrast.