Contrast and colour

Black text on a white background (or vice versa) provides optimum contrast.¹ For body text, dark text on a light background is more easily legible that light text on a dark background.²

When using negative text (light text on a dark background), choose a heavier font weight. You should also increase font size by approx. 10% and tracking by 2%³ (see 1.5 Intercharacter space).

Backgrounds should always provide sufficient luminance density contrast to overlaid text. Contrast is expressed in terms of Michelson contrast for printed media and as contrast ratio for web content. As a general rule, the minimum Michelson contrast for printed matter is 0.7.⁴

According to WCAG 2.1 (Web Content Accessibility Guidelines), the minimum acceptable contrast ratio for web content is 4.5:1 (corresponding to a Michelson contrast of 0.6). However, a contrast ratio of at least 7:1 (Michelson contrast 0.8) should be applied for font sizes below 18 pt or 14 pt bold.

Red and green combinations should be avoided as they are unrecognisable to people with red-green colour blindness.⁵ Contrasts using complementary colours are also unsuitable as they can create a flickering effect.⁶

In both cases, however, any negative effects can be mitigated or eliminated by following the recommended luminance density contrast values.

Semantic colour-coding conventions should be followed, e.g., red for danger, green for emergency exits, etc.⁷

Images and colour gradients make unsuitable text backgrounds as they both result in changing and confusing contrast ratios.⁸

Contrast Calculator

The Contrast Calculator can be used to check individual colour values for character and background colours to ensure adequate contrast for both four-colour printing and screen displays.

Information on the calculation method and an extended range of functions with contrast calculations based on over 200 colour systems are available in the expert version of the Contrast Calculator.