♿ Color Contrast Checker

Check WCAG 2.1 AA & AAA accessibility contrast ratios between any two colors — instantly.

Choose Two Colors
Foreground (Text)
#
rgb(26, 26, 46)
Background
#
rgb(255, 255, 255)
Relative Luminance
FG: 0.006 BG: 1.000
Sample Pairs
Recent Checks
21:1
Contrast Ratio
Passes All WCAG Levels
MIN REQUIRED
AA Normal: 4.5:1
AAA Normal: 7:1
AA Large: 3:1
Live Text Preview
Large Text — Heading Sample (18pt / 14pt Bold)
Normal body text at 16px. The quick brown fox jumps over the lazy dog. This paragraph demonstrates how readable your color combination is for everyday reading.
Small text at 12px — captions, footnotes, metadata. Harder to read and held to a stricter contrast standard under WCAG.
Badge Link text
Suggested Accessible Colors (alternatives that pass AA)
Check a color pair to see suggestions.

Understanding WCAG Contrast Requirements

WCAG 2.1 AA

The minimum legal and practical standard. Requires 4.5:1 for normal text and 3:1 for large text (18pt+) or bold large text (14pt bold+). Also requires 3:1 for non-text UI components such as buttons and form fields.

WCAG 2.1 AAA

The enhanced accessibility standard. Requires 7:1 for normal text and 4.5:1 for large text. AAA compliance is not required for entire sites but is ideal for high-readability interfaces such as medical or government portals.

Relative Luminance

Luminance is the perceived brightness of a color on a scale of 0 (black) to 1 (white). The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. Black-on-white achieves the maximum ratio of 21:1.

Why It Matters

~300 million people worldwide have color vision deficiency; ~2.2 billion have some form of vision impairment. Adequate contrast benefits everyone — especially in bright sunlight, on low-quality screens, or for older users with reduced contrast sensitivity.