WCAG Color Contrast Ratio Checker

Calculate color contrast ratios according to W3C Web Content Accessibility Guidelines (WCAG 2.1). Ensure web typography and UI components comply with Level AA and AAA accessibility standards.

14.63:1Contrast Ratio
Normal Text (WCAG AA) ≥ 4.5:1
PASS
Normal Text (WCAG AAA) ≥ 7.0:1
PASS
Large Text (WCAG AA) ≥ 3.0:1
PASS
Large Text (WCAG AAA) ≥ 4.5:1
PASS
UI Components / Borders ≥ 3.0:1
PASS
Live Typography & UI Preview

Accessible Headings Matter

This is a preview of body copy formatted with your selected color combination. Good contrast ensures content is effortless to read under all lighting conditions.

W3C WCAG 2.1 Color Contrast Mathematics

Web Content Accessibility Guidelines (WCAG 2.1) published by the W3C Web Accessibility Initiative (WAI) define mathematical contrast ratio benchmarks between foreground text and background colors to ensure digital content is legible for users with low vision, aging eyes, or situational lighting challenges.

Mathematical Relative Luminance Formula

Relative luminance ($L$) normalizes sRGB color values (0–255) to a scale of 0.0 (pure black) to 1.0 (pure white):

// WCAG 2.1 Luminance Formula
L = 0.2126 * R + 0.7152 * G + 0.0722 * B

// Contrast Ratio Formula (where L1 is lighter and L2 is darker)
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

WCAG 2.1 Conformance Levels

  • Level AA (Minimum Standard): Requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt/24px) and 3.0:1 for large text (18pt+ or 14pt+ bold) and active UI component borders.
  • Level AAA (Enhanced Standard): Requires an enhanced contrast ratio of 7.0:1 for normal text and 4.5:1 for large text.

Accessibility & Technical SEO Integration

Accessibility is increasingly correlated with user engagement and search rankings:

  • Mobile Usability: Verify responsive viewport scaling and tap target sizes using our Mobile Friendly Test.
  • On-Page Technical Auditing: Inspect semantic heading structure with our On-Page SEO Checker.
  • Core Web Vitals: Audit network latency and visual stability using our Page Speed Checker.

Frequently Asked Questions

What constitutes "Large Text" under WCAG?

Large text is defined as at least 18pt (24px) regular font weight, or at least 14pt (approx. 18.66px) bold font weight.

Does placeholder text need to meet contrast ratios?

Yes. Low-contrast grey placeholder text inside form inputs fails WCAG 1.4.3 Level AA guidelines. Inputs should use clearly legible placeholder values.

How does color contrast affect SEO?

Poor color contrast increases user bounce rates and lowers dwell time, sending negative search quality signals to Google algorithms. Accessible websites perform significantly better in real-world user engagement metrics.