How is contrast ratio calculated?

(L1+0.05)/(L2+0.05) where L1/L2 are luminances. Range 1:1 to 21:1.

🎨 Color Contrast Checker

Q: What are WCAG contrast standards?

AA: normal≥4.5:1, large≥3:1. AAA: normal≥7:1, large≥4.5:1.

Q: What counts as large text?

Bold≥14pt or normal≥18pt. Lower contrast requirements for large text.

🔒 No data upload ✅ 100% Free ⚡ Real-time

Online WCAG Color Contrast Checker - AA/AAA compliance, real-time preview

🎨 Select Colors

Foreground (Text Color)

Background Color

Preview Text Aa

This is sample text to preview the contrast between foreground and background colors.

Contrast Ratio

📋 WCAG 2.1 Compliance

FAQ

Q1: What are WCAG contrast standards?

WCAG (Web Content Accessibility Guidelines) specify minimum contrast ratios between text and background. Level AA requires ≥4.5:1 for normal text and ≥3:1 for large text; Level AAA requires ≥7:1 for normal text and ≥4.5:1 for large text. These ensure readability for users with visual impairments.

Q2: How is the contrast ratio calculated?

Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Luminance is computed from sRGB channel values. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum: black on white).

Q3: What counts as large text?

WCAG defines large text as: bold text ≥14pt (18.5px) or normal text ≥18pt (24px). Normal text is anything smaller. Large text has lower contrast requirements since size itself improves readability.