eTools

Contrast Ratio Checker

Check color contrast ratios for WCAG accessibility compliance. Ensure your designs meet AA and AAA standards.

Text Color

Background Color

Preview

Sample Text Preview

Contrast Ratio Results

21.00 : 1
WCAG AA
Small Text (4.5:1)
Large Text (3:1)
WCAG AAA
Small Text (7:1)
Large Text (4.5:1)

About Color Contrast and Accessibility

Color contrast is a critical aspect of web accessibility, ensuring that text is readable for users with visual impairments or color vision deficiencies. The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio requirements that websites should meet to be considered accessible.

WCAG AA (Level A) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA (Level AA) requires even higher contrast ratios: 7:1 for normal text and 4.5:1 for large text. Our tool calculates the contrast ratio using the relative luminance formula and provides instant feedback on whether your color combination meets these standards.

The contrast ratio is calculated using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. This ensures that text remains readable across different display technologies and lighting conditions, making your website accessible to a broader audience.