ColourMap - Colour Blind Helper

ColourMap can help colour blind users in reading maps, seating plans and other content where colour is used to convey information. ColourMap is available in two flavours: as a Firefox extension and as a webmaster script.

Download ColourMap Colour Blind Helper

Demo

Hover over the legend to see map change - the toolbar and script creates the same effect

Total forecast rainfall 26-29 March 2013

Map: Copyright Commomwealth of Australia 2013. Australian Bureau of Meteorology

Colour Rainfal
(mm)
Wild Strawberry 400 or more
Magenta 300-400
Electric Violet 200-300
Blue Ribbon 150-200
Azure Radiance 100-150
Caribbean Green 50-100
Harlequin 25-50
Lime 15-25
Yellow 10-15
Selective Yellow 5-10
Koromiko 1-5
White 0-1

ColourMap - Firefox extension

How to use - web content

Step 1

Click the ColourMap button

Step 2

Click and drag a box around both map and legend

Mouse cursor dragging blue box around a rainfall map and its legend. Legend and map uses a range of colours to indicate rainfall.

Step 3

Click on each of the colours in the legend:

Mouse cursor on map legend, the coloured square under the cursor becomes black with yellow border.

Hovering over a legend colour will now colour the corresponding area in the map black:

Rainfall map: yellow legend item is hovered over and the yellow area on the map turns black.

Rainfall map: orange legend item is hovered over and the orange area on the map turns black.

Rainfall map: tangerine legend item is hovered over and the tangerine area on the map turns black.

How to use - Flash & non-web content

This can be used for any content on your screen.

Step 1

Take a screen shot (Print screen key on Windows, Command + Control + Shift + 3 keys on Mac).

Step 2

Click the Colour map icon.

Step 3

Paste the image (Control + V on Windows, Command + V on Mac).

Step 4

Click the ColourMap icon again and drag as before to use toolbar.

Alternatively, start dragging straight away without clicking the ColourMap, this will crop the pasted image.

Locking and other functions

Top of dragged box contains a lock button, drop-down box with value 40 and a delete button

Clicking on a legend item will freeze the map in this view so you can move the mouse without changing the view. This can help screen magnifier users as they use the mouse to navigate the screen.

Clicking the lock button disables the ability to create new legends, so you can click around on the map as you wish.

Clicking a legend and then pressing the delete key removes the legend.

The drop-down box can be used to change the colour tolerance. If the legend colour is different from the colour on the map it might be necessary to use a greater tolerance e.g. change the drop-down from 40 to 70 and then clicking to create a new legend.

ColourMap - webmaster script

By adding a script to your page, you can provide colourblind support to images, just include a call to the clourmap function and inform users to click the image to load the colour hover effect.

Click on map below then hover mouse over the legend (this is not supported by IE 8).

Or, move focus to the map using the Tab key, press Enter then use the Up and Down Arrow keys to move though the legend.

<img width="570" height="391" alt="Map of Australia showing total forecast rainfall between 30 March and 06 April 2013. Copyright Commomwealth of Australia 2013. Australian Bureau of Meteorology. Issued 29 March 2013" src="/images/business-services/mapwlegend.png" id="rainmap" />

The cololurmap script is added with the following code:

 <img id="rainmap" width="570" height="391" src="/images/business-services/mapwlegend.png" alt="Map of Australia 
showing total forecast rainfall between 30 March and 06 April 2013. Copyright Commomwealth of Australia 2013.
Australian Bureau of Meteorology. Issued 29 March 2013"
/>
<script
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
type="text/javascript" src="colourmap.js"></script>
<script type="text/javascript"> visionaustralia.addcolourmap("rainmap",40,[[490,70],[490,90],[490,110],[490,135],[490,155],[490,170],
[
490,195],[490,225],[490,240],[490,260],[490,285],[490,300]]);
</script>

The arguments to the addcolourmap function are:

  1. id of the image
  2. Number between 0 and 100. 0 means that only the exact pixel colour will be recognised, higher numbers allow for variation in the colour.
  3. Array of points. Each point represents a pixel within a legend colour. You can get these numbers by opening the image in Microsoft Paint and hover the mouse over a legend area, the x and y-values are displayed in lower left section of the window. Any point within the coloured legend area will usually do.

Using colours

For content that use colour to convey information, an alternative way should be provided in parallel e.g. using hatching or symbols - don't rely on users to have colour recognising tools.

For information on colour blindness and for support within Australia please visit Colourblind

Terms of Use

Developed by Pierre Frederiksen. Pierre is a web accessibility specialist at Vison Australia

THIS SOFTWARE IS BEING PROVIDED "AS IS", WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, VISION AUSTRALIA DOES NOT MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, VISION AUSTRALIA DOES NOT GUARANTEE THAT USE OF THIS SOFTWARE WILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.

Creative commons licence - logo
This work is licensed under a Creative Commons License









Print Print larger font