What is WCAG and why does contrast matter?

WCAG (Web Content Accessibility Guidelines) is an international standard published by the W3C. Sufficient color contrast ensures that text is readable for users with low vision or color-blindness. Failing contrast requirements is one of the most common WCAG violations.

What is the difference between WCAG AA and AAA?

AA (4.5:1 for normal text, 3:1 for large text) is the level most laws and policies point to, such as the 2024 ADA Title II rule in the US and EN 301 549 in the EU. AAA is the enhanced level (7:1 for normal text, 4.5:1 for large text) and is recommended for critical interfaces or government sites.

What counts as "large text" under WCAG?

WCAG defines large text as at least 18pt (approximately 24px) in regular weight, or at least 14pt (approximately 18.67px) in bold weight. The preview in this tool shows representative sizes so you can see how readability changes.

How is the contrast ratio calculated?

Each color is converted to a relative luminance value using the sRGB gamma formula: L = 0.2126·R + 0.7152·G + 0.0722·B, where R, G, B are linearized channel values. The ratio is then (L_lighter + 0.05) / (L_darker + 0.05), and ranges from 1:1 (no contrast) to 21:1 (black on white).

What contrast do buttons, icons and form borders need?

WCAG 2.1 success criterion 1.4.11 asks for at least 3:1 between a control or meaningful graphic and the colors next to it. Use the AA Large badge here as the 3:1 check.

Did WCAG 2.2 change the contrast ratios?

No. WCAG 2.2 (2023) kept 4.5:1, 3:1 and 7:1. APCA, a newer contrast method, is being discussed for WCAG 3, but it is not a requirement today.

Color Contrast Checker

Pick foreground and background colors to instantly see the WCAG 2.1 contrast ratio and pass/fail results for AA and AAA levels.

WCAG AA needs a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.67px bold).

Foreground (Text)

Background

Contrast Ratio —

AA Normal 4.5:1 min —

AA Large 3:1 min —

AAA Normal 7:1 min —

AAA Large 4.5:1 min —

Live Preview

12px — The quick brown fox jumps over the lazy dog.

14px — The quick brown fox jumps over the lazy dog.

18px — The quick brown fox jumps over the lazy dog.

24px Bold — Color Contrast Checker

Quick answer

WCAG AA needs a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.67px bold). AAA raises that to 7:1 and 4.5:1. Enter two hex colors to get the exact ratio. #767676 is the lightest gray that passes AA on white.

Examples

Colors	Ratio	AA normal text
#000000 on white	21:1	Pass
#333333 on white	12.63:1	Pass (AAA too)
#595959 on white	7:1	Pass (AAA too)
#767676 on white	4.54:1	Pass
#777777 on white	4.48:1	Fail
#999999 on white	2.85:1	Fail
White on #FF0000	4:1	Fail (large text passes)

Test your two colors.

Summary

Pick foreground and background colors to instantly see the WCAG 2.1 contrast ratio and pass/fail results for AA and AAA levels.

How it works

Choose a foreground (text) color using the color picker or type a HEX code.
Choose a background color using the second color picker or HEX input.
Read the contrast ratio and pass/fail badges for WCAG AA and AAA at normal and large text sizes.
Use the Swap button to reverse foreground and background colors.
Click Suggest Fix if any level fails — the tool nudges the lighter color lighter (or darker color darker) until the target passes.

Use cases

Verify UI designs meet WCAG 2.1 AA before shipping to production
Audit existing web pages for accessibility compliance
Choose accessible color palettes during brand development

Frequently Asked Questions

Last updated: 2026-05-28 · Reviewed by Nham Vu