Check WCAG AA/AAA contrast for text and UI, preview live, and get the nearest accessible shade.
Quick presets
Foreground (text)
rgb(154, 154, 154)
Background
rgb(255, 255, 255)
Contrast ratio
: 1
Normal text · AA
needs ≥ 4.5 : 1
Fail
Normal text · AAA
needs ≥ 7 : 1
Fail
Large text · AA
needs ≥ 3 : 1
Fail
Large text · AAA
needs ≥ 4.5 : 1
Fail
UI / Graphics
needs ≥ 3 : 1
Fail
Nearest accessible foreground
Normal-text AA fails. This shade keeps the same hue but reaches 4.54 : 1.
#767676
Live preview
Large heading, 24px bold
Body copy at 16px. The quick brown fox jumps over the lazy dog while the honeybee drifts between the clover blossoms in the warm afternoon light.
Small print at 13px — captions, footnotes, and helper text often live down here where legibility matters most.
#9A9A9A on #FFFFFF
2.81 : 1
WCAG 2.1 · normal text needs 4.5:1 (AA) or 7:1 (AAA); large text (≥ 24px, or ≥ 18.66px bold) needs 3:1 (AA); UI components and graphics need 3:1.
