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 is the legal minimum in most jurisdictions (4.5:1 for normal text, 3:1 for large text). 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).

Color Contrast Checker

Name: Color Contrast Checker
Availability: InStock
Author: Nham Vu

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

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

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-06-09 · Reviewed by Nham Vu