Color Scheme Designer 3

18 Sep

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…

About these ads

9 Responses to “Color Scheme Designer 3”

  1. Sun Sunich September 18, 2009 at 2:59 pm #

    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 September 19, 2009 at 9:55 pm #

    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!

  3. Francis Rowland September 20, 2009 at 11:12 pm #

    @Sun – glad to hear you found it useful. That feature is a cool one! As for the colourblindness bit, I would still recommend that people use something like the Colorblind Web Page Filter (http://colorfilter.wickline.org/) to check existing sites.

    • Sun Sunich September 21, 2009 at 7:58 am #

      Another useful link, thanks Francis.

    • Benoit September 22, 2009 at 9:40 am #

      You might also be interested by this mac app called “Color oracle” that allows you to see your screen as different type of color blindness would see it
      http://color-oracle.en.softonic.com/

      not sure if it is leopard compatible…

      Ben

      • Francis Rowland September 22, 2009 at 10:09 am #

        @Benoit – cool, thanks for that. I hadn’t seen it before. Might be very useful for people developing offline, standalone software…

        The link in your comment seemed to be just for the Windows version. To get to the Mac and Linux versions, see here: http://colororacle.cartography.ch/

      • Sun Sunich September 22, 2009 at 11:04 am #

        I just tried Windows version. Impressive. :) Never really imagined how people with this kind of sickness (?) see the web…

  4. Francis Rowland September 20, 2009 at 11:13 pm #

    @Eamonn – yep, removing guesswork has got to be a good thing!

  5. Nils Gehlenborg September 24, 2009 at 1:59 pm #

    Here’s another potentially useful website that helps with color selections for the color-blind: http://wearecolorblind.com

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: