Please enable javascript to view this page in its intended format.

Queen's University
 

Web Standards and Accessibility Guide

Colour

Briefly explained, colours on a computer screen are displayed combining red, green and blue light sources, each within a range of 0 to 255, allowing for a possible 16 million colours. Most modern monitors are capable of displaying this full-range of possible colours (i.e. 32-bit). However, a web-based delivery cannot ensure the same level of colour accuracy that, for example, using Pantone control numbers might provide in the print medium. The best one can hope for on the web is a consistent user experience from one page to the next, as the same web page viewed in two different monitors, or on different operating systems, may look very different.

As part of Queen's Visual Identity Standards, Queen's Department of Marketing and Communications has developed an approved list of institutional colours (red, gold, and blue) for the web that should be referenced as an appropriate starting point in developing a design palette for any Queen's web development projects.

Finally since color is deemed a "presentational" value (as opposed to a semantic value), its use is governed by Cascading Style Sheets.

Standard: Colour must not be the only means of conveying information.

Colour is used in web design for many reasons. Often it is used to distinguish one piece of text from another (required fields on a form, for example), for grouping related items, or denoting hyperlinked text. Often we see colour used in specific sections of a site to thematically group the pages and provide clues/reminders to the person viewing the site that they are in a certain section. It is not the use of colour that is an issue in terms of accessibility - rather, it is the use of colour as the only means to convey information that poses potential problems.

Consider a form that indicates "all required fields are marked in red," a page that states "click the green button to continue," or a web-based report that shows status icons for transactions that differ only in their colour. In each of these cases, someone that may not be able to distinctly recognize certain colours because of their monitor settings, because of colorblindness, or because he/she is using a device that doesn't display colours would experience difficulty getting the information or completing the task at hand.

It is important to ensure that all information that is conveyed with colour is also conveyed by another means. For example, including text with colour-coded icons will help to clarify the function of the icon. Marking required form fields in another way (either with an * before the field, using the word "required" after the form-field label) or using appropriate headers and contextual navigation in each distinct section of the web site will help to alleviate these colour-reliant issues.

Standard: Colours must be declared in the style sheet and done so in pairs to ensure that a foreground color always has an accompanying background color.

Using style sheets for presentation is not without pitfalls. Because there are so many interacting style rules that are required to create a full web site, colours must be paired when they are declared in a style sheet. This ensures that there are always contrasting colours when the style sheet is applied to a document and, when the style sheet is not there or is overridden, that both foreground and background are affected. Design errors occur when text colour is determined by the style sheet while the background colour is declared directly in the HTML. As an example, when Cascading Style Sheets are turned off (via the user's browser settings) or not supported (alternative browser), this could result in default blue-coloured links laid out on a dark-coloured background, making the links impossible to read.

Thus, all colours should be declared in pairs in style sheets. Such a declaration may look like this:

a {color: red; background-color: transparent;}

Standard: Foreground and background colour pairs must have sufficient contrast so as to be clearly distinct.

Ensuring that there is enough contrast between the colours used in your style sheet(s) is fairly straightforward. When selecting colours for foreground and background, check the colour contrast to be sure there will be enough contrast for people with some visual color deficiency or a monochrome monitor.

Roughly 1 in 20 people have some sort of colour vision deficiency. Most of these deficiencies fall into the red/green (deoteranope and protanope) deficit category, but other deficits, such as a blue/yellow deficit (tritanope) can also present challenges to web users and designers.

Thankfully, there are many free and easy-to-use tools available on the web that assess colour contrast and simulate colour deficiencies. When choosing colours, designers are encourage to ensure that their contrasts are sufficient by assessing them using these tools.

See:

Kingston, Ontario, Canada. K7L 3N6. 613.533.2000