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.

Hue, Saturation, and Brightness

We are searching for colors that can suit our products requirements.
For that reason, we…

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…

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.