Contrast measurements

Reading difficulties induced by a low contrast is a recurring design flaw in web and software interfaces, even more so since (light) grey on white backgrounds is a fashionable color combination for text. A quick visit on the Dribble website, a social network where graphic designers share their work, is eloquent of this tendency: readability and user experience are second place in the concerns of many designers.

One can very simply measure and evaluate the contrast between a text font and its background with the help of free online tools. It is possible to obtain a contrast ratio using the colors’ hexadecimal or RGB codes (i.e.: https://webaim.org/resources/contrastchecker). This evaluation can also give information relative to color blindness (i.e.: https://contrastchecker.com) or color alternatives close to the original palette (i.e.: http://contrast-finder.tanaguru.com).

Design for Lucy recommends a minimal contrast ratio of 4,5:1 for general uses, in conformity to the level AA of the WCAG directives. However, a ratio equal to or above 7:1 is ideal (WCAG level AAA) and can be required for special purpose applications.