Colours

Our goal is to provide a colour palette that allows a lot of freedom, is easy to use for all employees, but at the same time looks harmonious and meets some accessibility requirements.

This colour palette is the base for all of our products, company documentation, presentations, and similar.

See also

Find the the colour palette and specifications on the assets on the on the confirm assets website.

Characteristics

  • Modular
    The palette contains different colour families. The family itself consists of different variants and shades of a colour.
  • Interchangeable
    We can replace one colour family with another since different colours with the same gradation value share the same grey value.
  • Accessible by default

    • (WCAG) 2 Level AA is met for all colours with white or black text colour

    • Level AA is also met for colours that are at least 4 Steps apart

Accessibility values

We ensure that we achieve at least level AA, with AAA being desirable. That means:

  • For level AA the required contrast between foreground and background for text is at least 4.5, for headlines and large text at least 3.

  • For level AAA for text is at least 7, for headlines and large text at least 4.5.

  • Interface elements require a contrast value of at least 3.

black

color-10

color-20

color-30

color-40

color-50

color-60

color-70

color-80

color-90

color-100

white

Contrast-Ratio White

—

—

—

—

7

4.5

3

—

—

—

—

—

Text normal

AAA

AAA

AAA

AAA

AAA

AA

—

—

—

—

—

—

Text large / Headlines

AAA

AAA

AAA

AAA

AAA

AAA

AA

—

—

—

—

—

Contrast-Ratio Black

—

—

—

—

3

4.5

4.5

7

—

—

—

—

Text normal

—

—

—

—

—

AA

AA

AAA

AAA

AAA

AAA

AAA

Text large / Headlines

—

—

—

—

AA

AAA

AAA

AAA

AAA

AAA

AAA

AAA

Notes & hints

Luminance

The colour spaces of green, cyan and yellow are brighter than their counterparts. These colour families define the base line for the mid grey value. Thus, they affect the luminance of all other colours.

Sources & tools