Accessible colour contrast
For the use of colour on our website, we aim for the Web Content Accessibility Guidelines success criterion 1.4.6 Contrast (Enhanced). This is level AAA compliance, and ensures that even people with significant visual impairments can still easily use and understand content on our website.
To meet this level, text and images of text must have a contrast ratio of at least 7:1.
There are some exceptions to this rule:
- Large scale text and images of large-scale text must have a contrast ratio of at least 4.5:1
- Text or images of text that are just for decoration, or that are part of an inactive component
- Text that is part of a logo or brand name
Accessible images
According to the Web Content Accessibility Guidelines success criterion 1.1.1 Non-text Content, all non-text content that is presented to the user must have a text alternative that serves the equivalent purpose.
This means that if the user is using a screen reader to verbally explain what is on the web page, the tool would read out the alt-text to describe the element.
Generally, you should avoid using images that contain any sort of text. Use written content or other alternatives wherever possible. Avoid using images for unnecessary decoration within the content – instead focus on writing clear, simple content for your service. Our images page contains more information about using images on your service content.
Writing good alt text for images
Alternative text (alt text) is a brief written description of what the image looks like, that cannot be seen on the web page or article but can be read out to the customer by assistive technology so that they can understand it.
Good alt text:
- tells people what is happening in the image
- describes the content and function of the image
- describes the emotion being conveyed by the image
- is specific, meaningful and concise
- uses normal punctuation, like commas and full stops, so the text is easy to read and understand
Do not write alt text that:
- includes the name of the photographer or person who created the image
- starts with “Image of”, “Graphic of” or common information that would repeat across every image, because the screen reader is already going to announce that the element is an image.
- It is fine to explain if the image is an illustration or a photograph, if it is relevant to understand its purpose
- It is fine to explain if a photograph is in black and white or sepia. But it is not necessary to always specify that it is in colour as this is the assumed default
- repeats information from the page
- includes extra information not in the image