[p5.js 2.0 RFC Proposal]: Colour Contrast Checker

[hiddenenigma]

Increasing access

Contrast is a key design principle for making elements distinguishable from one another. If there's low contrast between colors, no one will see the sketch. The proposal is to have a color contrast checker to see if it passes the double AA and triple AAA accessibility standards.

This tool is a good example where the user can input their colors and adjust using sliders until their colors meet the accessibility pass: https://colourcontrast.cc/

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.)
• [ ] Overdue change (Modifications will be made that have been desirable for a long time.)
• [X] 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?

Currently there's no way for users to know if their colors are accessible. Meaning, if there's low contrast with their colors.

What's the solution?

A color contrast checker that checks for different accessibility passes.

Pros (updated based on community comments)

Example list:

• Consistency: This proposal increases API consistency by...
• Readability: This proposal makes the source code more readable by...
• Other advantages...

Cons (updated based on community comments)

Might be difficult to implement when there are multiple colors and it's an animation where colors overlap with each other at different times.

Proposal status

Under review

[limzykenneth]

I wonder if this can be expanded into a wider accessibility checker feature that can form part of the Web Accessibility module of p5.js? Eg. also adding a function that when passed a HTML container element, check everything inside it for adherene to best practices of web accessibilty/WCAG recommendations?