1.4.3 Contrast (minimum)

I've skipped a couple of guidelines because either we've already covered them or they are not relevant to most people (other than web developers). I might come back to one of them later but I wanted to move on to something that is relevant to everyone.

Contrast

This is the guideline that I seem to spend the most time fixing when clients send me documents or presentations to check for WCAG compliance. I'm not sure whether people just forget it or genuinely can't tell when the contrast is getting dodgy.

This guideline has got more detail than the others and says:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text, which has a ratio of 3:1. 

The obvious immediate issue here, is how you know that. I'm going to address this in reverse order, starting with the contrast ratio and then going back into colour codes.

WebAim Contrast Checker

Before we watch the video, just open this page:

Contrast Checker

To use it, you enter the hexadecimal colour codes for your background and foregound parts, and then check whether they pass or not. It is probably the one website I use all the time, when designing stuff.  

Large text is font size 14 or more if bold or 18 or more if not. Normal is anything smaller than that.

This video is another one I made last year, for a challenge, so again, don't worry about the days... it's how to use the contrast checker that matters.

Colour codes

I find colour codes utterly fascinating! In the same way as on paper, you can mix paints to create any colour... in theory, using only the primary colours of red, yellow and blue, the same goes for creating colour on a computer, only then you're mixing light. 

The primary colours for light are red, green and blue. All other colours are made by mixing these in different ratios. If you've seen RGB used to describe colour, that is what it refers to... R-red G-green and B-blue.

This video explains that:

The problem with RGB colours is that you go up to 255, so writing them takes a lot of space and remembering the numbers is tricky. So we tend to use hexadecimal numbers instead, as they are only 2-digits. For colour mixing they go from 00 to FF. 

This video shows how hexadecimal colour codes work:

Summary

My advice would be to always check the contrast if you are using anything other than black and white. With practice, you will begin to get a feel for what will pass and what won't. If everyone just made a decision to only produce stuff that meets this guideline, it would be easier for all of us. Now that IT is integral to everything we do, I think this should be taught in schools. But don't get me started on that!!!