How to manage CSS transparencies for a more accessible web

Reading time Approx. 7 minutes
Accessibility transparency websites

It was in 2011 when opacity was introduced in CSS3 in the colour management module.

.transparent_element {
  opacity: 0.8

}

The simple instruction above applies an 80% opacity to the transparent_element element.

Explaining the meaning of opacity in 2021 is redundant. The concept is old and any web professional has already assimilated it. So why today, ten years later, are we going back to writing about opacity and transparency in CSS?

The transparency effect is one of those innovations in CSS3 that has not always been used correctly. This has led to accessibility problems. Work is now underway to introduce corrective solutions.

The solution is called prefers-reduced-transparency which is a media query useful for separately defining the graphic style of those blocks with transparent areas. Currently under development, prefers-reduced-transparency will be included in level 5 of the media queries.

Transparencies in a website using CSS

Let us look at an example website, that of BBC.com, and see how transparencies are handled in the graphic layout.

Accessibility of website animations

In the first block we notice that the highlighted news items use the transparency effect: the text is positioned exactly above the photograph. To ensure sufficient contrast in all situations, the text, in white, uses a dark, semi-transparent background.

We have inherited this graphic superimposition from the publishing industry; however, the editor in the paper has control over the choice of colours and can therefore adapt the text to the background photo by manually seeking a balanced contrast.

BBC home page preview

On the web, where everything must be automated, a strategy must be applied. This is where CSS comes to the rescue. On the BBC website, the linear-gradient() function has been applied to the background-image property. Together with other properties of the CSS, the front-end web developer can then superimpose the text on the image and, to ensure sufficient contrast, add a semi-transparent frame. The text, graphically within this frame, will be of opposite colour.

background-image: linear-gradient(transparent,rgba(0,0,0,0.8));

The above instruction creates a background with a linear gradient starting at the top with transparency, transparent, and ending at the bottom with an 80% opaque black colour, rgba(0,0,0.8).

The linear-gradient function contains a CSS property: opacity. This property, when used alone, can apply uniform transparency to an entire block.

background-color: #000000;

opacity: 0.8;

Some advantages of using transparencies

The use of overlays and transparencies helps web designers to approach the world of publishing by creating graphic effects which, if used very well, lead to a noteworthy graphic impact.

No less important is the advantage of recovering valuable space within a page. The user will consequently see more content in that visible area of his screen to the benefit of the strategy, if planned, of the publisher and the web marketer.

The disadvantages of transparency for reading

The problem with semi-transparencies is that there may still be some difficulty in reading the text. Some people may in fact have difficulty recognising shapes. As already mentioned in the article explaining how to create a site with a double theme, light and dark, thanks to the prefers-colour-scheme, a text must have a minimum contrast in order to be readable.

Copertine di National Geographic

One of the featured articles amply illustrates the problem. The background photograph has some very dark and some very light areas. Although there is a dark semi-transparency that improves the contrast between text and image, in some places the contrast value is below the minimum acceptable.
In point 1, the score is AAA with a contrast ratio of 20.53 (almost perfect). In point 2, on the other hand, the score drops significantly to AA with a contrast ratio of 4.73. Point 3, although confined to a very small area, does not pass the examination as the contrast ratio is 2.90.

If the area of the image below point 3 were larger - an event to be considered - the unreadable part of the text would be correspondingly larger.

How to make text above images more accessible?

There are various solutions available to us to improve the accessibility of texts.

The text below the image

This is a classic solution with the best contrast ratio. The web designer has total control over the choice of colours and can therefore guarantee the highest score, the triple A (contrast ratio of more than 7, and a maximum of 21).

However, this technique is limiting. The space required to display all the content will be larger and the graphic styles will be reduced.

Increase opacity

This can improve the contrast ratio in those areas of the image that are lighter.

Before:

background-image: linear-gradient(transparent,rgba(0,0,0,0.8));

After:

background-image: linear-gradient(transparent,rgba(0,0,0,1);

In point 3, we achieved an improvement in the contrast ratio from 2.90 (not exceeded) to 3.79 (A).

Using transparency on BBC news previews

With this solution, the number of people able to read the text without any particular difficulty increases.

Set up two different layouts

This solution involves allowing the user to choose the view that is optimal for him. How? By means of an operating system option to reduce transparency. With the availability of this option, combined with future CSS instructions, web professionals will be able to improve the accessibility of their products.

Improved contrast between text and image

How to activate transparency reduction

The following instructions indicate how transparency reduction can be activated for each operating system.

Instructions for macOS

macOS settings screen

System Preferences › Accessibility › Display › Reduce transparency

Instructions for iOS and iPadOS

iOS settings screen

Settings › Accessibility › Display › Reduce transparency

Instructions for Windows 10

Windows settings screen

Start › Settings › Ease of Access › Display › Show transparency in Windows

Instructions for Android

At the moment, it seems that Android does not support transparency reduction, even in the options for developers.

How to detect the user's choice to reduce transparency

Currently, this possibility is only theoretical. The CSS specifications have already been defined in level 5 of the media queries. They are being evaluated and will hopefully be implemented in browsers soon.

Use in CSS

The media query to be used to detect whether the user preferred to reduce transparency is prefers-reduced-transparency, whose default value is reduce.

@media (prefers-reduced-transparency) {
    /* istruzioni CSS per annullare o ridurre le trasparenze */
}

However, we can set no-preference as a value, and thus write the main style sheet already with an eye to accessibility, and via the new media query apply the graphic transparency effects instead.

@media (prefers-reduced-transparency: no-preference) {
    /* istruzioni per applicare le trasparenze */
}

Supporto di prefers-reduced-transparency nei browser

At the time of writing this article, no browser supports the media query prefers-reduced-transparency. The article will be updated as soon as there is something new in this regard.

Compatibility of prefers-reduced-transparency with browsers

Conclusions

The media query prefers-reduced-transparency shows how much the web is also evolving to make content accessible to all. This evolution takes the figure of the front-end web developer a step further. His task, his challenge, his mission will be to make a web page adaptable to all needs. However, this challenge does not only involve the CSS developer. A web project encompasses various disciplines and requires the active participation of different professionals, each specialising in their own field.