https://designnotes.blog.gov.uk/2016/11/08/weve-improved-the-accessibility-of-code-examples/

We've improved the accessibility of code examples

Last week we carried out some work on the GOV.UK code syntax highlighting to make it more accessible. We updated the colours used in code examples on GOV.UK to make them more legible.

The previous colours used a default colour scheme that had not been checked for accessibility. Several of the colours used did not meet our minimum contrast requirement of 4.5:1 between text and the background behind the text.

This meant that people with a visual disability could struggle to see some of the examples.

Screenshots of blocks of code before and after the new colour scheme has been applied.

The changes are minimal for HTML but, as you can see above, greatly improve the contrast for SCSS and other code languages.

A small but significant update

The new colours attempt to balance the conflicting needs of being dark enough to meet contrast requirements whilst also being distinctive enough to see the different elements. They’re not quite as nice as the previous colours in all cases, but they are more legible.

Right now we’re using dark-text-on-light theme, as this style fits best where code examples are included with other content. We may also add a light-text-on-dark theme if needed. This is an easier choice as most bright colours have good contrast with dark backgrounds.

Using the new colours

The new colours are already in use on GOV.UK Elements, and we'll use them in future projects where we need to display code examples.

It’s a small change, but we aim that everything we make be accessible to as wide a range of people as possible.

2 comments

  1. Comment by Artem Zakharov posted on

    How do you measure contrast?

    Reply

Leave a comment

We only ask for your email address so we know you're a real person