Colour & Contrast for Accessibility
Why does Colour Matter?
Colour plays a key role in legibility regardless of the medium and application – including lecture slides and diagrams.
When colours are insufficiently distinct, whether in brightness or difference in hue, users with poor vision or colour blindness might have difficulty discerning letters and graphical elements. In addition, choice of colours are also likely to have an impact on users with specific learning difficulties – therefore influencing their ability to access teaching materials.
It’s very important to think about your choice of colours as you prepare teaching materials to ensure access is good for everyone.
Contrast and colour use are vital to accessibility
Key guidance about colours and accessibility are found in the Web Content Accessibility Guidelines 2 (WCAG2). These principles should always be considered when creating slides or other graphical content.
How are colours defined?
Colours can be defined using various types of codes, which ensures consistency of colours.
Some commonly used codes are as follows:
(A) HEXadecimal (Hex) colour codes – these codes have the format of: hash (#) followed by six numbers or letters. For example, #FFFFFF is white, and #69B42D is the shade of green shown below.
(B) RGB colour codes: this is where colours are described in terms of their Red (R), Green (G), and Blue (B) content. For example, (255, 255, 255) is white, and (105, 180, 45) is the shade of green shown below.
(C) CMYK colour codes: CMYK refers to the four ink plates used in some colour printing: Cyan, Magenta, Yellow, Key (black). For example, 0%, 0%, 0%, 0% is white, and #64%, 0%, 100%, 0% is the green shown below.
Further examples and explanations about these colour codes is given below:
More about Colour Codes:
Hex codes
Hexadecimal codes are used to describe colours very precisely – so very useful in all sorts of applications where colours are used – e.g. in Adobe Photoshop, Illustrator, and Microsoft PowerPoint. Use of Hex codes enables colours to be reproduced accurately.
A useful website for finding the hex code for a particular colour is: https://encycolorpedia.com/. This site also provides information to convert the hex code into various other colour codes.
RGB Colour codes
Colours may be described in terms of their Red (R), Green (G), Blue (B) content.
The RGB colour model is an additive colour model, in which red, green and blue are mixed together in various ways to produce a range of colours. It is important to note that RGB is a device-dependent colour model: different devices detect or reproduce a given RGB value differently, since the colour elements and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. This means that an RGB value does not define the same colour across devices without some kind of colour management. Proper reproduction of colours by professional printers etc. require colour management of all devices required in the printing process.
A colour in the RGB colour model is described by indicating how much of each of the red, green, and blue is included. A colour is defined by an RGB triplet (R, G, B), each component of which can vary from zero to a defined maximum value. If all the components are equal to zero (0, 0, 0), the result is black. In contrast, if all of the components are at maximum, the result is bright white.
RGB values can be expressed in various ways:
- In computers, the component values are often stored as unsigned integer numbers in the range 0 to 255, the range that a single 8-bit byte can offer.
- Each colour component value can also be written as a percentage, from 0% to 100%.
- From 0 to 1, with any fractional value in between.
CMYK Colour Codes
CMYK is a four-colour subtractive colour model that is used in colour printing.
The way the CMYK model works is by partially or entirely masking colours on a lighter, usually white, background, where the ink reduces the light that would otherwise be reflected. It is referred to as a ‘subtractive model’ because inks ‘subtract’ the colours red, green and blue from white light. White light minus red leaves cyan, white light minus green leaves magenta, and white light minus blue leaves yellow. This is effectively the opposite of the RGB model.
CMYK refers to the four ink plates used in some colour printing: Cyan, Magenta, Yellow, Key (black).
CMYK colour codes come in the form of 4 numbers that represent percentage of each colour used.
Contrast ratios
In The Web Content Accessibility Guidelines (WCAG) 2.0, contrast is a measure of the difference in perceived “luminance” or brightness between any two colours (the phrase “colour contrast” is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).
The Web Content Accessibility Guidelines (WCAG) 2.0 set specific ratios that achieve the minimum required contrast for legibility, as shown below:
Minimal requirements
So level ‘AA‘ requires that all text and images of text has a contrast ratio of at least 4.5:1, except for the following:
(A) Large Text
Large-scale text (with at least 18 pt or 14 pt bold) and images of large-scale text have a contrast ratio of at least 3:1.
Note: Font size is the size when the content is delivered. It does not include resizing that may be done by a user.
(B) Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
(C) Logotypes
Text that is part of a logo or brand name has no minimum contrast requirement.
Checking the contrast ratio
There are various websites available that allow you to check that the contrast ratio is sufficient to comply with the minimum (AA) contrast requirements.
For example:
Preparing Slides for teaching
It is important to use pastel-coloured backgrounds, rather than bright white, to meet accessibility requirements for specific learning difficulties – for example:
Use pastel backgrounds - avoid bright white
Use sufficient contrast between background & text
Use single colour backgrounds
Use dark coloured text on a light background
Slide colour & Contrast
Slide colour and contrast
- 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 (e.g. hex code: # FFFBEB; see image).
- Use single colour backgrounds. Avoid background patterns or pictures and distracting surrounds.
- Use dark coloured text on a light (not white) background.
- Use sufficient contrast levels between background and text
See Colour & Contrast page to find out more about determining contrast ratios.
