Toggle mobile menu visibility

How to make video and audio accessible

Colour contrast for a video

Colour contrast is the difference between two colours. Colours with good contrast stand out from each other. Colours with poor contrast look similar and can be difficult to tell apart.

Factors like tiredness, screen displays, light levels, age and visual impairments can all affect how difficult it is to tell colours with poor contrast apart.

Using good colour contrast in your video means more people can watch and understand it.

Go to YouTube to watch a video on the importance of colour contrast.

What to check

Colour contrast ratio measures the difference between two colours using numbers. You should use colour contrast ratio to check that colour combinations in certain parts of your video have accessible contrast.

Text

Any text in your video must have accessible contrast. This includes Captions for video.

Normal text is unbolded text under 18 point/24px and bolded text under 14 point/18.5px. Normal text colour and the colour behind it must have a colour contrast ratio of at least 4.5:1.

Large text is unbolded text that is 18 point/24px and above and bolded text that is 14 point/18.5px and above. Large text colour and the colour behind it must have a colour contrast ratio of at least 3:1.

Links

Links include linked text and images. Link colour and the colour behind it must have a colour contrast ratio of at least 3:1.

Non-text content in informative images

Colours that are next to each other in informative images must have a colour contrast ratio of at least 3:1.

For example, if you had a pie chart in your video, you'd need to make sure that:

  • The pie chart's segment colours and the video's background colour have good colour contrast
  • The colours of segments next to each other have good colour contrast

Informative images include information that helps people understand your video. For example, charts, graphs, diagrams and visual instructions.

Decorative images and logos do not have to have accessible colour contrast.

How to check colour contrast

WebAIM's Contrast Checker (opens new window) (opens in a new window) helps you check how accessible any colour combination is. To use this tool, you'll need to know the hex codes for your colours. A hex code is a hash (#) followed by 6 numbers that references a specific colour.

To get a colour's hex code, take a screenshot of the colour you're checking in the video. Then upload it to an online image colour picker, like the Image Color Picker tool (opens new window) (opens in a new window), to get the hex code.

How to correct colour contrast

If you find that any colour combinations you use don't have accessible contrast, you must edit your video and fix them. Try these techniques:

Change one or both colours

If you need to improve text or text link colour contrast, try changing the text colour, the background colour, or both.

If one colour is very light, try making the other colour darker. For example, try changing red text on a white background to a darker red.

Add a thick border or white space between the colours

If you're trying to make sure non-text content in an informative image has good colour contrast, try adding a thick border or white space between colours.

For example, if you're trying to make sure that all segments in a pie chart have good colour contrast with the colour of the segments next to them, try adding a thick border between each segment. Or you could separate them all using white space.

Then, you just need to make sure that all the segment colours have good contrast with the border colour or white space. For example, you could make all the segment colours light colours and the border colour a dark colour.

Read more

Previous : Audio description and descriptive transcripts for video Next : Basic transcripts for audio-only content
Print entire document (opens new window)