Web design is commonly seen as a very visual thing and the use of colour plays a large part. However, often the way different people view colour is over looked. What I mean by this, is people with dyslexia or low vision or colour blindness will view colours differently. For example, many dyslexics prefer a light pink or yellow background instead of a bright white and people with low vision will often like a high contrast such as yellow on a black background. This will be a very individual thing and its not always possible to design for all eventualities, so how do we design for accessibility and colour effectively?
Accessibility and Colour in WCAG2.0
The WCAG2.0 have produced a few guidelines on the use of colour, to help us design accessible websites. These fall into two main categories: colour contrast and the use of colours. There are a few best practices regarding web development, these will be explained in a later post.
Colour Contrast
This is measured by a ratio difference between the foreground and background colour. There are free online tools like Webaim’s contrast checker that can help you with measuring the contrast ratio. The WCAG2.0 has two levels of contrast ratio, depending on the level of access you are aiming for.
The WCAG2.0 guidelines are divided into three levels of access: A, AA and AAA. Level A, is considered the bare minimum access, level AA, is considered a minimum standard by many for best practice where as level AAA is considered the highest standard you can aspire to. The guidelines for colour contrast are defined at levels AA and AAA. For each level, it has one minimum ratio level for standard text and another level for bold and large text. Standard text is any text up to 18PT or 14PT bold while bold and large text is from 14PT bold or 18PT regular and above.
The minimum ratios as stated in the WCAG2.0 guidelines are listed below:
- 4.5:1 For level AA standard text (up to 18PT).
- 3:1 For level AA bold text (from 14PT and above).
- 3:1 For level AA large text (from 18PT and above).
- 7:1 For level AAA standard text (up to 18PT).
- 4.5:1 For level AAA bold text (from 14PT and above).
- 4.5:1 For level AAA large text (from 18PT and above).
Using Colours
The WCAG2.0 guidelines advise to avoid using colour as the only means of identification of something. So things like press the green button for go and the red button for stop, should be avoided. This is to prevent the difficulties it will cause someone who can not either see the colour or be able to tell the colours apart. However, if you use colours to support or re-enforce the identification of something, it can be helpful to people. As for some people it is easier to refer to a colour than the text. So by using both, you can help a wider group of people use your site more easily.
Colour Preferences
You have probably seen on some websites links that make it easy for your visitors to choose between different colour schemes. Often listed as lower contrast, higher contrast, gray scale and regular contrast. These are often pared with links to adjust the text size up or down. However, for some people these options can be very helpful, for others it just adds to the number of links on every page that they need to tab through. As explained above, these colour preferences are very personal to each person and is difficult to accommodate for everyone. They are not a WCAG2.0 guideline and there is some controversy over if they should be used or not.
My personal view is that they are an optional extra and not a priority. I also feel that if used, they should either have a skip link for quick navigation over the multiple link options or be accessed through a single link to the multiple colour preferences. This way there is less additional tabbing through these colour preferences for keyboard and voice dictation users. I have seen some terrible implementations of colour preferences, from mouse only controls to floating transparent controls, each giving access issues to different groups of people, so instead of helping, it adds a layer of poor accessibility.
Have your say
- What are your views on having colour preference links on a website?
- Do you have a preferred colour scheme you find easier to read?
- Do you have colour preference links on your own site and how have you implemented them?
- Have you seen any really good or really bad implementations of colour preference links?
Please feel free to answer any of the above questions or just tell us your experiences, preference or views on accessibility and colour in web design.
Have you ever thought about creating an e-book or guest authoring on other blogs?
I have a blog based on the same subjects you discuss and would love to
have you share some stories/information. I know my viewers would value your work.
If you are even remotely interested, feel free to send me an email.
Feel free to surf to my site: garcinia cambogia free trial nz – Brittny,
Hi Brittny and thank you for your kind words. I’ll drop you a quick email shortly.
Greetings! I’ve been following your website for a
while now and finally got the courage to go ahead and give
you a shout out from Lubbock Texas! Just wanted to tell you keep
up the great work!
my web page … slender garcinia cambogia
and natural cleanse free trial (Natalia)
Thanks Natalia, your kind words are very much appreciated, glad you enjoyed the post.
Thank you, I’ve just been looking for information about this subject
for a long time and yours is the best I have came upon so far.
But, what in regards to the bottom line? Are you sure concerning the
source?
my blog garcinia cambogia free trial women’s health (Melva)
Thank you Melva for sharing your kind words. I based this post on the WCAG2.0 guidelines and personal experience as a visual impared web developer.
Wow, this paragraph is nice, my sister is analyzing these things, so I am going to convey her.
Thanks
My brother suggested I might like this web site.
He was totally right. This post actually made my day.
You can not imagine just how much time I had spent for this information! Thanks!
Thanks, glad you liked it
When someone writes an article he/she retains the thought of a user in his/her brain that how a user
can understand it. Therefore that’s why this piece of writing
is perfect. Thanks!
Thank you
I truly enjoy reading your blog and I look forward
to your new updates.
Thanks
Having read this I thought it was really enlightening.
I appreciate you spending some time and energy to put this information together.
I once again find myself spending a lot of time both reading and posting comments.
But so what, it was still worth it!
Thank you
I don’t even know how I ended up here, but I thought this post was great.
I don’t know who you are but certainly you’re going to a famous blogger if you
aren’t already 😉 Cheers!
Thank you
Good day I am so thrilled I found your website, I really found you by accident,
while I was researching on Yahoo for something else, Anyhow I am here
now and would just like to say cheers for a fantastic post and a all round enjoyable
blog (I also love the theme/design), I don’t
have time to read it all at the moment but I have bookmarked it and also
included your RSS feeds, so when I have time I will be
back to read much more, Please do keep up the superb job.
I enjoy looking through a post that can make men and women think.
Also, thanks for allowing for me to comment!
Thanks, glad you liked it
Wow, this post is nice, my sister is analyzing
such things, so I am going to convey her.
I am really impressed with your writing skills and also with the layout on your weblog.
Is this a paid theme or did you customize it yourself?
Anyway keep up the excellent quality writing,
it is rare to see a great blog like this one nowadays.
Thanks, glad you liked it
Can I simply say what a comfort to uncover someone who genuinely knows
what they’re discussing on the internet. You definitely understand how to bring a problem to light and make it important.
More people ought to look at this and understand this side of your story.
I can’t believe you aren’t more popular given that you certainly possess the gift.
Thank you
I enjoy what you guys are up too. This kind of clever work and reporting!
Keep up the good works guys I’ve incorporated you
guys to my own blogroll.
Thanks
Wonderful article! This is the kind of info that should be shared across
the web. Disgrace on the seek engines for not positioning this submit higher!
Come on over and talk over with my web site .
Thanks =)
Thanks, glad you liked it
I need to to thank you for this good read!! I absolutely enjoyed every little bit of it.
I’ve got you book-marked to look at new things you post…
I must thank you for the efforts you’ve put in penning
this blog. I am hoping to see the same high-grade content from you in the future as well.
In fact, your creative writing abilities has inspired me
to get my own blog now 😉
Great post. I was checking constantly this blog and I am impressed!
Very helpful info specifically the last part :
) I care for such information much. I was seeking this certain info
for a long time. Thank you and best of luck.
I rarely leave a response, however i did some searching and wound up here
Accessibility and Colour – The Smart Design.
And I do have a couple of questions for you if it’s allright.
If you are writing at additional places, I’d like
to keep up with everything new you have to post. Would you
list of every one of your shared sites like your linkedin profile, Facebook page or twitter feed?
Fantastic post however , I was wondering if you could write a litte more
on this subject? I’d be very thankful if you could elaborate a little bit more.
Bless you!
Thanks, please feel free to ask questions and I will do my best to answer them