Check WCAG 2.1 contrast ratios between foreground and background colors. See AA and AAA compliance for normal and large text instantly.
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.