Step 1: Colour scheme
So what resources are available to help us choose a color scheme? After just 15 minutes of browsing I’m ready to throw my teddy out of the pram and yell for mama, there’s just too much information out there!
Okay, Let’s start by reading the following:
Guideline 2.1 of the Web Content Accessibility Guidelines 1.0:
Ensure that all information conveyed with color is also available without color, for example from context or markup.
I’m not sure how to put that into practise yet but let’s move on to Guideline 2.2 of the same document which states that we need to:
Ensure that text and graphics are understandable when viewed without color.
If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.
Okay, so how can we check that the colours we use as the basis for a new scheme follow the above guidelines?
There’s more:
Use numbers, not names, for colors.
Use these CSS properties to specify colors:
- ‘color’, for foreground text color.
- ‘background-color’, for background colors.
- ‘border-color’, ‘outline-color’ for border colors.
- For link colors, refer to the :link, :visited, and :active pseudo-classes.
Ensure that foreground and background colors contrast well. If specifying a foreground color, always specify a background color as well (and vice versa).
Right, let’s take these one by one:
- Use numbers, not names, for colors.
Check. The default css provided with this template [link now invalid] contains no named colours such as H1 {color: red}. - Use these CSS properties to specify colors
Okay on the background-color but I need to change the link colors. Now, can I go back to using the highlight style links of the previous layout, an example of which is here? I’m thinking that as long as the color contrast is strong enough, I should be okay but if you know differerently, please shout out.
Hmm, as I write this I’m aware that I might be breaking all sorts of rules about alternative descriptions, text descriptions of all graphics but forgive me for a while. There’s only so much this brain can hold at any one time. As far as I know, the TypePad interface [see example here] for uploading pictures and other files does not contain any option for including such markup so I’ll need to edit each one manually (not a problem!) but let’s get the color issues resolved first.
It also occurs to me that I might have to change the way I write about links. Until today I would have written something like:
…using the highlight style links of the previous layout
but I’m not clearly indicating an external link there am? I’m putting this subject off to another day but any advice on that in the meantime would be greatly appreciated.
So it the first (and most easily achieved step) is to ensure a good colour contrast. I’m starting to get rather fond of these template colours but that orange [#FF9900] has to go. Much as I liked the red and gold of yesterday, I’d like to get the pink daisy back in (eagle eyed readers will have spotted that I never quite got round to changing the favicon) but let’s look at what we can find online to help us check that a particular colour scheme has enough contrast - bring on the Colour Contrast Analyser 1.0. I’ve just downloaded the tool (tiny file, no install) and entered in the template colours - here’s a screenshot of the results:
The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 265.
So - do I lighten the background colour and darken the text colour? That’s okay, I’ve taken up far too much of your time already so I’ll have a play with the colours and report back.
I’m just about to put most of this post in an extended post and again I’m stopping to wonder if that’s a good thing. I’ll carry on doing it until I learn differently.
Summary of topics raised in this post:
- Colour contrast - understood, now to find a good colour scheme and implement it.
- Ensure that all information conveyed with color is also available without color, for example from context or markup - find more information, report back here.
- Writing content so that external links are clearly indicated - to be researched
- Alternative text for graphics - next topic when color/links are sorted
- Extended posts - to be researched
Blimey, and that’s just day one…
[Written while this site was hosted at TypePad.]
February 21st, 2005 18:13
Librarian living on the edge and looking at your site on the enquiry desk. It’s taking ages to load btw.
Perhaps not the point, but there are sites where you can download software to change your browser settings so that you can have control over the colour of the sites you are looking at, to make them more accessible. I haven’t got details to hand I’m afraid, but worth knowing that people can change the look of websites so that they can see them better.
Good on you for taking all of this on board, I’m struggling with making mine accessible to people with standard vision, but I do know it’s something I should do.
Back to work…
February 21st, 2005 18:20
I use http://wellstyled.com/tools/colorscheme2/index-en.html often to do contrasts on bases. It helps out a lot.
February 21st, 2005 19:35
Whoa - it’s changing before my very eyes … this is exciting!
February 21st, 2005 19:46
Katherine, I’m hoping that the slowness was because of republishing the whole site, twice (30-40 minutes each time). Could you let me know if it continues to be slow?
Thanks eo, I’d forgotten about that, will go check it now. I’ve removed all the sidebar links temporarily so I’m a bit lost!
Em², I was going to poke fun about finding this exciting but realised that I’m in the same boat so I’ll hush up. Right now ;-0)
February 21st, 2005 19:47
Oh and if you’re still seeing the old mustardy gold colour of the old layout (but no banner) try pressing Ctrl F5 (not sure what that is on the Mac I’m afraid) but it will do a thorough referesh and the mushroomy colour layout should appear. Fingers crossed.
February 21st, 2005 22:10
Daisy, I salute you.
What are you using to test though? Cynthia’s good, but I find I get more in-depth information from Bobby.
Apologies if I’m teaching me Grandma to suck eggs.
…er, so to speak.
February 21st, 2005 22:23
Less of the grandma references, young man!
I haven’t gotten to the stage where it’s worth testing yet, hopefully a few days that’ll change. I’ve got the Accessibility toolbar installed for quick validation via Cynthia etc. and I’ve Bobby bookmarked but the only times I’ve gone on there to validate (old layout), the number of errors was so overwhelming, I quickly clicked away and buried my head in nearest available sand. But all that’s going to change!
Actually, I do have a quick question. The current layout is a basic 2 column template with the sidebar on the right. When I view the page with css switched off, the navigation items are near the bottom - hang on I’ll write a post about it and add some screenshots.
But don’t ever think you’re teaching me to suck eggs, all advice is much welcomed - even if by some quirk I’m already aware of whatever it is, the joy of comments on posts like this is that anyone can learn from them.
So keep ‘em coming youngster!
February 21st, 2005 22:49
With the styles off, the html of your page gets parsed in the order in which it’s written. If you were to put the whole div#right html before div#center, give div#center float:left, remove its margin, float div#right to the right and remove its positioning information you ought to get the same display you have now. Switch the styles off and the sidebar stuff will *ahem* come first.
February 21st, 2005 22:59
*gulp* - I start to panic when I see the word float, I’ve only played with positioning a tiny bit so far. But that makes huge sense and first thing tomorrow I’ll have a go. Thanks Jann.
February 22nd, 2005 23:00
You don’t need special software to change the colours of the page you’re viewing, you just need the author of the page to have picked a place for the colours (either in HTML or CSS) and not split the two.
As for choosing colour schemes, there are a couple of tools you can use to help you make sure you’ve got adequate contrast.
There’s a standalone downloadable installable thing by the same people who do the accessibility toolbar:
http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html
There’s also the Juicy Studio colour contrast analyser for individual pairs:
http://www.juicystudio.com/services/colourcontrast.asp
or the CSS Analyser if you want it to check your entire stylesheet plus check for some other stuff:
http://juicystudio.com/services/csscontrast.asp
From a very quick look at your screenshot, the additional background highlight colour of unvisited link 1 is probably putting it a little bit close in terms of contrast, but it’s worth checking out.
In terms of tools, if you want useful information, you’re probably better using the various tools on the accessibility toolbar than running Bobby or Cynthia over it, but that’s just my opinion.
I’ve run off at the mouth a bit, but hope it’s helpful.
February 23rd, 2005 01:10
Wow, thank you pixeldiva - all advice gratefully received!
“You don’t need special software to change the colours of the page you’re viewing, you just need the author of the page to have picked a place for the colours (either in HTML or CSS) and not split the two.”
I’m not sure I understand that - do you mean when a visually impaired person accesses the site in monochrome or via a screen reader and that all colour information should be in the css style sheet?
The screenshots - if I use a highlight effect for link hover, I’ll be sure to choose a high contrast colour combination (I think that’s what you mean?)
I’ve been making good use of those colour contrast tools you recommend (over there in the accessibility blogroll), it’s just that everything’s taking longer than it should because I’m busy at work. But we’ll get there, especially with help from you guys :-0)
February 23rd, 2005 11:06
To be honest, anyone who access the site solely with a screen reader doesn’t give a toss what colours you’ve got specified and most people with partial sight won’t access your site in monochrome - if they see your site in monochrome it’ll be because that’s how they see the world.
You can either specify all your colours in the html, or all of them in the CSS. If you split them, you can have a situation where when you go into Tools/Internet Options/Colours and uncheck windows colours some colours will persist on the page, meaning that you can get dodgy contrasts.
The other thing that can happen is that someone will disable CSS to use their own style sheet or particular colours, but instead of it all going to their colours, some of your colours will persist.
From an all round point of view, it’s better if you just have all styling in the CSS.
If I get time later I’ll do you a screenshot or two to show you what I mean.
Re: link hover highlight - yes, that’s what I meant.