Information Services Division


Visuals and use of colour

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 guidance on contrast ratios. 

  • 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 using colour or spatial position and accessibility.

  • 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 Accessibility Insights and the Colour Contrast Analyser.

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 guidance on how to use alt text for images. Additional guidance is available from the LinkedIn Learning course Teaching Techniques: Making Accessible Learning.

If you have complex visual elements that are used for teaching, you may want to use the Diagram Center's Image description tools which offers guidance and resources for deciding when and how to add alt text to visuals, particularly academic material. The Complex Images guidance 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: Twitter, InstagramFacebook and LinkedIn.

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