Colour in user interface design

See also: accessibility, accessibility evaluation, accessible design techniques and tutorials

Discussion articles

  • Accessible colors
    "W3C assert that the formula (they have developed for testing for accessible color) has been tested using a sample of 149 volunteers where 80% of them reported some visual impairment (acuity problems, myopia, hypermetropia, presbyopia). However there are some problems that invalidate the results obtained."
    (Menghini Calderón Fabrizio Antonio)

  • Accessibility color wheel
    "This tool analyzes the contrast of a color pair. It simulates how people with three forms of colorblindness might see the colors."
    (Giacomo Mazzocato)

  • Barrier-free presentation that is friendly to colourblind people
    Colour blindness is not a total loss of colour vision. Colourblind people can recognise a wide ranges of colours, but certain ranges of colours are hard to distinguish. This site provides an explanation of colourblindness and guidelines on how to make presentations that cater to colourblind viewers.

  • Colour and contrast accessibility issues: for the design of e-learning materials
    This paper provides an insight into the issues of colour choices and colour contrast design requirements when developing on-line learning materials for people with colour discrimination difficulties as in colour blindness and visual impairment and for those who find different colours helpful for reading.

  • Colour and design FAQ
    Intended to fill a gap between the highly technical aspects of colour and design, this FAQ consists of 6 parts. The first two cover questions about basic colour psychophysics and the third covers colour appearance and perception. The following set of questions explains "colour blindness" and the last two sets deal directly with effective use of colour in design.

  • Colours on the web: colour theory and colour matching
    Technically speaking, colours are the way our brain, by use of our eyes, interprets electromagnetic radiation of a wavelenght between 350 and 750 nanometers. The different wavelengths are seen as different colours, and form a colour spectrum. The colour wheel--the spectrum turned into a wheel--is particularly useful for showing how colours relate to each other and how you can create new colours by mixing two or more colours.

  • Color theory for digital displays: a quick reference, part 1
    "This article is Part I of a quick reference on color theory for digital displays. It is the first in a series of articles about the use of color in application program user interfaces and on Web sites."
    (Pabini Gabriel-Petit - UXmatters)

  • Color theory for digital displays: a quick reference, part 2
    "This article is Part II of a quick reference on color theory for digital displays. It is the second in a series of articles about the use of color in application program user interfaces and on Web sites."
    (Pabini Gabriel-Petit - UXmatters)

  • Colour theory for today
    The combination of the art, psychology, and technology of design on the web creates a new genre of colour theory for the modern age. The trick is to learn how to combine them all together for a creative solution to your design problem that will look the same and have the same effect from computer to computer, browser to browser, and country to country.

  • Colour vision, colour deficiency
    Colour perception problems are more wide-spread than people think, and have more causes and variations. As many as one male in twelve may be affected to some degree; the number is much less for females, but definitely not zero (one estimate is around 0.4%). Before we try to understand colour deficiencies, though, it would be useful to understand how colour vision works.

  • Considering the colourblind
    About 8 percent of men and 0.5 percent of women have some form of colour blindness. For some websites that could translate to 1 in 12 visitors. That's a larger proportion of visitors than some other groups I consider when designing websites. The ratio of visitors viewing the web with only 256 colours or a 640x480 pixel screen is usually less than 5 percent these days. Now include cross-browser support, older browsers, style sheets, and JavaScript in the mix. If you consider those issues when you design websites, you should consider your colourblind visitors, as well.

  • Effective colour contrast: designing for people with partial sight and colour deficiencies
    This web page contains basic guidelines for making effective colour choices that work for nearly everyone. To understand them best, you need to understand the three perceptual attributes of colour: hue, lightness and saturation, in the particular way that vision scientists use them.

  • Natural selections: colours found in nature and interface design
    The web is awash with sterile design solutions. IBM, Dell, Microsoft, and countless others are virtually indistinguishable from each other. Though one might say this makes browsing easier by virtue of a standardised interface, in reality such sites create mundane experiences for their users and fail to make a positive connection with their audience.

  • Quick colour class
    This short article addresses technical limitations and usability considerations of colour on the web.

  • Type and colour
    Reading is the primary activity of the web. For people with impaired vision who do not use screen readers, colour choices and, to a far lesser extent, type size become the accessibility issues. This is Chapter 9 from Joe Clark's Building Accessible Websites.

Research articles

  • Testing the readability of web page colours
    Unlike the typical printed page, web documents are generally designed to include colour. The careful use of colour can make the document easier to read, easier to navigate and more appealing to the reader. The proper use of colour can also increase the user's performance in computer based decision support systems. In contrast, a poor selection of text-background colour combinations can significantly detract from a document's readability. But what colours should be used for the text and background on web pages? This paper describes an algorithm that can be used to machine test the readability of colours used for web pages. We also describe a study undertaken over the Internet to test the effectiveness of the algorithm.

Tools

  • ColourBrewer
    ColourBrewer is an online tool designed to help people select good colour schemes for maps and other graphics.

  • Colourblind web page filter
    An online tool that simulates how colourblind users would encounter a web page or image.

  • Colour contrast analyser
    Guideline 2.2 of the Web Content Accessibility Guidelines 1.0 requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range. They suggest a colour contrast algorithm, which is used in this test.

  • Colour contrast test pattern
    This test pattern illustrates the visibility of monochrome text against a coloured background, and can be used to calculate the visibility of coloured text on a coloured background.

  • Colourfield Insight
    colourfield Insight is a Photoshop plug-in that allows designers to predict image legibility for colour deficient viewers by accurately simulating colour blindness. Insight is available only for the Macintosh and supports Adobe Photoshop, After Effects, Image Ready and Illustrator, as well as Macromedia Fireworks.

  • Colourmatch Remix
    A colourpicker based on the code from colourMatch 5k. It works in Mozilla, and should also work in Opera. Autogenerates 9 colours and provides the ability to export your colours to a Photoshop colour table.

  • Colour scheme picker
    This tool allows you to pick a colour scheme for a website. You can select either websafe or the full colour palette, and you can view how the colours will appear to those with varying kinds of colour blindness. Choose also from monochromatic, analogic and contrast colour schemes

  • Colour visibility test program
    This free program tests the background and text colours of an HTML document for colour visibility. It runs under Windows 95/98/NT.

  • Colour Wheel Pro
    colour Wheel Pro is software tool that helps you create harmonious colour schemes based on colour theory.

  • Vischeck
    Vischeck simulates colour-blindess. You can use Vischeck online to check an image file or a web page. You can also download software and run it on your own computer.

  • What do colourblind people see?
    A collection of java applets that allow you to simulate how colourblind people see your content.

Books and book reviews

  • Effective colour displays
    Colour is an effective way of conveying information and it has important uses in tasks where identification, coding and response times are important. But when colour is used inappropriately it can be counter productive and few software designers have much experience with the use of colour. This book synthesises our current knowledge in the area and specifies guidelines so that programmers, engineers and designers can use colour effectively.