Picking the right colours for your site can be a tricky thing, and the accessibility considerations only makes things a bit trickier. But if you ask me, the limits imposed will make your website easier to see and read by everybody: somebody doesn’t have to be colour-blind to struggle to read green text on a red background.
Help the colour-blind
A large chunk of people are colour-blind: about 1 in 10 males have red-green colour-blindness, this is when the person cannot easily discriminate between red and green hues. A less common form of colour-blindness is blue-yellow colour-blindness, where the individual struggles to discriminate between blue and yellow.
The quick and simple solution to make life easier for those who are colour-blind is to not use the red/green and blue/yellow colour combinations where discrimination is important (for example having green text on a red background, or having red and green as the two colours on a graph). To check how a site looks to somebody who is colour-blind, take a screenshot and convert the image to greyscale.
Give the colours sufficient contrast (WCAG2 1.4.3/1.4.6)
Giving the background and foreground colours enough contrast makes it easier for those with visual difficulties to read the text, and makes the site easier to read in general by everybody (I’m sure we’ve all squinted at some yellow text, struggling to read it).
A formula (based on ISO-9241-3) is used to gauge a ratio of the contrast between two colours. To meet WCAG2 Level AA this should be at least 4.5:1 (3:1 for text larger than 18pt), which is increased to 7:1 (4.5:1 for large text) if you want to meet Level AAA. Some websites prefer to have an option to change the colour scheme to a high contrast one, which is perfectly acceptable.
Don’t use too much contrast!
Having said that, try not to have too much contrast. People who have dyslexia sometimes struggle to read text (particularly small text) which has a high amount of contrast (black on white is a classic example).
For a quick and simple fix, don’t use black on white. Depending on your site’s colour scheme, you might want to use a dark shade of grey (BBC use the colour value #4d4d4d) or you might want to introduce a light background colour.
Using colour correctly (WCAG2 1.4.1)
When using colour, don’t forget that not everybody can see it. If you were to say “click the red button to continue”, you need to keep in mind that people may not be able to see which is the red button (this isn’t to say that using colour-coding is bad, just make sure you don’t rely on the colour to identify objects or an as an action prompt).
Many website owners and developers don’t realise this, but only using colour to identify a link and identifying failed/required fields with colour only may fail WCAG2 guidelines.
Final thoughts
The best way to ensure your site is viewable by everybody is to go out there and test it. You don’t even have to do formal testing to get colour right, since colour blindness and dyslexia are relatively common. Chances are you have a family member, friend or colleague who have one of the two, so run the site past them to see if they struggle at all.