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
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.
Image alt text
Alternative text, or “alt text”, is read out by screen readers and displayed if an image does not load or if images have been switched off.
Writing good alt text
Good alt text:
- tells people what information the image provides
- describes the content and function of the image
- is specific, meaningful and concise
Use normal punctuation, like commas and full stops, so the text is easy to read and understand.
Generally, aim for no more than 2 sentences of alt text.
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, the screen reader is already going to announce that the element is an image. It is OK to clarify if the image is an illustration or a photograph, if it is relevant to understanding its purpose
- repeats information from the page
- includes extra information not in the image