Color Contrast Checker

WCAG 2.1 — AA & AAA compliance checker with live preview and color blindness simulation

Foreground (Text)

Background

14.69
contrast ratio
AA Normal PASS
AA Large PASS
AAA Normal PASS
AAA Large PASS

Live Preview

Heading Text (24px bold)

Large text sample — 18px regular weight, qualifying as "large text" under WCAG 2.1.

Normal body text at 15px. This size requires a contrast ratio of at least 4.5:1 for WCAG AA compliance and 7:1 for AAA. Make sure your color combinations are readable for all users, including those with low vision or color blindness.

Suggested Accessible Alternatives

Color Blindness Simulation

Normal Vision
Sample Text
Protanopia (red-blind)
Sample Text
Deuteranopia (green-blind)
Sample Text
Tritanopia (blue-blind)
Sample Text

How to Use This Contrast Checker

Pick your colors by clicking the color swatch to open the native color picker, or type directly into the HEX field. Switch between HEX, RGB, and HSL formats using the tabs above the input — all formats stay in sync automatically.

Read the ratio in the large number displayed below the pickers. A higher ratio means more contrast. The four badges (AA Normal, AA Large, AAA Normal, AAA Large) each show PASS or FAIL based on WCAG 2.1 thresholds.

Use the live preview to see exactly how your text will look at heading, large, and normal body sizes — all rendered in real time with your chosen colors.

Check suggested fixes when your ratio falls below AA. The tool calculates the nearest accessible alternative by incrementally adjusting lightness, and each suggestion is clickable to instantly apply it.

Simulate color blindness in the bottom grid. The four panels show how your color pair appears under normal vision, protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind).

Swap colors at any time to flip foreground and background — useful for checking both light-on-dark and dark-on-light variants of the same palette.

Generate a random accessible pair to explore color combinations that already meet WCAG AA requirements.

Understanding WCAG Contrast Requirements

WCAG 2.1 (Web Content Accessibility Guidelines) defines contrast ratio thresholds that ensure text remains readable for users with low vision or color blindness. Contrast ratio is calculated using the relative luminance of two colors — a value derived from the linear RGB channels — and expressed as a ratio such as 4.5:1 or 7:1.

Level AA is the standard legal and industry baseline. It requires a contrast ratio of at least 4.5:1 for normal text (below 18pt, or below 14pt bold) and 3:1 for large text (18pt or larger, or 14pt bold or larger). Most web accessibility laws worldwide — including WCAG referenced by the EU Web Accessibility Directive, Section 508 in the US, and JIS X 8341-3 in Japan — require Level AA compliance.

Level AAA is the enhanced standard. It requires 7:1 for normal text and 4.5:1 for large text. AAA is recommended for critical interfaces such as healthcare portals, government services, and financial applications where text legibility is essential.

Color blindness affects approximately 8% of males and 0.5% of females worldwide. The most common forms are protanopia (reduced red sensitivity), deuteranopia (reduced green sensitivity), and tritanopia (reduced blue sensitivity). Because color blindness changes how colors are perceived — not just their brightness — it is possible to have a passing contrast ratio under normal vision but poor readability under color-blind simulation. Always check both.

Pick colors → Color Picker

Generate palettes → Color Palette Generator

Create gradients → CSS Gradient Generator