Accessible colour combinations

Different people have different needs when it comes to the colour combinations that they can read comfortably (or at all) on screen. But what colour combinations are actually preferred by people with dyslexia or vision impairment?

If you had to pick, say, five combinations of text and background colour that you could let people choose from by means of a style switcher, what would they be, and why? Keep in mind that these are colour combinations intended to improve accessibility.

It would also be great with some links to research or data on this.

Thanks for any input – comments arewere open.

Posted on September 10, 2009 in Accessibility

Comments

  1. September 10, 2009 by John Lascurettes

    What about using the Brewer Palette?

  2. September 11, 2009 by Rob

    Speaking as a colour blind person I have some empathy for the scenario!

    1. Default text size, black on white background
    2. Small text size, black on white background
    3. Large text size, black on white background
    4. Reset links to higher contrast and re-add underline if missing
    5. Change text or grey or back to black

    When I first read your post I was going to suggest something but it’s a bit outside your parameters…

    Three style switchers;

    1. first to change text size

    2. second to change text colour

    3. third to change background colour (from 16 colour pallete)
  3. September 11, 2009 by Jonas Paulsson

    I would have a look at RNIB’s site. They usually have some great information when it comes to anything sight related and they just love studies. :-)

    http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_contrast.hcsp

    Mayby a good place to start even though I didn’t search their whole site.

  4. September 11, 2009 by Mel P.

    Based on work I did a while ago on a project that provided a pan-disability site based on user feedback.

    1. High contrast/visibility: the usual yellow on black seems to be the most popular.

    2. Low contrast: Mid brown on pale yellow. The lower the contrast, the better - to some extent. This aids many dyslexics who find even mid-range contrasts a problem.

    3. Large Text: Dark grey on a light (or white) background. Medium contrast. Supports screen-magnification users who find that the high contrast displays cause pixelation of text.

    4. Multi-color: Strong, primary, colors but still within the mid-range contrast values. If used effectively and logically, this can break down dense pages in visually separate areas which supports those with cognitive problems (Downs Syndrome etc).

  5. September 11, 2009 by Ian McFarlan

    In this circumstance I’m a bit fortunate. Instead of using tools, I call upon friends in the industry that have first hand experience.

    In dealing with colour blindness, I use my set of eyes for a test; I’m colourblind. I’ve found Adobe’s Kuler is good for quickly generating various palettes. Also, Vischeck makes some good products for this.

    As for dyslexia, I pass it off to a programmer friend who happens to dyslexic.

    Other disabilities and vision impairments, I often adjust the contrast of my computer, increase the text size to 200%, and if I still feel uneasy about the design I pass colour combinations through a luminosity contrast checker based on WCAG 2.0 standards.

  6. September 12, 2009 by Roger Johansson (Author comment)

    John:

    What about using the Brewer Palette?

    As I understand it the Brewer Palette is mostly meant to help differentiate adjoining colours. The Colorbrewer looks very useful for maps though, so thanks for pointing me in that direction!

    Rob:

    Thanks for your suggestions. In the thing I’m working on there will actually be options for changing other things than the colours, like text size, line-height, and font-family.

    Jonas:

    Thanks for the link. I’ll check the RNIB site for more info.

    Mel:

    Based on work I did a while ago on a project that provided a pan-disability site based on user feedback.

    Thanks, that’s exactly the kind of input I was looking for.

    Ian:

    Yes, having first hand experience is very useful.

  7. September 27, 2009 by Ramsey

    Have you seen

    http://gmazzocato.altervista.org/colorwheel/wheel.php

    It lets you choose colors based and gives you a virtual representation of 3 different types of color blindness. It also give you an ‘OK!’ if you meet WCAG 1 or 2 contrast specs. Not as many choices in color blindness as the color scheme generator you link to above, but still pretty cool :-)

  8. September 27, 2009 by Roger Johansson (Author comment)

    Ramsey:

    While it seems useful for picking colour combinations that meet WCAG it doesn’t seem to offer guidance to what people with different visual impairments prefer, which is what I’m looking for here.

    Thanks for posting the link though – being aware of more tools to choose from is good :-).

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.