Web Content Accessibility Guidelines (WCAG) 2.1 require minimum contrast ratios between text and background colors to ensure readability for all users, including those with visual impairments. Level AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively. This tool calculates the exact contrast ratio and shows whether your color combination passes each level.
Large Text (24px Bold)
Large Text (18.66px / 18pt)
Normal text. The quick brown fox jumps over the lazy dog.
Small text. Pack my box with five dozen liquor jugs.
14.63:1
Excellent contrast -- passes all WCAG levels
Required: ≥ 4.5:1
Required: ≥ 3:1
Required: ≥ 3:1
Required: ≥ 7:1
Required: ≥ 4.5:1
Enter a foreground (text) color and background color using the color pickers or by typing HEX codes. The tool instantly calculates the contrast ratio and shows pass/fail results for WCAG 2.1 Level AA and Level AAA standards at both normal and large text sizes. A live preview displays sample text with your chosen colors. Suggestions for accessible color alternatives are provided when the contrast ratio fails the requirements.
WCAG contrast checking is required for ADA and Section 508 compliance in government and enterprise websites, ensuring readability for users with low vision or visual impairments, meeting European Accessibility Act requirements, passing automated accessibility audits (Lighthouse, axe), creating accessible design systems and component libraries, and validating brand colors for web use against accessibility standards.
Contrast ratio is calculated using the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Relative luminance is computed by linearizing sRGB values (applying gamma correction inverse: value <= 0.03928 ? value/12.92 : ((value+0.055)/1.055)^2.4), then weighting: L = 0.2126×R + 0.7152×G + 0.0722×B. The ratio ranges from 1:1 (identical) to 21:1 (black on white).
The WCAG contrast ratio is a measure of the relative luminance difference between two colors, ranging from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black and white). It is calculated using the formula defined in WCAG 2.1.
For WCAG 2.1 Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+). For Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.
The contrast ratio is calculated as (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. Relative luminance accounts for how human eyes perceive different wavelengths of light.
According to WCAG, large text is at least 18.66px (14pt) bold or 24px (18pt) regular. Large text has lower contrast requirements because larger characters are easier to read.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools