Color Contrast Checker
Check your color contrast ratio against WCAG 2.1 standards. Test foreground and background colors for AA and AAA compliance. Free online tool for designers.
Text Color
Background Color
The quick brown fox jumps over the lazy dog.
This is how your text will look with the selected colors.
WCAG AA
WCAG AAA
About This Tool
Accessible color choices are essential for inclusive design. This Color Contrast Checker calculates the luminance contrast ratio between any two colors and evaluates them against WCAG 2.1 Level AA and AAA requirements for both normal and large text. See your contrast ratio in real-time, preview text rendering, and get suggested alternatives when your colors fall short.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?
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).
What is the difference between AA and AAA?
AA is the minimum recommended standard (4.5:1 for normal text). AAA is the enhanced standard (7:1 for normal text) and provides better readability for users with low vision.
How is contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of the two colors per the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker.
Can I use hex, RGB, or HSL color values?
Currently the tool accepts hex color values (e.g., #FF5500). You can also use the native color picker to select any color visually.