Selecting combinations of colours to use in the palette for a website design can seem tricky. You like the green background, but now what? How do you get a nice blend of other tones, or how do you add that flash of something completely different? Furthermore, how do you make sure that your chosen scheme is accessible (read: visible) to your users. Let’s not forget – as many as 10% of males are estimated to have red/green colour blindness. Color Scheme Designer 3 to the rescue.
My friend Paula pointed this website out to me, and it is really very impressive. I have used a couple of colour and palette builder sites before (e.g. Colour Lovers), and I’ve employed a couple of different sites for assessing how accessible (or not!) a design and colour palette might be for people with vision impairments (e.g. Colourblind Web Page Filter or VisCheck). However, the great thing with Color Scheme Designer is that you can create palettes AND check them for visibility, all in one place. Marvellous.
Rich Internet Application
- It is direct – users can manipulate things easily
- It’s lightweight – no massive downloads or long waits
- It keeps the user on the page so that everything flows
- Optional tooltips allow the user to discover functionality
- Transitions are used subtly bu effectively (e.g. switching between “Hues” and “Adjustment Scheme”)
- The interface is responsive and quick
Hey, and version 3 “no longer supports” Internet Explorer 6, which made me smile.
There are a number of really nice touches. I particularly like the fact that you can apply visibility filters in the same window, and even display text over the colours, to check for readability.
I’m not sure where Pixy gets his statistics from (e.g. the 1% for protanopy – red/green colourblindness), but nevertheless, this feature works really well. I am not an expert on colourblindness; I just want to test for accessibility!
Users can export the colour scheme as HTML + CSS, XML, text, as a Photoshop palette, or a GIMP palette. Sweet.
The possibility to display popup example pages is also very neat.
I found couple of minor problems. Users are able to choose to display tooltips, to describe the features (menu > About & Help > Show/Hide Tooltips). Nice touch, but not all the tooltips are visible, at least not on my 13″ display.
The other, much more minor thing, was that it took me a couple of minutes to figure out how I could specify exactly which starting colour I wanted to work with. I could play around with the colour wheel, and I could look at the color list, but I really wanted to have more control over this feature. It is there, but it’s not so easy to spot:
Those couple of issues aside, I found this to be a really nice application, and I will certainly be using it in the design projects I get into. Recommended!
Please note: carrying out this sort of automated, heuristic accessibility or usability testing is very useful, but you can’t just tick the “accessible” box once you have done this. Firstly, accessibility issues are not always about visibility, and secondly, critically, automated testing is not a replacement for testing with real users. Automated check can only detect and emulate some of the issues that users might face. Get to know your users…