Example of a heading Far away beyond the Word Mountains, far from the lands of Vocalia and Consonantia, live the dummy texts. They live in seclusion in lettered houses on the coast of the Semantic, a huge linguistic ocean. A small stream called Webster flows through their land and supplies it with all the regulation it needs.

The colour values used to calculate the contrasts for printed products (except the CMYK color system) are taken from the Open Colour Systems Collection (OCSC) 2.0 of the freieFarbe e.V..

General notes

Various standards and guidelines prescribe specific contrast levels. This calculator is designed to be a helpful tool for designing inclusive print and screen media. It enables text designers without prior knowledge and experience in the area of accessibility and light and colour theory to roughly determine whether the contrast of certain colour combinations complies with the relevant standards before production. It must be noted however, that the actual contrast in the end product can greatly diverge from the calculated outcome due to lighting and materials properties different from those assumed to be standard here. Depending on the relevance of compliance with specific standards, a standardised measurement under real-life conditions may be necessary.

You will find a summary of this information in the chapter on »Colours« (in German) and further detailed information is provided in the DBSV’s brochure on »Kontrastreiche Gestaltung öffentlich zugänglicher Gebäude« (High-contrast design for publicly accessible buildings).

Background to the calculation

Below we explain how this calculator can be used to determine contrast for printed materials and screen displays.

Printed materials

German DIN-Norm 32975 prescribes a calculation using Michelson contrast to determine contrast (K). This calculation correlates the luminance of two surfaces, L1 and L2, as follows:

K=(L2-L1)(L2+L1)

Luminance measures the intensity of a luminous flux. The luminance of surfaces that are not themselves luminous is the result of the reflective properties of the surfaces under comparison and of the lighting situation. To calculate the contrast of two colour fields, their reflectance values or luminance must be known.

Reflectance values depend on the surface properties, materiality and colour of the surfaces being compared. They can be determined by using a standardised measurement method. The calculation uses the values database of the »freieFarbe e. V.« association. The association makes the CIE-Y values, also called luminance values, of calibrated colours from over 300 colour systems freely available. These values describe the reflection behaviour of each colour, so in this case the reflectance value P corresponds with the luminance value Y:

P≡Y

With the specification of CIE neutral white standard lighting, the luminance values Y1 and Y2 can also be directly included in the Michelson contrast calculation:

K=(Y2-Y1)(Y2+Y1)

DIN 32975 also stipulates that the lighter of the two colours must reflect at least 50 % of incident light so the reflectance value P, or in our case the luminance value Y, must be greater than 50.

Screen media

he WCAG include recommendations on contrast for screen display and define contrast as the contrast ratio of the colours under comparison. The colours’ relative luminance (brightness) are compared and expressed through the relative luminance value Y (CIE-Y), which is also used in the Michelson contrast calculation (see above).

The WCAG use sRGB colour space. To determine the contrast ratio of two screen or monitor colours however, the colours must first be converted from sRGB colour space into CIE-XYZ colour space. This can be done as the WCAG describes here. Here L can also be applied as CIE-Y.

Ultimately the contrast ratio is obtained through the following method:

K=Y1+0,05Y2+0,05

Y1 represents the relative luminance of the lighter and Y2 represents the relative luminance of the darker colour. The contrast ratio can range between 1 and 21 and is usually expressed in relation to 1 (21:1).