Color
Contrast

Instantly verify color contrast against WCAG AA and AAA standards — for text, buttons, and UI components.

WCAG 2.1 standard4 criteria checkedLive preview

① Enter foreground color ② Enter background color ③ Check WCAG contrast ratio

Foreground (text)

Background

Presets:

WCAG AA

4.5:1 normal · 3:1 large

WCAG AAA

7:1 normal · 4.5:1 large

Non-text

3:1 UI components (1.4.11)

What is WCAG color contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between foreground text and background colors to ensure readability for users with visual impairments, including color blindness and low vision. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. The ratio is calculated using relative luminance — a perceptual measure derived from RGB linearization (0.2126R + 0.7152G + 0.0722B). Checking contrast early in the design process helps avoid costly retrofitting and ensures your product is legally accessible in many jurisdictions (ADA, EN 301 549, AODA).

Frequently asked questions

WCAG (Web Content Accessibility Guidelines) color contrast is a standard that defines the minimum contrast ratio between foreground text and its background, ensuring readability for users with visual impairments. It is published by the W3C and is part of the broader WCAG 2.1 specification used globally.

The contrast ratio is calculated using relative luminance values derived from the RGB components of each color. Each channel is first linearized, then combined with coefficients (0.2126R + 0.7152G + 0.0722B) to produce the luminance. The ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker one. Ratios range from 1:1 (no contrast) to 21:1 (black on white).

WCAG AA is the standard legally required in most contexts. It requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for high-readability contexts such as documents, legal content, and accessibility-critical interfaces.

WCAG defines large text as at least 18 point (approximately 24px) for regular weight, or at least 14 point (approximately 18.67px) for bold weight. At these sizes, slightly lower contrast ratios are accepted because larger letterforms are inherently more readable even at reduced contrast.

Not necessarily. Contrast ratio covers readability, but accessible design also involves font size, typeface legibility, spacing, and context. A passing contrast ratio with an ornate or very thin font may still be hard to read. Use contrast checking alongside usability testing with real users including those with visual impairments.

Paste your brand or UI color HEX codes into both fields. Aim for at least AA compliance for all body text. Use the swap button to quickly test inverted combinations. For interactive states (hover, focus), check those color combinations too. Export the ratio to include in accessibility documentation.

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires that UI components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors. This applies to button borders, focus indicators, form field outlines, and similar elements. The text inside the button follows the regular 4.5:1 rule.

What is WCAG color contrast and why does it matter?

Frequently asked questions

Explore Our Network