.. _Colours: 🎨 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. Find the range of colours and examples of use here: 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**. .. rst-class:: table-custom-accessibility +----------------------------+-------+----------+----------+----------+----------+----------+----------+----------+----------+----------+-----------+-------+ | | 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 | +----------------------------+-------+----------+----------+----------+----------+----------+----------+----------+----------+----------+-----------+-------+ Colour palette -------------- .. include:: colour-palette.rst Colour specifications --------------------- .. include:: colour-specs.rst 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 ~~~~~~~~~~~~~~~ - `Color in UI Design: A (Practical) Framework `_ - `Designing Systematic Colors `_ - `Because, colors are beautiful `_ - `Web Content Accessibility Guidelines (WCAG) 2 Level AA Conformance `_ - `Color.review `_