An accessibility-forward tool for choosing map colours that work for everyone who reads them, including the significant share of viewers with colour vision deficiency. Built for the maps that go into council reports, planning documents, and environmental and construction work, where colour has to carry meaning reliably in public documents.
A single page tool for choosing map colours for New Zealand territorial authority choropleths. It recolours a live map as you swap palettes, adjust brightness, and check how the map reads for viewers with colour vision deficiency.
Everything runs in one HTML file. There is no build step, no framework, and no external data call, so it works offline and deploys as a static file.
- Recolours a 66 territorial authority choropleth in real time.
- Five hand picked palettes drawn from New Zealand landscapes: Aoraki, Punakaiki, Central Otago, tussock, and pāua.
- A brightness control that scales the ramp in linear light.
- A colour vision check that simulates deuteranopia, protanopia, and tritanopia.
- Two data variables computed from the geometry itself: approximate land area and a boundary detail index.
- Quantile or equal interval classification, from 3 to 7 classes.
- Region focus, including a Lincoln marker when Canterbury is selected.
- Copy the current palette as hex, or download the current map as an SVG.
Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. A map that separates categories by hue alone can lose meaning for a large part of a public audience. This is a common problem for council maps, planning documents, and consenting material that go out for consultation.
Two things in this tool help with that:
- The five palettes all run from light to dark in a single direction. Lightness is ordered, so the ranking of the data stays readable even when hue perception is reduced. You can confirm this by turning the colour vision check on and watching the order hold.
- The simulation lets you preview the map roughly as it appears to someone with each of the three common deficiencies, before the map is published.
The simulation is a model, not a medical result. It uses the matrices from Machado, Oliveira and Fernandes (2009) at full severity, applied in linear RGB. It is a sound way to sanity check a design, and it is not a substitute for testing with real users where that is possible.
Boundaries are the Statistics New Zealand 2013 census territorial authorities, taken from the nzherald open data conversion of the Statistics NZ shapefiles. That data is licensed under the Creative Commons Attribution 3.0 New Zealand licence, and the attribution is shown in the page footer.
The boundaries are simplified for the web with Mapshaper and projected once into screen coordinates using a simple equirectangular fit with a cosine correction at the centre latitude. This is fine for a national overview and for choosing colours. It is not survey grade, and it is not intended for measurement. Chatham Islands and offshore areas are left out so the projection stays clean.
The two data variables are derived from the simplified geometry, so they are honest to the shapes on screen rather than pulled from an outside table. Land area is an approximate figure in square kilometres. Boundary detail is a perimeter to area index that is higher for districts with long or intricate coastlines.
The whole app is index.html. To publish it:
- Drag and drop option: open the Netlify dashboard, choose to deploy manually, and drop the folder that contains
index.html. Netlify serves it as the site root. - Git option: push this folder to a repository, connect it in Netlify, and leave the build command empty. Set the publish directory to the folder that holds
index.html.
No build settings are needed because there is nothing to build.
The geometry is baked into index.html as projected SVG paths. To swap in a newer boundary set, for example the current Statistics NZ territorial authority file:
- Simplify the source with Mapshaper, for example
mapshaper input.geojson -filter-islands min-area=25km2 remove-empty -simplify visvalingam 0.8% keep-shapes -clean -o precision=0.004 out.geojson. - Project it to screen coordinates and export the compact JSON. The
project.pyscript used here reads a GeoJSON, projects each feature, computes the per feature values, and writes the object that the page expects. - Replace the data object at the top of the script block in
index.html.
Keep the property names the same (name, region, d, cx, cy, area, complexity) and the page will pick up the new geometry without further changes.
- All controls are standard form elements and buttons, so they work with the keyboard and with screen readers.
- Each district carries a title, so its name and region are available to assistive technology and on hover.
- Focus is visible on every control.
- Motion is reduced automatically when the operating system asks for it.
- The legend always shows the numeric range for each class, so colour is never the only channel carrying meaning.
A short caption you can adapt for a post:
I built a small tool for picking map colours for New Zealand territorial authority maps. It recolours a live choropleth as you swap palettes and adjust brightness, and it simulates deuteranopia, protanopia, and tritanopia so you can check that a map still reads before it goes to the public. The palettes are ordered by lightness, so the data order survives even when hue does not. Boundaries from Statistics NZ. Feedback welcome.
The boundary data is Statistics New Zealand data, licensed under Creative Commons Attribution 3.0 New Zealand. Keep the attribution in place if you reuse it.
The code in this repository is yours to license as you prefer. MIT is a reasonable default for a small public tool.