Text Colour contrasts (Part 2): How to choose the right colour combinations for my website?

In the first article about text colour contrasts, we looked into for whom it is important to have sufficient contrasts between a text colour and its background’s colour.

In this second article, we will be giving you a few leads to create graphical mock-ups compliant to the contrasts’ ratios expected for accessibility. Indeed, choosing colour combinations isn’t necessarily an easy thing; choosing the right accessible and readable combinations, even less. Thankfully, there are a few tools to help you choose those combinations.

Verifying the colour combinations

When the colours of the company’s corporate identity are already defined, and you need to start the conception of a new website, or when creating a corporate identity, it is important to verify as soon as possible that the colour combinations for texts and backgrounds are accessible.

The Atalan company created a matrix for the contrasts’ analysis of a corporate identity (article in French), which is very useful and allows to avoid quite a few catastrophes.

In the screenshot of the above matrix, it is possible, for example, to identify if the following combinations are compliant for a AA level:

• White with black, dark blue, dark grey, red or purple;
• Orange with black or dark blue;
• Red with white or light grey;
• Green with black only;
• etc.

Finding the right contrast ratios

Tanaguru Contrast Finder is a tool suggesting valid contrasted colour depending on the chosen accessibility level.

It is an online tool that allows to select the text colour, the background colour and the minimum contrast ratio expected. (3:1, 4.5:1, 7:1).

Then, depending on your needs and if the contrast ratio is invalid, you may require for the tool to provide:

• examples of valid text colours while keeping the original background colour;
• or examples of valid background colours while keeping the original text colour.

In both cases, the tool will provide either valid colours close to the original colour, or a range of valid colours.

For example, for a green text colour on a light green background colour, we can request a valid colour range for the text colour while keeping the background colour. In this case, green, violet, blue and grey text colour suggestions could be provided.

Testing a website’s contrasts

An essential tool to test colour contrasts is Colour Contrast Analyser (CCA) by The Paciello Group.

It is a very useful small software available for both Windows and Mac:

• It provides an Eyedropper functionality that allows to pick the colour to be tested all the while zooming and hovering over the area with the mouse pointer.
  Note: unfortunately, the zoom option no longer exists in the latest version of CCA, therefore I personally keep on using the previous version (previous CCA version for Windows and Mac);
• It indicates the colour combination compliant for AA and AAA levels while showing the outcome;
• It allows to see how it is rendered for at least three different types of daltonism while indicating the corresponding contrast ratio.

Managing the text contrast on or in images

Writing text on images is a habit often seen on the web.

If, at the beginning of the project, the graphists carefully chose background images with a sufficient contrast ratio between the text and the image zone behind it; it may unfortunately not be with such great care that the next image will be chosen to replace the original one.

Also, it is important to take into consideration that sight impaired people often zoom on the website’s tests to read it more easily. It may happen that a text placed properly until then on the image to be readable, would end up in the wrong place and become unreadable.

However, embedding text in an image is a trend that can be seen less and less. Indeed, with the accession of internet browsing on mobile, and therefore the birth of the responsive design, it is more and more complicated to use this implementation as the image then often becomes blurred or pixelated or even unreadable depending on the context. With this implementation of text embedded in an image, people zooming to better see the text end up not seeing it better and blind people don’t even have access to the information if there is no alternative text, etc.

Before all, it is important to know that:

• The contrast level required between texts and their background colours also applies to text with image background, as well as images of texts.
• The WCAG technique link to this subject is the G18 technique “Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text”.
• The contrast ratio for a text on an image or for an image of text will be measured by taking into account the background colour closest to the text colour. If the text is white, you will need to take into account the lightest pixel closest to the text.
  This is the reason why, for example, there often is a thin black border around white text in video subtitles. The text background changing regularly, it is a useful technique to ensure the readability of the subtitles.

There are a few CSS solutions to alleviate this issue:

• Adding a border around the text (of at least one pixel – see the following example of “readable/accessible text on an image“ that uses the text-shadow CSS property; also see, when supported, the non-standard CSS property -webkit-text-stroke) ;
• Adding a shadow behind the text if the contrast is too weak on top or below the text but correct in other places (text-shadow CSS property) – quite a rare use case;
• Adding a hallow behind the text (text-shadow or background property with a half-transparent radial gradient in CSS) – use case complex to put in place and obtain the appropriate ratio;
• Adding a plain background colour behind the text. It may be half-transparent;
• Using a mechanism allowing to improve contrasts in order to apply one of the above rules only for users who activated this mechanism. This technique will be detailed further down in the third article of this series.

In order to illustrate the difficulty that text on images may represent, here are a few examples that, originating from a good idea and good will, don’t fully satisfy the contrasts rule for text on images.

Example of a plain colour background behind a text

For example, Samsung, for one of its products’ dedicated site, chose to add, via a contrast improvement mechanism, a background behind most of its texts appearing on an image. Unfortunately, some texts seem to have been forgotten.

Example of a projected shadow behind the text

On their side, REI Co-op chose to make their text more readable directly by adding a slight projected shadow behind their text. Unfortunately, if the readability of the text is greatly improved, the contrast ratio isn’t sufficient everywhere. If, using the Colour Contrast Analyser eyedropper, you take the closest pixel in the lightest area (the waterfall), the ratio is only of 2.4:1 instead of 4.5:1.

However, increasing the opacity of this projected shadow wouldn’t change anything. Indeed, the issue of the projected shadow is that it is not completely unvarying all around the letters; here, there are letters entirely placed on the waterfall which colour is very light. Using another technique may be a better option to have full compliance.

Example of transparent background behind the text

On the website Dialogue & Solidarité, the carousel of the home page contains big images. The text is set on top of the images and rendered readable thanks to a see-through square (75% opacity) behind the text. In the example below, the text is dark grey. If you measure the background colour at the text level on the elderly woman’s hairs in the picture, the ratio is only of 2.8:1 instead of 4.5:1. In order to obtain a sufficient ratio, the background’s transparency should be at least of 90%.

⁂

As a summary, it is possible to choose the right colour combinations for a website, so that the text colour always respects the ratio expected by the accessibility rules, depending on the colour of its background. However, it is best to take it into account beforehand as it would greatly facilitate the job. Numerous tools exist and can make things easier for us. Let’s use them as early as the graphical mock-ups phase.

If we think first off about the contents’ accessibility, text on images should definitely be used parsimoniously, or else, the way to ensure their readability, while keeping a coherent graphism, should seriously be thought through. It’s always more complex to get back on working on a validated graphical mock-up than respecting best practices from the start.

Additionally, let’s always keep in mind that content should not only be pretty, but, above all, it should be readable and understandable. Messages are best delivered when they can be read.