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?