Color Scheme Designer 3

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.

Combining functionality

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

The application has been created by Petr Stanicek (aka Pixy… I remember him from his handy favelets), a Czech designer and JavaScript developer, and makes extensive use of the jQuery JavaScript library. It fits very nicely the six principles of a usable rich internet applications (RIAs) that I read a little while ago:

  1. It is direct – users can manipulate things easily
  2. It’s lightweight – no massive downloads or long waits
  3. It keeps the user on the page so that everything flows
  4. Optional tooltips allow the user to discover functionality
  5. Transitions are used subtly bu effectively (e.g. switching between “Hues” and “Adjustment Scheme”)
  6. 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.

Small issues

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…

9 thoughts on “Color Scheme Designer 3

  1. Sun Sunich says:

    thanks for a great link. i like this tool much more that adobe’s kuler. the best feature is sure the site preview (popup example)!

  2. eamonnmag says:

    this is cool actually. i never came across this tool up until now, and it will certainly help people do what is often the toughest thing to do!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s