Always look on the bright side of contrast ratio!
In app, web, and digital content terms, Contrast Ratio is a number that expresses the comparison between the luminosity (or perceived brightness) of two colours. It is most commonly used to define the readability of text with the ratio being the comparison of the text colour and the background colour.
The higher the first number, the higher (better) the contrast is – meaning there is a greater distinction between the luminosity of the colours. A ratio of 3:1 means that colour one, is three times more luminous than colour two. Black(#000000) and white(#FFFFFF) have a contrast ratio of 21:1
Maintaining a good contrast ratio has an impact all of your users, but more so on users with low vision, and users with colour blindness. Up to 8% of men have some form of colour deficit in their vision. Colours may appear easily distinguishable due to their place on the spectrum, but still have a low contrast ratio; meaning they may be difficult for users with low vision or colour blindness to perceive. Although a user on a 4.7-inch screen in bright sunlight will equally benefit from good contrast ratios.
Contrast Ratio isn’t an isolated measure – there isn’t a magic ratio where text magically becomes readable to everyone. Screen resolution and size, font choice (size, weight, style), screen brightness, viewing environment, and what is actually being communicated in the text will all impact readability.
Text is considered anything that needs to be read and includes headings, images of text, dates, disclaimers, buttons, menus, alternative text, icons, and body text.
Foreground text should maintain a contrast ratio of at least 4.5:1 with it's background.
- Headings or large text should maintain a contrast ratio of at least 3:1
- Headings or large text that also has a gradient, should maintain the 3:1 contrast ratio in at least 75% of the text, with the remaining to maintain a contrast ratio of at least 2:1
- Text that is part of an inactive user interface component, is decorative, not visible to anyone, or is part of a picture that contains significant other visual content, has no contrast requirement
- Text that is part of a logo or brand name has no minimum contrast requirement
A Colour Contrast Analyser tool for Windows and MAC can be downloaded from the Paciello Group website.
The two examples below show that as a designer, you don't have to totally change your design and style guide to you meet accessibility standards.
Red text (#d04332) on current background (#f2f2f2) with a contrast ratio of 4.4:1 fails WCAG 2.0 AA standards
Red text (#c14030) on current background (#f2f2f2) with a contrast ratio of 4.9:1 passes WCAG 2.0 AA standards
*This guidance aims to meet WCAG 2.0 AA level compliance and has been adapted for app relevance.