andrews54757/svg-daltonizer

Generate SVG filters for color vision deficiency simulation and correction

SVG-Daltonizer

Generate SVG filters for color vision deficiency simulation and correction. These filters can then be applied using CSS.

Developed for use in FastStream, a browser extension for better video playback.

Available CVD types:

1. Protanomaly
2. Dueteranomaly
3. Tritanomaly

Uses the LMS daltonization algorithm.

Usage

Demo available in ./demo/ Live on Github Pages. Use SVGDaltonizer.mjs to generate new svg filters.

import { DaltonizerTypes, SVGDaltonizer } from "./SVGDaltonizer.mjs";

let svgobj;
let simulate = false;
let useMachado = true;
let type = DaltonizerTypes.PROTANOMALY;
let strengthValue = 1.0;
if (simulate) {
    svgobj = SVGDaltonizer.makeCVDSimulatorFilter(type, strengthValue, useMachado);
    svgobj.filter.id = 'simulate-' + type + '-' + strengthValue;
} else {
    svgobj = SVGDaltonizer.makeLMSDaltonizerFilter(type, strengthValue, useMachado);
    svgobj.filter.id = 'daltonize-' + type + '-' + strengthValue;
}

targetElement.style.filter = `url(#${svgobj.filter.id})`;
document.head.appendChild(svgobj.svg);

Pregenerated SVG filters are also available in ./pregenerated/

Helpful Resources

http://www.daltonize.org/2010/05/lms-daltonization-algorithm.html

https://ixora.io/projects/colorblindness/color-blindness-simulation-research/

https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html

License

Available for use under the MIT license. See LICENSE.md for more information.