Contrast Checker
FreeWCAG 2.1 AA/AAA contrast ratio checker for text and background pairs
contrastwcagaccessibilitya11yratio
All Color ToolsRelated tools
How it works
1
Enter
Input a foreground text color and a background color using pickers or values.
2
Evaluate
The tool calculates the contrast ratio and checks it against WCAG AA and AAA standards.
3
Adjust
Tweak either color until you reach the required contrast ratio for your use case.
Frequently asked questions
What contrast ratio does WCAG AA require?+
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA requires 7:1 for normal text.
How is the contrast ratio calculated?+
It uses the WCAG 2.1 relative luminance formula, which calculates the luminance of each color and computes the ratio between the lighter and darker values.
Does this tool run in my browser?+
Yes. The contrast calculation is performed entirely in your browser using standard JavaScript. No data is sent externally.
Can I check contrast for colors used in a design mockup?+
Yes. Enter the exact foreground and background colors from your mockup. If you have HEX or RGB values from your design tool, paste them directly.
What should I do if my colors fail the contrast check?+
Try darkening the darker color or lightening the lighter one. Small adjustments to lightness often fix contrast issues without changing the overall look of your design.