Simulate four types of color-blindness in two degrees each

People affected by Protan color-blindness are less sensitive to red light. Prism can simulate both Protanopia (complete blindness to red light) and Protanomaly (general weakness to red light).

How does Prism work?

Prism is completely open-source, using vanilla JavaScript, HTML, and CSS to achieve the intended effect of color-filtering an entire webpage.

First, an SVG script containing all color filters is injected directly into the page. These filters are represented by the Color Matrix Library, whose values are customized to simulate a particular type of color-blindness (e.g., Deuteranopia, Deuteranomaly, etc.).

As a user selects a type of color-blindness, Prism modifies the page by calling CSS’ built-in filter property, which provides graphical effects to elements of the page. Using a url value that points to the user-selected filter from the SVG script, Prism then applies styling to all elements of the page: text, images, videos, backgrounds, and buttons alike.

Customize your browsing experience

Current features of Prism include:

On/Off Toggling

Enable and disable Prism at the click of a button.

Descriptions and Examples

Not sure how a particular color-blindness affects vision? Each filter is fully detailed and illustrated.

Open Source Code

Prism is free, flexible, and secure.

Learn more about Prism

Visit the Chrome store or see the code below