WCAG Color Contrast Checker

Your data never leaves your browser

Check WCAG 2.1 contrast ratios for AA and AAA, normal and large text. Live preview plus accessible color suggestions.

The quick brown fox jumps over the lazy dog

Small text sample (14px regular)

Foreground (text)

Background

Presets:

Contrast Ratio

21.00:1

AA Normal text (4.5:1)✓ Pass

AA Large text (3:1)✓ Pass

AAA Normal text (7:1)✓ Pass

AAA Large text (4.5:1)✓ Pass

UI Components (3:1)✓ Pass

Accessible tint/shade palette (based on foreground hue)

Click any palette swatch to apply it as the foreground color

Share this tool

Found it useful? Help a fellow developer discover it.

https://developertoolkit.dev/tools/color-contrast

Color contrast and accessibility

Low contrast between text and its background is one of the most common accessibility failures on the web. Users with low vision, color blindness, or anyone reading in bright sunlight or on a low-quality display all benefit from sufficient contrast. WCAG 2.1 defines three levels: A, AA, and AAA. The AA level, requiring a 4.5:1 ratio for normal text and 3:1 for large text, is the legally enforceable minimum under the ADA, Section 508, and the European EN 301 549 standard. The AAA level is stricter at 7:1 and 4.5:1, and is recommended where possible. This tool computes the contrast ratio using the WCAG relative luminance formula and instantly shows pass or fail badges for every threshold. The accessible palette below the result uses the same hue as your foreground color and generates nine tints and shades so you can pick a passing alternative without starting over.

Level	Normal text	Large text	UI components
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	N/A

Level

Normal text

Large text

UI components

4.5:1

3:1

AAA

7:1

4.5:1

N/A

Frequently Asked Questions

What is a good contrast ratio?

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Aim for AA as a minimum baseline, and push for AAA where design allows.

What counts as large text?

Large text is defined as 18pt (approximately 24px) at normal weight, or 14pt (approximately 18.66px) at bold weight. Below those sizes the stricter AA and AAA normal-text thresholds apply.

Does this send my colors anywhere?

No. All contrast calculation happens locally in your browser using the WCAG relative luminance formula. No data is transmitted.

Why does my color pass AA but not AAA?

AAA is a stricter standard, requiring 7:1 instead of 4.5:1. To bridge the gap, darken the foreground color or lighten the background. The palette section below the checker suggests shades that reach AA on a white background.

Does this cover WCAG 3.0 or APCA?

This checker uses WCAG 2.1 contrast ratios, which are the current legal and enforcement standard. WCAG 3.0 introduces the APCA algorithm but is still a working draft. WCAG 2.1 AA is the safe target for production work today.

WCAG Color Contrast Checker

Color contrast and accessibility

WCAG 2.1 contrast thresholds

Frequently Asked Questions

Related Tools