What is the minimum WCAG 2.1 contrast ratio for normal text?

For standard body text (under 18pt regular or under 14pt bold), WCAG Level AA requires a minimum contrast ratio of 4.5:1 against the background. For the stricter Level AAA, a minimum ratio of 7.0:1 is required.

What qualifies as large text in WCAG guidelines?

Large text is defined as at least 18pt (24px) or 14pt bold (typically 18.66px bold). Because larger glyphs are easier to distinguish, the required contrast ratio is lower: 3.0:1 for Level AA and 4.5:1 for Level AAA.

How is relative luminance calculated for digital colors?

Relative luminance (L) measures the perceived brightness of a color normalized between 0 (black) and 1 (white). It accounts for human eye spectral sensitivity by weighting linearized sRGB channels: L = 0.2126*R + 0.7152*G + 0.0722*B. The contrast ratio between two luminances L1 and L2 is (L1 + 0.05) / (L2 + 0.05).

WCAG Color Contrast Checker & Ratio Calculator

WCAG Color Contrast Checker

Validate text and UI component contrast ratios against WCAG 2.1 AA and AAA standards with live typography previews and 1-click auto-fix color suggestions.

Design & UI Systems Discover professional Figma design systems, accessible UI kits, and WCAG automated compliance scanners.

Color Palettes

Text (Foreground) Color

Background Color

Curated Combinations:

✨ Smart Contrast Fix

Ready

Need guaranteed WCAG AA compliance? We can automatically adjust your text color to the nearest passing tone.

Measured Contrast Ratio

15.4 : 1

Normal Text (<18pt)

AA ✓ AAA ✓

Requires 4.5:1 (AA) / 7.0:1 (AAA)

Large Text (≥18pt)

AA ✓ AAA ✓

Requires 3.0:1 (AA) / 4.5:1 (AAA)

UI Components

AA ✓

Requires 3.0:1

👁 Real-Time Component Preview

Large Headline (24px Bold)

The quick brown fox jumps over the lazy dog.

Body Text (15px Regular)

Accessibility ensures that digital interfaces are comfortable and readable for all individuals, including users with visual impairments, aging eyes, and low contrast sensitivity.

Status Tag

Understanding WCAG Contrast & Luminance Mathematics

1. Human Eye Luminance Weighting

The human retina does not perceive red, green, and blue light equally. Cones in the human eye are dramatically more sensitive to green wavelengths than blue.

L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin

Because green represents 71.5% of perceived brightness, yellow and green text requires much darker backgrounds to pass contrast tests than pure blue text.

2. Level AA vs Level AAA

WCAG Level AA is the legally mandated benchmark for ADA, Section 508, and European EN 301 549 compliance. It requires 4.5:1 for body copy.

WCAG Level AAA (7.0:1) is an enhanced standard designed for readers with severe low vision (visual acuity between 20/40 and 20/200) without relying on assistive screen magnifiers.

Frequently Asked Questions

Does WCAG contrast apply to placeholder text in form inputs? ▾

Yes. WCAG 2.1 Success Criterion 1.4.3 requires placeholder text that conveys essential instructional information to meet the 4.5:1 ratio. If faint gray placeholders fall below this ratio, users with impaired contrast vision cannot read field hints.

What is the upcoming WCAG 3.0 APCA algorithm? ▾

APCA (Accessible Perceptual Contrast Algorithm) is the candidate contrast method developed for WCAG 3.0. Unlike the simple ratio formula in WCAG 2.1, APCA accounts for spatial frequency, font weight, font size, and whether text is dark-on-light or light-on-dark (polarity).

Are disabled buttons required to meet contrast ratios? ▾

No. Inactive or disabled user interface components are explicitly exempt from WCAG 2.1 Success Criterion 1.4.3 and 1.4.11. However, UX best practices recommend providing clear visual states and tooltips explaining why an action is disabled.