Contrast check

Light grey on white looks clean on your screen and disappears on a phone in the sun. Pick a text color and a background to see whether people can actually read it, and what to use if they can’t.

Large text, 24px and up

Body text at 16px. This is the size most paragraphs, labels and buttons use, so it is the one to get right.

Small print at 13px, for captions and fine detail.

Contrast ratio

4.83:1

  • Passes: AA · Body text

    4.5:1 needed
  • Passes: AA · Large text

    3:1 needed
  • Fails: AAA · Body text

    7:1 needed
  • Passes: AAA · Large text

    4.5:1 needed

Large text means 24px and up, or 19px and up in bold. AA is the usual bar; AAA is stricter.

Nearest passing text color

#545964

7.02:1 on this background, enough for AAA body text

Same hue, just lighter or darker, so it should still feel like your color.