Contrast checker
Calculate the contrast ratio between two colors and check WCAG AA and AAA compliance.
Example text
Check how a paragraph looks with this color combination.
Contrast ratio
17.74:1
Pass ✓ · WCAG AA · normal text
Pass ✓ · WCAG AA · large text
Pass ✓ · WCAG AAA · normal text
Pass ✓ · WCAG AAA · large text
How it works
Select the color of the text and the background color. The tool calculates the relative luminance and contrast ratio to show if it meets the usual WCAG thresholds for normal and large text.
Frequently asked questions
What does a 4.5: 1 relationship mean?
It is one of the usual WCAG AA thresholds for normal text.
Does the preview use my actual colors?
Yes. The example block applies exactly the selected colors.