What are the WCAG AA and AAA contrast ratio thresholds?

For normal body text (16px/12pt), AA requires 4.5:1, AAA requires 7:1. For large text (18px/14pt bold or 24px/18pt), AA requires 3:1, AAA requires 4.5:1. UI elements and graphical objects require 3:1.

How does the automatic contrast suggestion fix work?

The tool analyzes the relative luminance of both colors and incrementally adjusts the foreground color (darker on light backgrounds, lighter on dark) until it reaches the 4.5:1 AA normal text threshold.

What counts as 'large text' for WCAG contrast?

Text at least 18pt (24px) or 14pt bold (18.67px). The tool shows a live reference so you can see exactly what qualifies.

Are active UI elements like inputs and borders subject to contrast requirements?

Yes. Interactive components, icons, borders, and focus rings require at least 3.0:1 contrast ratio under WCAG 2.1.

Can I simulate color blindness on this checker?

Yes. Real-time filters simulate Protanopia, Deuteranopia, Tritanopia, and full Grayscale (achromatopsia) so you can see how color-deficient users perceive your combinations.

How is relative luminance calculated?

Using the WCAG 2.1 formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B (with sRGB gamma correction), where R,G,B are linearized 0–1 values.

Contrast Checker

Measure text and background colors against WCAG AA and AAA ratios, with color-blindness previews.

Runs in your browser. Your input isn't uploaded.Last updated: September 2026see changelog

About this tool

A visual accessibility checker that evaluates color combinations against WCAG 2.1 standards. Calculates real-time contrast ratios using the W3C relative luminance formula, displays a live compliance matrix for AA/AAA normal/large text and UI elements, provides color blindness simulations (protan, deutan, tritan, achroma), and suggests accessible foreground alternatives when contrast fails.

Color contrast is the most common accessibility failure on the web. This tool runs entirely in your browser — no uploads, no tracking — giving you instant, accurate compliance checks while you design.

Key capabilities

Real-time contrast ratio using WCAG 2.1 relative luminance formula
WCAG 2.1 AA/AAA compliance matrix: normal text, large text, UI elements
Live text size reference showing 16px/18px/24px at correct thresholds
Color blindness simulations: protanopia, deuteranopia, tritanopia, achromatopsia
Automatic accessible color suggestion (adjusts foreground to meet 4.5:1)
Brand palette presets for quick testing
Copy HEX values for foreground, background, or both

Accessible Combo — Dark Forest on Cream

Meets all WCAG thresholds comfortably.

Text: #283618 | Background: #FEFAE0
Ratio: 11.23 : 1
WCAG AA Normal: PASS
WCAG AAA Normal: PASS

Failing Combo — Light Orange on White

Fails both AA and AAA for normal and large text.

Text: #DDA15E | Background: #FFFFFF
Ratio: 1.84 : 1
WCAG AA Normal: FAIL
WCAG AA Large: FAIL

Borderline — Medium Gray on White

Passes AA Large (3:1) but fails AA Normal (4.5:1).

Text: #767676 | Background: #FFFFFF
Ratio: 4.54 : 1
WCAG AA Normal: PASS (barely)
WCAG AA Large: PASS

Related Tools

Browse all CSS Tools

Contrast Checker

About this tool

Key capabilities

Accessible Combo — Dark Forest on Cream

Failing Combo — Light Orange on White

Borderline — Medium Gray on White

Local Browser Processing

Frequent User Mistakes to Avoid

Related Tools

About this tool

Key capabilities

Accessible Combo — Dark Forest on Cream

Failing Combo — Light Orange on White

Borderline — Medium Gray on White

Local Browser Processing

Frequent User Mistakes to Avoid

Related Tools

CSS Gradients

Color Picker

Border Radius Generator

Box Shadow Generator