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
Hover over the legend to see map change - the toolbar and script creates the same effect
Map: Copyright Commomwealth of Australia 2013. Australian Bureau of Meteorology
|Colour ||Rainfal |
|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
Click the ColourMap button
Click and drag a box around both map and legend
Click on each of the colours in the legend:
Hovering over a legend colour will now colour the corresponding area in the map black:
How to use - Flash & non-web content
This can be used for any content on your screen.
Take a screen shot (Print screen key on Windows, Command + Control + Shift + 3 keys on Mac).
Click the Colour map icon.
Paste the image (Control + V on Windows, Command + V on Mac).
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
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.
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.
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"/>
The arguments to the addcolourmap function are:
- id of the image
- Number between 0 and 100. 0 means that only the exact pixel colour will be recognised, higher numbers allow for variation in the colour.
- 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.
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
Developed by Pierre Frederiksen. Pierre is a Principal Technical Consultant at Vision 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.
This work is licensed under a
Creative Commons License