Color Contrast Checker — WCAG AA/AAA Accessibility Tool

SELECT FOREGROUND & BACKGROUND COLORS

Text Color (Foreground HEX)

Background Color (Background HEX)

CONTRAST RATIO & WCAG COMPLIANCE

Calculated Ratio 16.3:1

AA Normal Text (4.5:1) PASS

AA Large Text (3.0:1) PASS

AAA Normal Text (7.0:1) PASS

AAA Large Text (4.5:1) PASS

Large Heading (18pt / 24px Bold)

Normal body text preview rendering using selected foreground and background HEX values.

WCAG 2.1 Color Contrast Guidelines — Standards & Best Practices

Ensuring sufficient color contrast between foreground text and background surface elements is essential for digital accessibility. The Web Content Accessibility Guidelines (WCAG 2.1) specify precise mathematical ratios to ensure content remains readable for individuals with visual impairments or color vision deficiencies.

When to use this tool

Verify body copy and background contrast ratios before committing design tokens in Tailwind or CSS
Audit call-to-action button text contrast for WCAG 2.1 AA (4.5:1) and AAA (7.0:1) compliance
Test dark mode and light mode color palette combinations for readable typography
Check non-text UI components (input borders, active tab indicators, icons) for 3.0:1 contrast compliance

WCAG 2.1 compliance levels reference

Level AA Normal Text (< 18pt) — Minimum ratio of 4.5:1. Mandatory standard for most web accessibility legislation.
Level AA Large Text (≥ 18pt or 14pt bold) — Minimum ratio of 3.0:1. Applies to large headings and hero banners.
Level AAA Normal Text (< 18pt) — Minimum ratio of 7.0:1. Enhanced accessibility tier for government and healthcare platforms.
Level AAA Large Text (≥ 18pt or 14pt bold) — Minimum ratio of 4.5:1. Maximum legibility benchmark.

Related tools

Calculate responsive, scalable fluid typography using our CSS Clamp Calculator, or convert design token pixel sizes to relative units with the PX to REM Converter.

Frequently Asked Questions

Common questions about this tool.

What contrast ratio is required for WCAG Level AA compliance? ▼

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal body text (under 18pt / 24px) and 3:1 for large text (18pt / 24px or larger, or 14pt / 18px bold). UI components and graphical objects require at least 3:1.

What contrast ratio is required for Level AAA compliance? ▼

WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Achieving AAA compliance ensures optimal readability for users with severe low vision.

How is the color contrast ratio calculated? ▼

Contrast ratio is calculated using relative luminance values ($L_1$ and $L_2$) of the foreground and background colors: $(L_1 + 0.05) / (L_2 + 0.05)$, where $L_1$ is the lighter color. The result ranges from 1:1 (zero contrast) to 21:1 (black on white).

Why does color contrast matter for SEO and UX? ▼

High contrast text improves readability, reduces visual fatigue, and boosts search engine accessibility rankings. Search engines evaluate visual accessibility and usability metrics as part of page experience signals.

Does WCAG contrast apply to placeholder text and icons? ▼

Yes. Essential icons, active form controls, focus indicators, and interactive state borders require a minimum 3:1 contrast ratio under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast).