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 versions:

  • Online tool
  • Webmaster script

Demo

Hover over the legend to see the map change. Alternatively, move focus to the map and then use the Arrow keys.

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

ColourMap - online tool

Step 1 of 2: Drag or paste an image file to the box. Alternatively, upload a file.

How to use online tool

Once you've dragged an image file to the box above, click on each of the colours in the legend, then hover the mouse over a legend item to see the corresponding colour turn black on the map. Alternatively, move focus to the map then use the Arrow keys to select a legend item.

Map of the USA covered with coloured areas. A legend shows what values the different colours represent. The cursor is hovered over a light green legend item and this highlights the corresponding colour on the map by coloring it black

Clicking on a legend item (or pressing the Enter key when it has focus) 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. It also comes in handy for keyboard users as they can use the Arrow keys to scroll the page when the map is frozen.

Hovering over a legend and pressing the delete key removes the legend.

Locking the map

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

Changing tolerance

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 20 to 50 and then clicking to create a new legend.

Keyboard access

Clicking the keyboard icon displays a yellow circle in center of the map. The circle can be moved using the keyboard Arrow keys and pressing Enter created a legend item on the map. This enables keyboard users to create legend items.

Key Function
C Places yellow circle in the centre of the map and resets the bisecting navigation
Arrow Moves yellow circle in bisecting distances: for each move the distance is halved
Ctrl + Arrow Moves yellow circle one tenth of the map
Alt + Arrow Moves yellow circle 1 pixel
Shift + Arrow Scrolls the webpage
Enter Creates a legend under the yellow circle

ColourMap - webmaster script

The colourmap functionality can be added to any image by including a call to the colourmap function. On pageload, the image is swapped with a canvas element with built-in colourmap functions. This is shown in the demo at the top of the page.

Note: the webmaster version does not allow users to create or delete legend items.

The ColourMap webmaster script can be obtained from our Downloads page.

Code for making an image a colourmap:

 <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="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.

Terms of Use

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.

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










Print Print larger font