How to make video and audio accessible
Colour contrast in videos
Tiredness, screen displays, light levels, age and visual impairments can all affect how easily some colours stand out.
Any text or informative images like charts or graphs in your videos must have accessible colour contrast. This includes video captions.
Decorative images and logos do not need accessible colour contrast.
You should check any colour combinations you use. If they do not have an accessible colour contrast ratio, you must edit your video and fix them.
Do not use colour alone to show meaning. For example, you may need to add text labels or different patterns to bars in a chart, even if it has an accessible contrast ratio.
Accessible colour contrast ratio
Text and informative images in your video must have an accessible colour contrast ratio to be accessible.
Colour contrast ratio is the difference in brightness between two colours. No contrast, like white text on a white background has a ratio of 1:1. Extreme contrast, like black text on a white background has a ratio of 21:1.
Normal text should have a minimum ratio of 4.5:1, everything else 3:1.
The most inclusive and easiest to read colours have a minimum ratio of 7:1 for normal text, everything else 4.5:1.
Normal and large text
Normal and large text must stand out from its background. WCAG requires a minimum colour contrast ratio of:
- 4.5:1 for normal text - under 18 point (24px) or 14 point (8.5px) bolded
- 3.1 for large text - above 18 point (24px) or 14 point (18.5px) bolded
Logos do not need accessible colour contrast.
Be sure to consider any video captions you add. For example, by adding a semi-transparent layer behind text to make it more readable.
Non-text content
Colours used in non-text content, like informative images and objects in interactive components, must have a ratio of at least 3:1.
An informative image could be a line chart where there must be good contrast between the:
- lines and background colours
- lines next to each other
Interactive components could include things like in-video navigation icons or link text.
Decorative images do not need accessible colour contrast.
Read more about colour contrast accessibility (Scope for business)
How to check and correct colour contrast
There are many free tools you can use to check colour contrast or colour combinations in your content.
WebAIM's Contrast Checker is web-based tool you can use that works with most content.
You can use the Colour Picker's dropper tool or add different colours using a hex colour code or red, green and blue (RGB) values.
You can use the colours' hex codes, for example #FFFFFF, to:
- better understand how different colours combinations affect different people on the WhoCanUse website.
- find colour pallets that are WCAG compliant using the Venngage Accessible Color Palette Generator.
Related guidance and standards
Articles on colour contrast
- Colour contrast accessibility (Scope for business)
- Colour contrast – why does it matter? (Accessibility in government)
- Contrast and Color Accessibility (WebAIM)
