As a designer, you should use high contrast colors. It will help users of websites and apps to perceive the content, regardless of visual impariments, 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 need to understand which colors are available and how they behave.
To get an overview of all colors, we look at the whole color wheel using the HSB color space. With 10°-steps, we move around the entire range of colors. In gradations of 10%, these colors become darker and, therefore, more contrasting. All colors stay at 100% saturation. I measured the WCAG contrast ratio for white text on each color varian and brightness gradation.
Colors for AA contrast ratio
With this method, we have now selected colors, which approximates how specific colors behave. Afterward, I improved the colors’ brightness until we come as close as possible to the target contrast ratio of 4.5: 1 to keep the colors bright and clear.
Talking about colors
Red remains fairly bright (B90%) with a contrast ratio of 4.5: 1. Yellow is immediately no longer recognizable as yellow. It is not particulary suitable for digital use since this color cannot be reproduced in RGB very well. On the other hand, Green provides very diverse tones and is easy to recognize but relatively dark for WCAG AA (B50%). Blue, Purple, and Violet are particularly suitable for high-contrast text and UI elements, as they already offer good contrast and so appear exceptionally pure and bright.
Colors for AAA contrast ratio
When looking for an even more apparent contrast, it becomes more difficult. The method proves to be even more imprecise here, and again we can set the colors significantly brighter by a few percent.
Talking about colors
Like the AA contrast colors, Red, Violet, and Purple remain relatively bright (B70%) with high contrast and are easily recognizable. Green is already very dark (B40%) and is no longer very apparent. The most transparent colors are the Blue tones, which can be recognized most clearly with almost constant brightness (B100%).
A good starting point
Based on our approach, we found a couple of very suitable colors. However, it will not be sufficient to adopt them. When choosing colors, we have to use the colors in context and test them to decide. If there is already a brand color, the colors should be adjusted. Also, the accessibility for color-blind users must be checked. To find the right colors based on the colors we saw, the 10°-Hue steps can be broken up to look for more suitable colors between these color tones. The saturation does not have to stay at 100% either. It can be matched to an existing color to achieve a harmonious appearance.
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. UI elements must also have a contrast ratio of 3: 1.
For our example, let’s look at a high-turnover website that is more challenging than a simple landing page due to its complexity. This mostly meets the requirements of WCAG AA. To make it simple to understand the use of colors, I have abstracted the visual elements and replaced the font and icons. This will help us focus on the colors on the page.
Let’s talk about the colors
The purple (# 6328e0) is, so far, an unusual choice. It has a high saturation (S82%) and is not dark (B88%). It is a very noticeable color that stands out due to its high saturation. This color is easy to read despite the high brightness in combination with white.
The green (# 00875a), which is labeling sustainability products, is also highly saturated (S99%). Compared to the purple, it is much darker (B53%). This is no surprise because most colors have to be relatively dark to achieve a sufficient contrast ratio. To keep the color clear, the darkness was compensated with the high saturation. For a color that is supposed to stand for “sustainability,” the green shade is astonishingly blue, and therefore, it looks less natural.
Orange (# ff4e00) is the brand color of the website. It is used very rarely and serves, for example, to mark the number of products in the shopping cart and as part of sub-brands and services. This color only partially meets the contrast requirements. The combination of white text and orange background would only be rich in contrast if large font-sizes were used.
A word about the “Myth.”
We might notice a phenomenon looking at the orange. Subjectively, this color combination will appear quite legible to many. Of course, WCAG AA is a good starting point for choosing colors. But we still have to check the selection of colors subjectively. Conversely to this example, there are also color contrasts that are sufficient according to the contrast value but are subjectively rather challenging to read. There is a good article on the subject that illustrates the problems with WCAG. However, I would advise against understanding WCAG as “not working.” It is a guideline that should technically show us how good contrast is between text and background. We should see it as a good anchor in discussing accessible color rather than an ultimate recommendation. A decision for or against a color should be made by testing our content with people.
Check color conflicts with Adobe Color.
We now know that the color of this website could mostly be considered accessible due to its contrast. Before we follow this interpretation, we still have to check to what extent these colors offer sufficient distinguishability for all forms of color blindness. This can be found out quickly using the Adobe Accessibility Tool. The colors are readable and there are no conflicts. All colors can be displayed simultaneously on one screen and remain distinguishable for all users. One of the most familiar visual impairments is the red-green weakness. The more yellowish orange (# ff4e00) and the blue-tending green (# 00875a) are not a problem in this case.
Use Stark Accessibility Software
With the Stark extension for Figma and Sketch, you can already simulate how specific colors work together while working in the design tool and whether these remain distinguishable for the different types of color blindness. This means that you can immediately see how distinguishable the colors stay in their appearance.
We discovered a good role model in our search for a website with accessible colors and want to create our own accessible color palette next. To do this, it is essential to determine what requirements we have for our colors. Further, we want to use these colors in context and then finally check them in a test.
If you’re wondering why does someone write about colors, there are several reasons. On the one hand, there is the European Accessibility Act. This will be incorporated into German law (and any other European, national law) by 2025. That makes it a necessary task to make the Internet more accessible. Planning phases and implementation can be tedious, and, especially when it comes to colors, the discussion is often wholly subjective. However, the subject of colors can be approached very methodically, which would make this subject less emotional. You can study color design, and that was also part of my studies. That is one of the reasons why I feel called to promote this topic in my circles.
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.
A trend called “Soft UI.”
Last year, the small, more or less hidden trend, Soft UI, appeared between all the already known trends on Dribbble. As we studied it carefully, we found many notable characteristics that we also find within current flat user interface designs. It seems that flat user interfaces have regained new three-dimensionality over the years. With more and more shadows or variants of card-styles that indicate interactions, our Flat Designs are becoming increasingly plastically. That’s something where today’s Flat Design and the new soft UI trend have something in common.
It reminds us of Skeuomorphic Design.
Before we test to design or app in Soft UI, we were looking back at Skeuomorphic Design. If you think of the old, last known Skeuomorphic Design of the iOS calculator, we are pretty sure that this design doesn’t fit in today’s flat design world. After looking at the frequently shared new interpretation of this old design trend and putting aside our doubts, we started experimenting with design elements in the skeuomorphic style. After that, we come across a surprising insight: The skeuomorphic design had something very characteristic that we haven’t seen for too long. It starts to please us very quickly.
After a few experiments with buttons in the Skeuomorpic design style and other designs in the form of the so-called Soft UI and a redesigned version of the flat design screens of the REWE app, it quickly becomes clear to us: The Skeuomorphic or Soft UI plastically appearance of elements like buttons created for today’s devices and resolutions (e.g., iPhone 11) is different from that on old phones. It sounds like an unabashed thesis that is initially just a feeling. But then we realized that these elements’ appearance is different — an even more realistic one than before.
Our first attempts were not perfect, but something seems to work very well on it. It feels satisfying to design elements in the Soft UI style, and it produces the “I want to press it”-impulse, much more than a flat button does. But what is the reason for that feeling?
Soft UI has something honest and also wonderfully complicated.
Our impressions on Soft UI
Compared to classic Skeuomorphic design, Soft UI is like an approach from both sides. It is a further development of flat design, but it is still apparent: it borrows its style from Skeuomorphism. And that is precisely what makes it a fascinating and valuable trend. Soft UI is simpler and more manageable to use but supports this intensified impulse to press a button. But it also shares the limitations of Skeuomorphic design because it is also restricted in its nature. It is not as flexible as a flat design. The impression on our devices during prototyping is a strong and almost inviting visual design. As designers, it triggers a feeling of satisfaction because this type of design (even more when recreating Skeuomorphic Design) is fun to create. This design has something honest and also wonderfully complicated. Trying to recreate reality on a screen and abstracting it straight away to make it more applicable was worthwhile for the experiment alone.
A word about the cons of using Soft UI.
It’s hard to compete against the flexibility of flat design. With Soft UI, we are limited to a less variable style, more complex, and certainly not always suitable for everything. You have to stay at specific rules to achieve a plastic appearance. That may sound like we aren’t good designers, but you come up against the limits quickly when you try it yourself, which makes you question the style for production use. When converting a design to Soft UI, it might be necessary to rethink your whole concept. It isn’t effortless and takes time to adapt all elements accordingly. The use of colors requires much creativity. Colors of buttons on identical background colors do not work per se. Button colors and similar shadow- or gradient colors do not always support clickable elements’ three-dimensional appearance.
And a sentence about the positive sites of Soft UI.
It is a fun and unusual challenge to design our already favorite products differently. Recreating Skeuomorphic in 2020 or using Soft UI and seeing it on modern devices is fun. The discussion about the visual impression of a Soft UI made us reflect on our current designs.
The impression is different. We don’t feel like reintroducing an old design language, but it feels like something new. And that is the most important thing. It shouldn’t be about adapting all elements of our design and displaying them in Soft UI. It should be about to use it in individual cases, possibly for more minimalistic applications, to emphasize some elements that should have a highlighted click intention.