Add contrast() function to check contrast ratio for two colors

[FerrinThreatt]

Resolves #6971

Changes:

Added a new contrast function that checks the color contrast ratio for two colors
This function allows users to see if their colors align with WCAG21 accessibility standards. There are supplementary double AA and triple AAA constants for provided as well.

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

[davepagurek]

Thanks for making this change! For my own understanding / for possible future documentation, do you know how this handles colors with alpha?

[davepagurek]

cool, TIL colorjs has this built in!

[davepagurek]

On the p5.js reference, this will require users to open the console to see the result. Do you think we could show the result on the screen with something like text()?

[davepagurek]

Do you know if passes is using AA or AAA or something else?

[ksen0]

Hi @davepagurek, I'll be taking this on one on from now, since @FerrinThreatt will be focusing on sound!

For my own understanding / for possible future documentation, do you know how this handles colors with alpha?

We've talked about adding unit tests for this too, so I think it should include examples with alpha, and explain in the description what the behavior is. I am not sure what the colorjs behavior is, but I would expect p5.js behavior to be undefined because it is not possible to judge color contrast in isolation.

Do you know if passes is using AA or AAA or something else?

Something that ended up being out of scope for this PR but which we discussed would be functionality and usage as follows:

• export the color.contrast(other_color) function, which returns a floating point number rather than obbject, matching the colorjs pattern but requiring no parameters; and also export two constants, eg, WCAG_AAA_CONTRAST_MINIMUM and WCAG_AA_CONTRAST_MINIMUM
• Recommended usage for accessibility would be something like if (color.contrast(other_color) >= WCAG_AAA_CONTRAST_MINIMUM). This could both help the user learn about accessibility - and shows rather than hides the AA/AAA framework - and does not require memorizing threshold values

On the p5.js reference, this will require users to open the console to see the result. Do you think we could show the result on the screen with something like text()?

Great idea, agree! Also, in this or another example the background and text could have randomly-selected colors, but that pass AAA - to demonstrate how this could be used inside generative art logic, rather than only as a debug check

What do you think?

[davepagurek]

• Recommended usage for accessibility would be something like if (color.contrast(other_color) >= WCAG_AAA_CONTRAST_MINIMUM). This could both help the user learn about accessibility - and shows rather than hides the AA/AAA framework - and does not require memorizing threshold values

This sounds good to me! We can mention the existence of those constants in the docs and link out to further reading if people want too.

Also, in this or another example the background and text could have randomly-selected colors, but that pass AAA - to demonstrate how this could be used inside generative art logic, rather than only as a debug check

That's a great idea!

[GregStanton]

Hi all! Just glanced through this. Looks like a really nice feature! I have a few quick thoughts and questions; sorry if these were already discussed.

Contrast logic

Also, in this or another example the background and text could have randomly-selected colors, but that pass AAA - to demonstrate how this could be used inside generative art logic, rather than only as a debug check

Yeah, exactly! It seems like the most important reason to have this feature is to check the contrast of dynamically generated colors (based on interactive user input, randomness, etc.). Otherwise, user-friendly external tools could potentially be used, such as the one linked to in #6971.

Instance vs. static vs. standalone

Has there been a consideration of the following options?

1. Instance method only
2. Static method only
3. Instance and static method
4. Standalone function

I have some ideas about this, which I can share later when I have a little more time.

Overloads

Have we thought about this? One option is to allow colors to be specified in any of the usual ways in an instance method, and to have a static method only operate on instances of p5.Color. Also, have we thought about different color spaces?