Search icon

Accessibility Guide for Agencies

Welcome to the Compassion in World Farming Accessibility Guide for Agencies.

We want our content to be accessible to all, whether they can read it themselves, or by using screen readers or other similar tools. It must be a prioritised part of any work, and not an afterthought. 

Any content created for CIWF must meet a minimum of Level AA of the Web Content Accessibility Guidelines (WCAG).

What this means

When creating any visual assets, the following must be considered:

  1. Images must be free of, or have limited, text content. Further image guidance below.
  2. Colour contrast between text and background must be Level AA. Further colour guidance below.
  3. Videos must take into consideration the following, further detail about video accessibility is below.
    1. Autoplaying of sound
    2. Text to background contrast
    3. Caption types
    4. Voiceover
    5. Signing
  4. PDF's must be created accessibly, we have a dedicated guide for this.

Our full accessibility guide goes into more detail on each topic if needed.

1. Images

Do not use an image to provide information that could be communicated in writing.

Avoid overlaying images with text. Overlaying text in an image immediately excludes users with a vision impairment. 

If you have an image with overlaid text, it must be minimal, and:

  • Ensure that the text is legible on all devices i.e. not too small on mobile and not pixelated on large screens.
  • Aim for the background behind the text to be a solid colour, then:
  • Ensure that the text to background ratio is at least 4.5:1 (Level AA), using the Web Accessibility In Mind Contrast Checker. This ensures that those with colour blindness, amongst other impairments, will be able to distinguish the colours from each other.
  • If your background is not a solid colour, or you are struggling to get sufficient contrast, you can create contrast with a text outline. This social content is a good example.

Using Alt Text

This will mostly impact CIWF employees but is  noted here as a helpful reference. The alt tag is the most basic form of image description, and it should be included for all images. However, sometimes it should be empty. There is an Alt text descision tree in our detailed accessibility guide.

2. Colour use

In any visual elements, do not use colour as the only method to convey meaning, such as green for yes and red for no. 

When there is text in an image or video, ensure that the text to background ratio is at least 4.5:1 (Level AA), using the Web Accessibility In Mind Contrast Checker. This ensures that those with colour blindness, amongst other impairments, will be able to distinguish the colours from each other.

Brand Colours

In order for brand colour combinations to be accessible, the background and foreground colours must meet sufficient contrast levels for the Web Content Accessibility Guidelines Level AA.

 

Accessible combinations 

#db3c0a & #ffffff
#db3c0a & #ffffff
#66bc29 & #1e1e1e
#66bc29 & #1e1e1e
#f55523 & #1e1e1e
#f55523 & #1e1e1e
#1e1e1e & #ffffff
#1e1e1e & #ffffff
#0bab47 & #1e1e1e
#0bab47 & #1e1e1e
#ececec & #1e1e1e
#ececec & #1e1e1e

Combinations that can be accessible

These combinations require the text to be large, this means the text must be either:

  • Minimum 19px (12pt in print) and Bold
  • Minimum 24px (18pt in print) and Regular
#db3c0a & #1e1e1e
#db3c0a & #1e1e1e
#0bab47 & #ffffff
#0bab47 & #ffffff
#f55523 & #ffffff
#f55523 & #ffffff

Combinations that should NOT be used

These combinations are not accessible even with large or bold text.

#66bc29 & #ffffff
#66bc29 & #ffffff
#ececec & #ffffff
#ececec & #ffffff

Or any combination of Green and Orange.

 

How to check contrast

Both this website and this browser extension will allow you to check the contrast of your colours to Level AA.

3. Videos

If your video has sound, make sure that it does not play automatically. A hearing-impaired person may not be aware of the audio volume; users with physical or cognitive disabilities may not be as fast to stop the video and may impact other people in their environment.

Ensure that the video contains no unannounced flashing or strobing.

Ensure that any foreground audio is clearly distinguishable from any background audio, this will help users who are hard of hearing. Background audio should be low.

Text in videos

If you include text in your video, ensure that this is conveyed in captioning or voice over.

Text to background contrast applies in the same way as described above for images.

Keep text away from where closed captions will be. Cluttered screen text can be difficult to read for those who require closed captions.

Captions/Subtitles

Captions (sometimes called “subtitles”) provide content to people who are Deaf and hard-of-hearing and/or content translated into another language.

Captions are a text version of the speech and non-speech audio information needed to understand the content. 

Captions are also used by people who process written information better than audio.

Do I need captions?

Video-only (no audio content):

  • For pre-recorded and live:
    • Captions are not needed because there is no audio information.

Video with audio content:

Does the video have audio information that is needed to understand what the video is communicating?

  • If no (for example, it is just background music):
    • Captions are not needed because there is no important audio content. Consider informing users.
  • If yes:
    • For pre-recorded:
      • Captions are needed to provide the audio content to people who are Deaf or hard of hearing.
    • For live:
      • Captions are needed to provide the audio content to people who are Deaf or hard of hearing.

Types of captions

  • Closed captions are accessible, they can be read by a screen reader and allow the viewer to be in control of whether captions are visible or not. Close captions also allow for extra languages and translations.
  • Open captions are not very accessible, because they are burned in to the video and cannot be read by a screen reader, nor can they be turned off. Including open captions in our video should be the very minimum standard, but we should always aim for closed captions.

Voiceover/Audio

Including a voiceover along with closed captions means that those that cannot read, or find reading difficult, are offered additional language accessibility. They may find the closed captions distracting and prefer to have a voice over with the captions switched off. Doing this ensures that our content can be consumed by those who are deaf or blind.

Signed

Sign language alternatives is not required for the AA Level of accessibility, however, whenever possible this is something that we should certainly be striving to do, especially in big campaign videos.

Globe

You are using an outdated browser which we do not support. Please upgrade your browser to improve your experience and security.

If you have any further questions regarding this, or any other matter, please get in touch with us at supporters@ciwf.org.uk. We aim to respond to all queries within two working days. However, due to the high volume of correspondence that we receive, it may occasionally take a little longer. Please do bear with us if this is the case. Alternatively, if your query is urgent, you can contact our Supporter Engagement Team on +44 (0)1483 521 953 (lines open Monday to Friday 9am to 5pm).