MapA11y is a React-based accessibility tool for map applications and general websites that provides various color filters to enhance visualization for people with visual impairments (e.g., Protanomaly and Tritanomaly). The filters are optimized for integration into mapping applications like OpenLayers.
This plugin is still under constant development
- Protanomaly Filter: Adjusts colors for individuals with Protanomaly (red color blindness).
- Deuteranomaly Filter: Adjusts colors for individuals with Deuteranomaly (green color blindness).
- Tritanomaly Filter: Adjusts colors for individuals with Tritanomaly (blue color blindness).
- Grayscale Filter: Converts the visualization into grayscale.
To run the project locally, clone the repository and install dependencies:
git clone git@github.com:terrestris/mapa11y.git
cd mapa11y
npm install
npm run dev
Then open http://localhost:5173/ in your browser. Here the plugin is integrated into a map application.
To build the package:
npm run build
See also https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix and https://www.ashleysheridan.co.uk/blog/Testing+Colour+Blindness+Effects+Online+with+SVG+Filters for further details about SVG matrix and color blindness.
See also https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-vision-deficiency for more information about the types of color vision deficiency.
This project is licensed under the BSD 2-Clause License. See the LICENSE file for details.
Logo source: ISO 7001 PI PF 049
This file is made available under the Creative Commons CC0 1.0 Universal Public Domain Dedication.