DEV CONTRAST
Color Contrast Checker
Choose foreground and background colors to calculate their contrast ratio. Check the result against common WCAG AA text contrast thresholds.
Check two colors
Choose a text color and its background.
HOW IT WORKS
Color Contrast Checker in three steps
- Choose your input.Select a file, type your content or enter image dimensions.
- Adjust the options.Pick the format, size or quality that fits your task.
- Download or copy.Check the result, then save it to your device.
PRACTICAL NOTES
Check text contrast against WCAG guidance
The contrast ratio compares the relative luminance of the foreground and background colors. WCAG AA guidance uses 4.5:1 for normal text and 3:1 for large text; this checker does not assess font weight, size or every accessibility requirement.
HELP & ANSWERS
Frequently asked questions
What does a contrast ratio mean?+
It measures the luminance difference between the selected foreground and background colors. A higher ratio means stronger contrast.
What ratio is used for normal text?+
The checker compares against the WCAG AA 4.5:1 threshold for normal text and 3:1 for large text.
Does a passing ratio make a whole page accessible?+
No. Color contrast is one check among many accessibility requirements.