How to manage CSS transparencies for a more accessible web
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.
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.
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.
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).
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.
How to activate transparency reduction
The following instructions indicate how transparency reduction can be activated for each operating system.
Instructions for macOS
System Preferences › Accessibility › Display › Reduce transparency
Instructions for iOS and iPadOS
Settings › Accessibility › Display › Reduce transparency
Instructions for Windows 10
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.
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.