Close
The use of images, graphics and colours can enhance the appeal of online and printed materials and assist communication 鈥� but they also introduce some accessibility challenges.
UCL Colour Palette
The UCL colour palette听has听been created听after work by听UCL's Brand, Digital Experience and Accessibility teams to streamline our use of colour and ensure accessibility and consistency across all our collateral听in the digital and physical world.听
Use of colour
Use single colour backgrounds rather than background patterns or pictures and distracting surrounds.听听
Use sufficient contrast levels between background and text, aim for a contrast ratio of 4.5:1 or higher - the University of Virginia have some helpful听.听
Use dark coloured text on a light background.听
Do not use colour or spatial position alone to convey information. The University of Virginia has some helpful guidance on
Avoid the following colour combinations as they are commonly unfriendly to those with colour vision deficiencies: green/red, blue/purple and light green/yellow.听
Consider alternatives to white backgrounds for paper, computer and visual aids such as whiteboards. White can appear too dazzling. Use cream or a soft pastel colour. Some dyslexic people will have their own colour preference.听
You can check听contrast levels听using tools such as听听and the .
Images and other visuals
A number of features can make images less accessible, including:
- poor image quality;
- poor colour contrast;
- containing text;
- not having meaningful alternative text (alt text).
Selecting images
Images should convey the message you want it to about your content. Is the message made self-explanatory by the image, or is some thought required to make sense of how the image relates to your content? There is nothing wrong with challenging the viewer to think deeply, but you will need to explain the relationship with the content in any alt text or supporting text.
In addition, images should be of good quality with a minimum resolution of 300dpi. Images with high resolutions retain good image quality when they are enlarged.
Colour contrast is also important, it can be difficult for some people to see and read. Where possible select images with good colour contrast.
Using alt text
Provide alternative text descriptions (alt text) for all images used. The W3C WAI (Web Accessibility Initiative) provides听. Additional guidance is available from the LinkedIn Learning course .
If you have complex visual elements that are used for teaching, you may want to use the which offers guidance and resources for deciding when and how to add alt text to visuals, particularly academic material. The 听which has been developed for Further and Higher Education institutions in the UK, focuses particularly on the complexity of images within Higher Education and includes guidance applicable to infographics.
Social media
It is possible to provide alt text for images posted to social media. Guidance on enabling this feature is available for different platforms:听听,听听and听.
UCL's听Social Media Guide听includes a听section on accessibility听in the Guidelines for staff (UCL login required).
Text in images
Don't use text in an image unless it is part of a logo.听 If text is included in an image then the text must be repeated in the alt text.
Back to听creating accessible content
听
