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:


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!!!



Comments

Post a Comment

Popular posts from this blog

Articulate 360 - Storyline

Image
I've kept it fairly quiet but I've been looking for a new job for a few months now. Not that my old job isn't great, but I've always wanted to specialise more in e-learning and my main aim has been to get into content creation. E-learning is a growing industry, so there are many jobs out there. Of course, the vast majority are in London and I have no desire to move back there at all. The other sticking point though is a piece of software, that I have no experience of and is very expensive to acquire. Nearly all e-learning jobs want experience in Articulate 360 and specifically in Storyline. What is it? Storyline is a bit like PowerPoint in some ways. You have slides and you can combine different kinds of content with transitions and animations. However, in the words of one of my favourite films, "It is so much more than just" PowerPoint. You can bring in a whole level of user interaction that PowerPoint doesn't even begin to touch. When your project is...
Read more

Padlet

Image
I can't remember when I discovered Padlet but it has rapidly become one of my favourite tools for planning, thinking, mind-mapping, or whatever you prefer to call that. So here's a quick overview of Padlet and how to use it. Getting started Like most other free tools, you need to create an account and log in to create and access all your stuff. Then start creating. There are several different layouts, so have a play with them to see what you like.I find some better for certain tasks than others. In the top right corner, click on this sign to start a new Padlet. Then choose your template... My favourites are Canvas for mind-mapping and Shelf for categorising things. Then, you need to go through this set up guide. It appears on the right side of your screen. Depending on your choices, it can be really quick or quite laborious but when you've done, it will all look really good. If you want to change settings later, you can. I generally go for a calm, unclut...
Read more

Finding and using images online

Image
In my last post, I briefly touched on this subject. There are so many jobs where we may find ourselves searching for images online, that we want to include in some piece of work. When I was teaching, and making learning resources for my class, I frequently needed images to bring content to life. Can you imagine teaching children about life in Kenya without showing them any photographs or images of Kenya? Similarly, when preparing a PowerPoint presentation for a business meeting, you might want icons, logos, images or other graphical content. How do we do this in a way that is legal and ethical? Whilst there is a lot of information out there, most of it is not licenced for reuse and if we just help ourselves to it and use it for our own purposes, that is a big no-no! Creative Commons The Creative Commons (CC) licencing system enables photographers and artists to upload their work and have control over how others can use it. There is a lot of information on their website and it is de...
Read more