[p5.js 2.0 RFC Proposal]: Add a way to simulate color blindness

[nickmcintyre]

Increasing access

A simple tool for simulating color blindness will make it easier for people to ensure their sketches accessible to people with color blindness.

Which types of changes would be made?

• [ ] Breaking change (Add-on libraries or sketches will work differently even if their code stays the same.)
• [ ] Systemic change (Many features or contributor workflows will be affected.)
• [X] Overdue change (Modifications will be made that have been desirable for a long time.)
• [ ] Unsure (The community can help to determine the type of change.)

Most appropriate sub-area of p5.js?

• [X] Accessibility
• [X] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

What's the problem?

There's no easy way for people to ensure their sketches are accessible to people with color blindness. Doing so requires research and third-party software such as Color Oracle.

What's the solution?

I propose adding ways to simulate color blindness and to help coders adjust colors so that their canvases are more accessible. These tools should be available in p5.js by default. Doing so would help folks to get in the habit of making their sketches more accessible early in the design process.

@hx2a's ColorBlindness library could serve as a starting point for the design and implementation. We could add new functions or perhaps new filters for filter().

Pros (updated based on community comments)

TBD

Cons (updated based on community comments)

TBD

Proposal status

Under review

[davepagurek]

I think this is a great accessibility feature to add, and adding it via a filter shader seems like a good fit! It looks like this would be an additive feature without breaking backwards compatibility, so it maybe could be added post-2.0 if we need to focus our dev efforts on the breaking changes that are part of the release? So that also gives us some extra flexibility if it looks like our dev schedules are going to be packed

[perminder-17]

Thank you @nickmcintyre , and I truly appreciate your consideration of the issue, especially regarding making our sketches accessible for color-blind individuals. I believe I grasp the key aspects of the matter, and your suggestion of incorporating the feature through a filter function is not only logical but also exciting. I'm eagerly anticipating its implementation. As @davepagurek mentioned, it's an additional feature, so we can include it post RFC 2.0. If there are no plans from others to address this issue, I'd be more than happy to take on the task after RFC. Thanks :)

[hx2A]

Hi! @nickmcintyre , this a great proposal for p5. I made the Processing ColorBlindness library, which is how Processing can support colorblind users. I'm happy to help out as we think through this proposal.

The ColorBlindness library works by pre-calculating the color transformation for every possible color, storing the results in a lookup table, and doing a pixel by pixel translation of colors. There is a small up-front cost (a few hundred milliseconds?) to pre-calculate that lookup table. The alternative is to do the calculations on the fly, but that will impede Sketch performance, particularly for larger Sketch windows.

Using a shader is good approach for users with GPUs or good CPUs with integrated graphics. Do all p5 renderers support shaders? Or just the ones that use WebGL?

Since p5 runs in a browser, you might be able to use SVG filters. I have seen examples of this online. If it works, this might be easy to implement, fast to execute, and work for all renderers.

[davepagurek]

@hx2A we now have the ability to run shaders on 2D canvases too! (under the hood it creates a WebGL canvas to run the shader on, then draws it back to the main canvas.)

[hx2A]

@hx2A we now have the ability to run shaders on 2D canvases too! (under the hood it creates a WebGL canvas to run the shader on, then draws it back to the main canvas.)

Neat! Perhaps I am thinking about it in terms of Processing, where the default JAVA2D renderer cannot run shaders but the OpenGL renderers P2D and P3D can.

I suggest exploring the different approaches to see which has the smallest performance impact on the Sketch frame rate. Ideally, the the frame rate with this feature should be as close as possible to the frame rate without it.

[hiddenenigma]

I'm not familiar with Windows OS but one thing to consider for Mac is that they have accessibility features built-in and can handle different use cases for different types of colour blindness:

• Greyscale: monochrome display
• Red/ Green: for Protanopia colour blindness
• Green/Red: for Deuteranopia colour blindness
• Blue/Yellow: for Tritanopia colour blindness

I wonder if there's something similar for WIndows or other OS's so that we don't have to invest in building this feature ourselves?