A11yColor

Color Contrast Calculator

Pick two colors — see if they pass WCAG accessibility contrast requirements.

Color 1 (hex)

Color 2 (hex)

Sample Text on Background

What you entered

Color 1: #1a1a2eColor 2: #e8e8e8

1
Luminance of #1a1a2e
rgb(26,26,46) → sRGB → weighted= 0.0116
2
Luminance of #e8e8e8
rgb(232,232,232) → sRGB → weighted= 0.8070
3
Contrast ratio
(0.8070 + 0.05) ÷ (0.0116 + 0.05)= 13.92:1
4
WCAG compliance
AA ≥ 4.5 | AA-large ≥ 3.0 | AAA ≥ 7.0= AA: Pass | AAA: Pass

Result

Contrast ratio: 13.92:1

The contrast ratio between #1a1a2e and #e8e8e8 is 13.92:1. This passes WCAG AA (≥4.5:1 for normal text) and passes WCAG AAA (≥7:1 for normal text).

WCAG contrast ratios for text on white

Contrast ratio runs from 1:1 to 21:1. WCAG AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1 and 4.5:1.

Foreground	Background	Ratio	AA normal	AA large	AAA normal	AAA large
#000000	#FFFFFF	21.00:1	Pass	Pass	Pass	Pass
#595959	#FFFFFF	7.00:1	Pass	Pass	Pass	Pass
#0066CC	#FFFFFF	5.57:1	Pass	Pass	Fail	Pass
#767676	#FFFFFF	4.54:1	Pass	Pass	Fail	Pass
#949494	#FFFFFF	3.03:1	Fail	Pass	Fail	Fail
#FFFFFF	#FFFF00	1.07:1	Fail	Fail	Fail	Fail

#767676 and #595959 are the exact boundary greys for AA and AAA body text on white, which makes them useful reference points when picking a muted text colour. Large text means 18pt, or 14pt bold, and above.

WCAG contrast ratio thresholds

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for enhanced compliance (AAA). Large text (18pt+ or 14pt+ bold) gets relaxed thresholds: 3:1 for AA, 4.5:1 for AAA. The ratio is calculated from the relative luminance of each color.

How relative luminance is calculated

Each sRGB channel is linearized (removing gamma), then weighted: L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). Black on white = 21:1 (maximum); same color on itself = 1:1 (minimum). Anything below 3:1 is generally unreadable for impaired vision.

Frequently asked questions

My brand uses light gray (#999) text on white — does it pass WCAG?

No. #999999 on #FFFFFF has a contrast ratio of about 2.85:1, which fails even the AA threshold of 4.5:1 for normal text. You'd need at least #767676 (4.54:1) to pass AA for normal-sized text.

What contrast ratio do I need for accessibility?

WCAG 2.1 requires 4.5:1 for normal text at AA level and 7:1 for AAA. Large text (18pt+ or 14pt+ bold) gets relaxed thresholds: 3:1 for AA and 4.5:1 for AAA.

Does this work with any color format, not just hex?

This calculator accepts hex color codes (#RRGGBB). If you have RGB values, convert them to hex first — each channel from 0-255 maps to a two-digit hex value (e.g., rgb(255, 128, 0) = #FF8000).