How to use this tool
Enter foreground and background HEX colors or choose them from your color picker. The tool calculates the relative luminance and WCAG contrast ratio and shows results for normal and large text.
Quick steps
- Enter HEX colors for text and its background.
- Review the live text preview, contrast ratio and WCAG AA/AAA results.
- Try different color combinations until important text is easy to read.
Practical tip
For WCAG AA, most normal text requires 4.5:1 contrast, while large text requires at least 3:1. A good ratio does not by itself make an interface fully accessible.
Common questions
What is the WCAG AA contrast minimum?
4.5:1 for regular text and 3:1 for large text in the standard WCAG 2 contrast criterion.
Is 7:1 a good ratio?
It meets the WCAG AAA threshold for normal text under WCAG 2 contrast guidance.
Does passing contrast guarantee accessibility?
No. Typography, focus states, keyboard support, reading order, and other accessibility concerns also matter.