Accessible colour contrast

Feb 16, 2022 • • 🍿 2 min. read in designtipsdesign

When designing and developing user interfaces, it's always good to use a colour contrast checker to make sure text is clearly readable, especially when placed against coloured backgrounds.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

This is especially important when designing using non-colour calibrated monitors, and in any case, you cannot guarantee what kind of screen someone else may be using when viewing your user interfaces, so the clearer you can make things, the better.

Tools I like to use to check colour contrast

Figma Plugin - Able

UI panel for Able

Natively on the Mac - ColorSlurp

UI panel for ColorSlurp
  • Colour picker (free)
  • Contrast checker (premium paid for)
  • Lots of other useful features

Online - WebAIM

UI panel for WebAIM
  • Contrast checker
  • Good explanation, as well as pass/fail for normal text, Large Text, and User Interface Components

Devtools contrast checker - in your browser for free

Open up Developer tools in Firefox or Chrome and click any colour chip in the Style panel, and it will give you the contrast, AA or AAA rating, and whether it's for large or small text, and you can edit colour values inline.

Further Resources

Posted in designtipsdesign