Here is the palette of our Envoy service. Like many color schemes on the web, it includes corporate color (red), information color (blue), successful operation color (green), warning color (yellow), and various shades of gray.

Although these colors seem like a great palette, over time we realized that they are not flexible enough for all the needs of our user interface. The same commentary constantly popped up in the reviews: "The text is insufficiently contrasting."



[ Low contrast: text and background colors are too similar, making text reading difficult].

In the existing palette, the contrast of colors is too low, as a result of which many messages on the site are difficult to read. I decided to change the color scheme just for better readability. But I also wanted it to comply with the recommendations on web accessibility , that is, it would not create difficulties for people with visual impairments.

Design based on web accessibility means that you need to take into account the perception of the site by all users, regardless of their visual, auditory, motor or cognitive abilities. Accessibility standards are developed by organizations such as the World Wide Web Consortium (W3C), each site can implement these standards.

Here are just a few reasons why we decided to invest in the development of the color scheme taking into account web accessibility, and why you can also consider the possibility of creating it:

• Many people have imperfect vision : according to the World Health Organization, around the world 1.3 billion people live with some form of visual impairment.
  
• Better readability helps everyone : human vision is not the only factor. Think of different types of computers and devices with different levels of resolution and brightness. Better readability is good for everyone.
  
• Today’s recommendations tomorrow may become requirements : the number of lawsuits related to poor site availability is growing . Compliance with existing recommendations may reduce risks for the company.
  
• Empathy for users : as a designer, you have the power to release good into the world. Use your superpowers of empathy to help a wide range of people, simply because they are not indifferent to you.

I started developing a new color scheme with more contrasting, more affordable colors. To do everything right, it took some time and ideas that I want to share.

For starters, which colors are considered affordable?

The basic advice on color availability is the choice of colors that all people are able to distinguish . The ability to see a text is obviously necessary in order to read it and, therefore, to understand its meaning.

So how do we know what colors people distinguish? It's all about the contrast, which, as I mentioned earlier, is the difference between the foreground color and the background color.

In the example below, the text on the left is very similar to the background color (low contrast), and the text on the right is very different (high contrast) and much easier to read.



The Web Content Accessibility Guidelines (WCAG) developed by W3C provide a formula for calculating the contrast between two colors, with the calculationcontrast ratio .

The contrast ratio varies from 1: 1 (no difference) to 21: 1 (the highest possible value). They are easy to compute in many free tools: we like Tanaguru , Contrast and the Stark Sketch plugin .

The WCAG accurately determines the contrast ratios for the text to be read:

AA level: minimum standard.
The fine print should have a contrast ratio of 4.5: 1 or higher.
The large font 3: 1 or higher.

AAA level: Advanced standard.
The fine print should have a 7: 1 contrast ratio or larger
Large font 4.5: 1 or higher

Note: as “large”, non-bold font of size 18pt (24px) or larger or bold font of size 14pt (~ 19px) or larger is qualified; otherwise it is a “small” font. The W3C defines a point as 1/72 of an inch and a pixel as 1/96 of an inch, so to convert pixels to points, multiply the pixel value by 0.75.

How we made a more affordable color scheme

When we understood what the standards are and why they are needed, let me tell you about how we put them into practice.

Calculation of contrast ratios of all existing colors

Check all the colors in the existing color scheme using the handy tools that I mentioned above ( Tanaguru , Contrast , Stark ).



I found that none of our vibrant colors meets the 4.5: 1 standard for text, although we used them for text on our site. We also used some light gray shades for the text. It became clear that you have to adjust both the colors and shades of gray.

Grayscale selection

I have compiled a list of places where we have gray text on our site:

• The body of the paragraph, usually in the darkest shade of gray
  
• Additional text or subtitles, usually in the second darkest shade of gray
  
• Text of inactive functions and placeholders, usually in the third darkest shade of gray

Primary headers, secondary information 'host' and tertiary zero state

Such a 1/2/3 pattern is quite common on the Internet, so it’s convenient to start with it if we are developing a palette from scratch.


Testing different shades of gray by reducing opacity

We need three shades of gray that are sufficiently different from each other to assign them a primary, secondary and tertiary status, and that they meet the standards of accessibility.


Calculating the contrast ratio using the Stark Sketch plugin

Using Sketch, I drew a few squares filled with the darkest shade of gray. I reduced the opacity of one of the squares by 50% and looked at which pure color is closer in hex code. (You can only use opacity to create different colors, but pure colors are more flexible, they can be reliably applied to all tools and projects).

Then I calculated the contrast ratio of this lighter shade using the Stark plugin. I randomly chose 50%, but it turned out that this corresponds exactly to a 3: 1 ratio on a white background. Therefore, I took it as the lower border: it will be the lightest shade of gray that we will use on the site. It passes the AA level standards for large text, and it can be used for placeholders in form fields and other small text.



Now you need to find a value between 100% and 50% for the secondary text. Purely mathematically, 75% seems to be a good option, but having experienced different shades, I stopped at 65%, because it exactly matches the contrast of 4.5: 1.



The process takes some time, but just keep calculating the contrast ratios until you find the exact color value that matches the ratio you are aiming for.

When I had three basic shades of gray, I used the same process to define a few more shades for the icons, borders, and background (just not for the text!).

Bright colors selection

Honestly, dealing with grays was a lot easier. Selecting one basic “black” color and changing the opacity to search for new values ​​is a fairly simple procedure. But when it comes to choosing basic colors, you can change anything , so there are plenty of options.

As a starting point, I took the current palette, because it is quite meaningful. Our corporate color will not change, and other colors belong to the color families commonly used for web states: blue for information, green for successful operations and orange for warnings.


If Sketch shows RGB, click on the RGB label to switch to HSB mode.

I started with the base color for each family, then adjusted the saturation and brightness values to create colors of the same hue but with different contrasts.

Again, it took a long test to find the right colors that match the desired contrast values. The color palette is much more subjective; sometimes it was necessary to slightly adjust the shades so that they looked “right” on the eye.



The result is three shades of blue and green, which can be used for text with different contrast points.

It was difficult with orange: when darkened, it quickly turns brown, so we decided to take only the color with the lowest level of contrast, with a wonderful mustard tint, and use it sparingly.

I did not change the basic corporate color, but made two darker versions that can be used for text.

I also noted some bright low-contrast shades that can only be used as color accents for icons or graphic designs.

Finally, I created very pale shades of each color, which, if necessary, can be used as a background.

Summarizing

The result is a complete color scheme, which now meets the recommendations for accessibility and offers many options for all of our needs in text and UI.





We have carefully laid out new colors in CSS and are still very pleased with the results and improved readability.


Before and after

During this process of choosing colors, there were a lot of trial and error, but the result was a readable and accessible site for all our users.