Text Colour contrasts (Part 1): who is it for and what are the accessibility rules?

To optimize a website, it is essential to facilitate the access to information for all users, and, of course, it also concerns disabled users.

The WCAG (Web Content Accessibility Guidelines – international recommendation gathering the accessibility rules for web contents) as well as the RGAA (Référentiel Général d’Accessibilité pour les Administrations – French General Accessibility Reference document for Administrations – based on the WCAG) present 3 accessibility levels (A, AA and AAA). In order to improve the readability of the contents, the AA (double A) and AAA (triple A) levels require minimal contrast ratios between the text colour and its background’s colour.

In this series of articles on text colour contrasts, we will first be looking into who is this important for and what rules should be applied. Then, in a second article, we will approach the best way to choose good colour combinations for a website. Finally, in a third article, we will present different mechanisms for contrasts improvement.

Who needs the text to have a sufficient contrast with its background?

Of course, visually impaired people are mainly concerned as they need textual contents to have a sufficient contrast with their background in order to be able to read the text or, at least, for it to be easier to be read.

For example, people may be visually impaired because of a cataract or glaucoma. It may affect elderly people but not only.

People with a colour vision deficiency, which sometimes lowers greatly the contrasts, may also be bothered by a lack of contrast; usually, it is due to daltonism (also called colour blindness which is a decreased ability to see colour or differences in colour) or even achromatopsia (total colour blindness).

For example, on the previous version of the Tanaguru website, the buttons had a white text on a red background, with a contrast ratio of 4.8:1; this is compliant with the accessibility rules (see next upcoming article). If we use a software simulating the vision of colour-blind people, the colours seen are no longer the same. In the case of a simulation of the “deuteranopia” type of daltonism, for example, we obtain a contrast ratio of 3.4:1. The contrast discrepancy is obvious.

In order to illustrate a few examples of vision deficiencies, you could try the Funkify extension on Google Chrome. Thus, you will be able to visualise what your website looks like when scrolled through with some disabilities.

Of course, using enforced contrasts will relieve almost everyone’s eyes as, for example, a white text on yellow background would thankfully be prohibited!

It is important to note that the respect of the contrasts rules for accessibility does not allow to ascertain that the text will easily be readable by all the users. Indeed, there are many different perceptions of the colours depending on the person, on the culture or on the vision deficiencies. Some people will read more easily on a dark background, while others on a light background. Some hyper-sensory sensitive people, like people on the autism spectrum, may be, on the contrary, facing difficulties with a site presenting vivid or highly contrasted colours.

The choice of colours is therefore crucial and alternative suggestions may be a huge help for the conception of an accessible website, as well as for all the final users.

What are the contrast ratios to follow?

Both Reference documents previously presented in the introduction (RGAA and WCAG) require a minimum contrast ratio between the colour of the text and its background:

• The rule for AA accessibility level requires a minimum contrast ratio of 4.5:1;
• The rule for the AAA level requires however a minimum contrast ratio of 7:1; which makes it even more difficult to follow by default as it sets restrictions at creative and corporate identity levels.

The success criteria 1.4.3 and 1.4.6 of the WCAG mention exceptions in three cases.

Exception 1: Large texts

The large texts require a lower contrast ratio:

• 3:1 minimum contrast ratio for the AA level (instead of 4,5:1);
• 4,5:1 minimum contrast ratio for the AAA level (instead of 7:1).

The large texts are:

• The non-bold text (font-weight: normal;) which size is over 18 pt (24px).
• The bold text (font-weight: bold;) which size is over 14 pt (19px).

We invite you to consult the WCAG guideline on this subject.

If we take for example the light green colour #9FD886 on white background #FFFFFF, the initial ratio is 1.7:1. Here are examples of more contrasted alternative colours you could obtain:

• This text is not bold and has a font size of 23px or less. We must use a minimum ratio of 4.5:1. (colour: #4D8434)
• This text is not bold and has a font size of 24px or more. We must use a minimum ratio of 3:1. (colour: #6BA356)
• This text is bold and has a font size of 18px or less. We must use a minimum ratio of 4.5:1. (colour: #4D8434)
• This text is bold and has a font size of 18.5px or more. We must use a minimum ratio of 3:1. (colour: #6BA356)

It is usually simpler (and also much more readable) to follow the 4.5:1 minimum ratio but this exception for large texts may end up being quite useful.

Additionally, the Colour Contrast Analyser allows to see how the colours are rendered for three types of daltonism. Thus, you will be able to realise that the perceived ratio may be lower than expected. This is the reason why it is recommended to use a ratio of at least 4.5:1.

However, it is important to pay attention to the Photoshop “point” value. Indeed, Photoshop is often set by default on “point” unit. Consequently, it will usually continue to display “16pt”, when in reality, for a mock-up is created at 72 PPP, at least, it is in fact “16px”. In this case, the “point” value does not reflect the production and 1 Photoshop point would be equivalent to 1 CSS pixel.

In order to avoid having a false idea and believing that points are being used instead of pixels, it is best to modify the value: in the settings in the menu “Preferences”, then “Units and rulers”, then in the “Units” section, the “Type” dropdown would be set to “Point” (to change for “Pixel”).

On the other hand, nowadays, computers tend to have, more and more, crazy resolutions despite the small screens (full HD on a 13-inch screen for example). It is then possible (and often recommended) to increase the scaling in the parameters of its Operating System and to set it, for example, to 125%. Thus, elements are bigger on display. However, this misrepresents the parallel between the Photoshop mock-up and the browser. It is therefore important to set the scaling of the computer to 100% when adjusting the font sizes between the mock-up and the CSS.

Exception 2: decorative text

There is no contrast requirement for decorative texts:

• Texts that are part of an inactive user interface component as, for example, a button or a form field with a disabled HTML attribute;
• Purely decorative texts: texts that do not carry any information, that are there to decorate just as an image would do, that may be removed without causing any prejudice to the content’s understanding. The WCAG provide as an example a dictionary’s cover with very light words, with transparency, used as a background;
• Texts that are not visible for anyone: This is most likely referring to those old times where white text was written on white background for the purpose of search engines…;
• The texts that are part of an image (or a photograph) carrying another significant content information. This phrase, which is a bit convoluted, means that a text, that incidentally happens to be in an image (for example a road sign in a photograph), is not concerned by the contrast rule.
  However, if it is an image-text (text carried as an image) the contrasts rule applies, even if it may be a bit difficult to modify the text or background colour. In this case, it is recommended to use a text styled using CSS directly. If it is not possible, you would need to provide the image in high resolution so that the zoom does not pixelate too much the image and that it may still be readable. A text alternative will also be required for people who cannot see the image.

Exception 3: Logotypes

Neither is there a contrast requirement for texts that are part of a logo or a brand name. Obviously, if the text of a logo uses sufficiently contrasted colours, which are readable easily, it would be better; it will be more visible to everyone, but it is not possible to force a company to change their logo.

⁂

As a summary, please find below a table with the contrasts’ ratios used for texts depending on their size and font weight and, depending on the expected accessibility level.