Design Tips /

Accessible colour contrast

Feb 16, 2022 • 🍿 2 min. read

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.
WebAIM

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

Able
UI panel for Able

Natively on the Mac - ColorSlurp

ColorSlurp
UI panel for ColorSlurp

Online - WebAIM

WebAIM
UI panel for WebAIM

Devtools contrast checker - in your browser for free

DevTools
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


← Back to Design Tips

Was this useful? →