We created a range of accessible UI Colors
What are Interface colors?
Those colors intend that the design elements of our application or website have a clear and explicit use and help our users to understand how they can interact with the page's UI elements or make the page's communication more obvious to understand.
"Where do I need to click or tap?"
"How to interact with this application?"
Further, the goal is to give strict and consistent meaning and contextual information that can not be misunderstood. E.g., Giving hints:
"Here, you can save money."
"Here occurred an error."
"Here, you can proceed with the process."
Colors need to be readable and accessible and should create a hierarchy and can be used to form an attention economy. We want our interface colors as perceptible as possible. Therefore, we want to ensure that they are as bright and saturated as possible and still suit an accessible contrast ratio.
Our four primary User Interface Colors
Each of our colors has a specific intention and should be used to fulfill this intention across all digital touchpoints.
Use Green (# 007D3E) to present and communicate positive feedback.
Use Blue (# 0065CB) to display notifications that do not represent an error.
Use Red (# CC071E) to communicate error messages.
We selected all colors in a schematic variance (1000–600).
The gradations that result from this can be used in the same way and fulfill the same intention.
The difference in the gradations is the contrast value between the color, e.g., "Green" and White.
Please use the gradations according to the necessary contrast.
See accessibility guidelines:
3:1, WCAG "A" for Headlines, Buttons, Icons & Illustrations
4.5:1, WCAG "AA" for Copytext
7:1, WCAG "AAA" for example, for outside screens with a high incidence of light.
Variants 100 and 50 are different from the others. Use these as a background or font color for a more visually apparent style. Don't combine these variants with White (or any other colors). Combine the variants 100 and 50 with the same color and at least the gradations 800 (for contrast value: 4.5: 1, WCAG "AA") and 1000 (for contrast value: 7: 1, WCAG "AAA.”)
The variants 700 (for contrast value: 4.5: 1, WCAG "AA") and 900 (for contrast value: 7: 1, WCAG "AAA") meet the contrast requirements with White as font or background color.
Examples for a confirm WCAG "AA" use of the colors:
Black #1c1c1c as Font Color
Use 1000 as the regular font color. But you can also apply the same rules described above for WCAG conform text styles.
