Color Contrast Checker
Free WCAG color contrast checker. Check if your text and background colors meet accessibility standards.
Sample Text
Pick colors to calculate contrast.
How to Use Color Contrast Checker
Enter Colors
Pick a text color and background color using the color pickers or type HEX values directly.
Check the Result
The contrast ratio is calculated instantly. See if your colors pass WCAG AA and AAA standards.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. Higher ratios mean better readability.
How is contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of lighter and darker colors. Luminance is calculated from sRGB values.
What counts as large text?
Large text: 18pt (24px) or larger, or 14pt (18.66px) or larger if bold. Large text is easier to read so has lower contrast requirements.
About WCAG Contrast
WCAG (Web Content Accessibility Guidelines) defines three levels: A (minimum), AA (mid-range), and AAA (highest). Most websites target AA compliance. For text, AA requires 4.5:1 contrast for normal text and 3:1 for large text.
Insufficient contrast is one of the most common accessibility issues on the web. Use this tool during design and development to catch contrast problems early.