Contrast Checker
Check WCAG color contrast between two colors.
DesignProcessed locally. Your input never leaves your browser.
Large text sample
Normal text sample
21.00:1
AA Normal Text
AAA Normal Text
AA Large Text
AAA Large Text
About
Checks the WCAG contrast ratio between a foreground and background color, entirely in your browser. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1.
Compare a foreground color with a background color before shipping a design. The live preview shows the pair in context and reports the contrast ratio with separate WCAG results for normal and large text.
What you can do
- Accepts color values or the native color picker.
- Calculates a contrast ratio up to 21:1.
- Reports WCAG AA and AAA results for normal and large text.
Common uses
- Check text and button colors in a design system.
- Review a marketing page before launch.
- Compare accessible alternatives for a brand palette.
Frequently asked questions
What contrast ratio should normal text meet?
WCAG AA uses at least 4.5:1 for normal text and 3:1 for large text. AAA uses higher thresholds.
Does a passing ratio guarantee accessibility?
No. Contrast is one part of accessibility; typography, focus visibility, semantics, keyboard support, and clear interaction states also matter.