How to adjust contrast using CSS

First publication:
Reading time Approx. 3 minutes
Accessibility and contrasts in websites

We continue our series of articles on the accessibility of a website by analysing another specification of the CSS Media Queries, the prefers-contrast. This instruction allows you to set specific CSS to increase or decrease contrast. It is therefore useful to help a section of the population to read texts better and to emphasise those graphic elements with soft colours.

It can happen that, for graphic reasons or due to special circumstances, colours are combined with weak contrasts. For many users this is not a serious problem. For some people, however, the lack of strong contrast is a serious accessibility problem.

When designing a website or application, the graphics team can choose one of two ways: either design the product layout by checking that the contrast between elements is strong enough not to create reading problems, or delegate to the front-end developer the task of mitigating the problem through CSS.

By opting for the second choice, the prefers-contrast will allow, in the development or revision phase of the project, to write specific instructions for those users who need to increase the contrast.

The prefers-contrast syntax

The default value is no-preference. This value indicates that the user has set no preference.

The more indicates whether the user has chosen to display content with a high contrast.

Finally, we have the less value which indicates to display content with a low level of contrast.

The only value that actually reveals the user's choice to increase the contrast is the more. In fact, the accessibility option of the various operating systems only allows the contrast to be increased.

How to use prefers-contrast

As a front-end developer and based on the experience of hundreds of completed projects, the best way to use CSS prefers-contrast is to apply specific instructions for those users who have chosen to increase the contrast.
If a graphic layout is designed with adequate contrast, there would be no reason to write specific instructions to reduce contrast - nor would it make sense to do so.

As we have already seen with the instructions for managing the accessibility of transparencies using CSS, the use of prefers-contrast is very simple:

// CSS instructions as defined in the graphic layout

@media (prefers-contrast: more) {
  // CSS instructions for increasing contrast
}

A concrete example of contrast adaptation

Default contrast

The part of the graphic layout to be transformed into code has a block of text superimposed on a poorly contrasted background. This particular problem cannot always be solved when designing the layout. Take ready-made WordPress themes, for example. On a website where the content is processed dynamically, the background image may not have been chosen with due care. The graphic layout may provide for a semi-transparent cover, but this useful expedient may sometimes not be enough.

We can solve this problem by adding some instructions to the style sheet.

@media (prefers-contrast: more) {
    h1.hero_title {
        background-color: black;
        padding: 5px 15px;
    }
}
Increased contrast

A few lines were enough to help those people who have problems reading low-contrast text, without altering the graphic appearance designed by graphic designers for most users.

prefers-contrast compatibility

The Media Query prefers-contrast is, as of today, still in an experimental phase and should be part of the level 5 Media Queries.
However, it has been implemented in Edge, Chrome, Safari and Opera. It is also present in Firefox, but the option must be enabled via the browser's hidden settings:

      Open Firefox and type about:config in the URL bar
      Look for layout.css.prefers-contrast.enabled and set it to true.
Prefers-contrast compatibility