WCAG Color Contrast

As a designer, you should use high contrast colors. It will help users of websites and apps to perceive the content, regardless of visual impairments, technical restrictions, and external influences. WCAG is a standard that should help designers defining a distinct contrast ratio.

Three levels can be reached:

“A” for large text and UI elements, which require a contrast ratio of 3: 1.

“AA” is required for regular text. It requires a contrast ratio of 4.5: 1.

“AAA” requires a contrast ratio of 7: 1.

WCAG contrast ratio of white on HSB colors. Brightness from 100% to 30%; All colors with 100% saturation
WCAG contrast ratio of white on HSB colors. Brightness from 100% to 30%; All colors with 100% saturation

Hue, Saturation, and Brightness

We are searching for colors that can suit our products requirements.
For that reason, we need to understand which colors are available and how they behave. …


Designers are looking for recognizable, distinguishable, and in the form of text legible colors for all of our users. The aim is for all users to perceive a page’s content, regardless of visual impairments, technical restrictions, and external influences. To achieve this goal, we want to look for a role model, a website that already uses accessible colors. A good starting point is to reach the WCAG requirements.

Start with the contrast ratio.

WCAG can be measured easily. For example, if you use Google Chrome, you can use the “View Page Source” tool to select every single element of a website and check the contrast ratio. So when we look for examples, we’re looking for websites that already match the WCAG-AA requirements. This means that the contrast ratio is at least 4.5: 1 for regular texts and 3: 1 for large texts. …


Soft UI, which reminds us of skeuomorphic design, is a trend we observed recently in 2020. We tried it out ourselves and found out it’s fun to use, but you have to be careful with it. We want to approach this trend by applying the current trend to our app.

Image for post
Image for post

About

Lukas Kühne

User Experience Designer at REWE digital — https://www.linkedin.com/in/lukasckuehne/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store