WCAG Color Contrast Checker
Calculate a text/background color contrast ratio and check WCAG AA and AAA thresholds.
Choose text and background colors to check their contrast ratio.
A clear result starts here
Run the tool to see your output here.
Try the example to explore how it works.What to know about this tool
Opaque sRGB hex color pairs only, not page accessibility certification. Large text means at least 18 pt regular (24 px), or 14 pt bold (about 18.67 px). Also inspect focus, interaction states and the final background.
Instructions and examples
From input to output
- Set Foreground and Background with the color controls.
- Select Check contrast.
- Read the ratio and AA/AAA text assessments, then inspect the actual design.
Settings and result behavior
- AA normal text uses 4.5:1; AA large text uses 3:1; AAA normal text uses 7:1.
- Large text means at least 18 pt regular (24 px), or 14 pt bold (about 18.67 px).
A worked example
- Input
Foreground #000000; Background #ffffff.
- Settings
- Opaque color pair.
- Expected result
21.00:1; AA normal, AA large and AAA normal text pass.
Supported input and limits
Opaque sRGB hex color pairs. Output is a ratio and text assessment report; it does not scan a webpage or model opacity, images or gradients.
Opaque sRGB hex color pairs only, not page accessibility certification. Large text means at least 18 pt regular (24 px), or 14 pt bold (about 18.67 px). Also inspect focus, interaction states and the final background.
If the result is unexpected
- For a failing pair, darken the foreground or lighten the background and check again.
- If the page has transparency or a photograph behind text, determine the final rendered colors or test the actual page separately.
Check before using the result
Check text size, focus, hover and disabled states in context. A passing pair is not accessibility certification for a page or product.
Report a problem with this tool. Include a nonsensitive example and your browser details.