Color & Contrast

Check text contrast against WCAG AA and AAA, and generate tints and shades from a base color.

Contrast ratio14.05 : 1

AA · Normal text

≥ 4.5

Pass

AA · Large text

≥ 3

Pass

AAA · Normal text

≥ 7

Pass

AAA · Large text

≥ 4.5

Pass
Live preview

The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This paragraph demonstrates how normal-size body text reads against the chosen background color at the current contrast ratio.

Text and background use the exact colors above, so what you see is the real contrast.

Tints & shades from background#f9fafb

Tints

#fefefe
#fdfefe
#fcfdfd
#fbfcfd
#fbfbfc

Shades

#252626
#4b4b4b
#707171
#959697
#bbbcbc

Click any swatch to set it as the background color, or copy its hex.