We created a range of accessible UI Colors

Lukas Kühne
3 min readOct 7, 2021


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.

Accessible color range for positive feedback. Green in 7 variants
A Green color range for positive feedback

Use Blue (# 0065CB) to display notifications that do not represent an error.

Accessible color range for notification. Blue in 7 variants
A Blue color range for notifications

Use Red (# CC071E) to communicate error messages.

Accessible color range for errors. Red in 7 variants
A Red color range for errors

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:

Examples of accessible text/background styles. Very light green on a darker green for positive feedback; Very light red on a darker red for errors; Very light blue on a darker blue for notifications; Grey on black for diverse messages.
Examples for accessible text/background styles

Black #1c1c1c as Font Color

Accessible color range for texts and background. Grey/Black in some variants

Use 1000 as the regular font color. But you can also apply the same rules described above for WCAG conform text styles.