Ensuring Your Images Have Accessible Contrast
The term ‘contrast ratio’ refers to the difference in brightness between two objects on a screen. In graphic 1 we can see that there is high contrast between the text and it’s background. This makes it easier to see and therefore read especially for people with visual impairments.
In graphic 2 we can see there is much less contrast between the text and it’s background. This would make it more difficult to see and therefore read especially for someone with a visual impairment.
Contrast is measured as a ratio between an object and it’s background. Graphic 1 has a ratio of 15 to 1 (15:1) compared to it’s background. In graphic 2 the text has a ratio of only 2 to 1 (2:1).compared to it’s background.
The Web Content Accessibility Guidelines state that there should be a contrast ratio of at least 4.5 to 1 (4.5:1) between your onscreen elements and their backgrounds.
If you apply this criteria to our two graphics it means that graphic 1 with a ratio of 15 to 1 is considered accessible and graphic 2 with a ratio of 2 to 1 would not be considered accessible.
So how would we measure the contrast level of an image? Well we have a number of very handy online tools, one of which is an online checking tool at contrastchecker.com. This tool allows you to enter your background and foreground colours in the form of hex codes and then compares their contrast and colour contrast against each other to give you a contrast ratio. A hex code is a 6 figure alphanumeric code which is used to describe a particular colour and every different colour and shade has its own hexcode. This hex code is used by a computer to reproduce a colour exactly.
In the examples above the black colour has the hex code 000000 and its lighter background has the hex code F2F2F2. If we enter these into the online checker at contrastchecker.com it will tell us that there is a 15:1 contrast ratio between the two colours.
To find out the hex code of your colours depends on which app you made the graphic in. In Microsoft Word, for example (see below), click on the colour you wish to know the hex code of, go to SHAPE FORMAT-FILL COLOR-COLOURS and your hex code will be at the bottom of the colour dialogue box. For any other app you should do a search for information on how to access the hex codes.
