Sign in

Help › Guides

Check text contrast

Test text and background colors before you use them.

Text needs enough contrast against its background to be readable. The measure is the : at least 4.5:1 for body text and 3:1 for large text.

Use colors from the system's instead of picking new ones, since every token pair was chosen with contrast in mind. The palette is on the Color page.

Keyboard users depend on a visible outline as well: see , and check that it also meets 3:1.

  1. Pick the text color and its background from the tokens.
  2. Check the pair with a contrast checker.
  3. If it fails, choose a darker text token or a lighter background token.

Linked from