The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Level AAA sets higher thresholds at 7:1 for normal text and 4.5:1 for large text. Meeting these standards is not only good practice but is often a legal requirement for public-facing websites.
The contrast ratio is determined using relative luminance values of the two colors. First, each color's sRGB values are linearized, then combined using the formula L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. A ratio of 1:1 means no contrast (identical colors), while 21:1 is the maximum (black on white).
If your color combination fails WCAG checks, try darkening the darker color or lightening the lighter color. Small adjustments in lightness often suffice without changing the overall colour scheme. For borderline cases, increasing font size or weight can help you meet the lower large-text threshold. Always test with real content and consider users who may be viewing your site in bright sunlight or on low-quality displays.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA compliance?
For WCAG AA compliance, you need a minimum contrast ratio of 4.5:1 for normal-sized text (below 18px bold or 24px regular) and 3:1 for large text (18px bold or 24px regular and above). These are the most commonly required standards for web accessibility.
What is the difference between AA and AAA?
AA is the standard level of accessibility compliance required by most regulations. AAA is the highest level, requiring a contrast ratio of 7:1 for normal text and 4.5:1 for large text. While AAA is ideal, it can be difficult to achieve with certain color schemes, so AA is typically the target for most projects.
What counts as large text in WCAG?
Large text in WCAG is defined as 18 points (24 pixels) or larger for regular weight, or 14 points (approximately 18.66 pixels) or larger for bold weight. Large text has lower contrast requirements because its larger size makes it inherently more readable.
Does this tool work with any color format?
The tool accepts colors through the color picker (any color) and HEX input. If you have colors in RGB or HSL format, you can use our Color Converter tool to get the HEX value first, then paste it into the contrast checker.
Why is color contrast important for accessibility?
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text can also be difficult to read for people with low vision, older adults, and anyone viewing a screen in bright light. Proper contrast ensures your content is accessible to the widest possible audience.