What is contrast in typography

Contrast and colors

To the recommendation

Black text on a white background (or vice versa) shows the optimal contrast.see.

Plain text
Accessible design of written information DBSV, 2008
For reading text, dark text on a light background is easier to read than the other way around.DIN 1450
Fonts - Legibility April 2013 edition

In the case of negative text (light text on a dark background), a heavier font weight must be used and the font size increased by approx. 10% and the spacing by 2%.see.

DIN 1450
Fonts - Legibility April 2013 edition
(see also chapter character spacing).

Backgrounds must have sufficient contrast to the text. Contrasts are expressed as (print) or as a contrast ratio (web).

When printing, the Michelson contrast should not fall below 0.7 in general.see.

DIN 1450
Fonts - Legibility April 2013 edition
DIN 32975
Design of visual information in public space for barrier-free use, 2009
DIN 5340
Terms of Physiological Optics Edition April 1998

According to WCAG 2.1, the lower limit on the web is the contrast ratio of 4.5: 1 (this corresponds to a Michelson contrast of 0.6). For font sizes below 18 pt or 14 pt bold, a contrast ratio of at least 7: 1 (0.8 according to Michelson) must be observed.

Red-green combinations should be avoided as they will not be recognized by people with red-green blindness.see.

DIN 1450
Fonts - Legibility April 2013 edition
DIN 32975
Design of visual information in public space for barrier-free use, 2009www.beuth.de/de/norm/din-32975/122103522
Guide to accessible exhibitions Deutsches Technikmuseum Berlin, 2008Improving visual information in public spaces Federal Ministry of Health, 1996In addition, contrasts of complementary colors are unsuitable as they lead to a flicker effect.see.

Plain text
Accessible design of written information DBSV, 2008

When using colors, semantic conventions regarding color coding must be observed, such as B. Red for danger, green for escape routes etc.see.

DIN 32975
Design of visual information in public space for barrier-free use, 2009www.beuth.de/de/norm/din-32975/122103522
Plain text
Accessible design of written information DBSV, 2008

Images and color gradients are unsuitable as a text background, as both lead to changing and irritating contrasts.see.

Plain text
Accessible design of written information DBSV, 2008
PRO RETINA Deutschland e.V. Barrier-free - and everyone knows where to go! 2012 www.pro-retina.deThe inclusive museum
Guide to accessibility and inclusion German Museum Association, 2013

Contrast calculator

With this contrast calculator, individual color values ​​for character and background colors can be checked for sufficient contrast for four-color printing or monitor applications:

Information on the calculation basis and an extended range of functions with contrast calculations for different color systems can be found in the expert version of the contrast calculator.

Depending on the relevance of compliance with certain standards, standardized measurement under real conditions is unavoidable.

Summarized recommendations

  • Maintain a clear contrast between the reading object (text) and the background (≥ 0.7 according to Michelson) - see contrast calculator
  • With black text on a white background (or vice versa) the contrast is optimal
  • For negative text, increase the font size by 10%, spacing by 2% and the line width
  • Do not put text over images or gradients
  • Use colors sparingly and clearly distinguish them from one another
  • In addition to the color, always use another distinguishing feature
  • Avoid red-green combinations and complementary contrasts
  • Observe semantic color conventions
  • For web applications, observe WCAG 2.1, Level AAA