[BBT-105] Display notification when related background and foreground colours fail accessible colour contrast ratios

thatisrich commented 2 months ago

Description

BBT-105 - This PR adds a contrast checker to text and background colour pickers. When the selected colours do not have a sufficient contrast ratio, which may cause accessibility issues, a notification is displayed to inform the user.

The ContrastChecker component has been positioned inbetween the item title and palette selectors so it does not interfere with the grid layout of those components (when placed inside the columns container, the layout would shift pushing the columns out of place which could be confusing). I did experiment with including the ContrastChecker output at both the top and bottom of the container however it felt excessive and could also be confusing.

NOTE - This change only considers the text and background colours, it does not take into consideration any selected gradient colours at this time.

Change Log

src/editor/components/StylesColor.js - Imported, and used, the ContrastChecker to compare the text and background colours

Steps to test

Select a block or element that has the text and background colour options, such as Elements > Button
Select a text colour from the available palette
Select a contrasting colour for the background from the palette
Notice not warning is displayed
Select the same colour for the background that is assigned to text
Notice a contrast warning is now displayed

Screenshots/Videos

Demo showing the colour contrast notification when selecting colours

Checklist:

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[ ] I have commented my code, particularly in hard-to-understand areas
[ ] I have made corresponding changes to the documentation
[x] My changes generate no new warnings
[ ] Any dependent changes have been merged and published in downstream modules

jonnywatersbb commented 2 months ago

Hey @thatisrich, thanks for working on this - I think it's a really great addition.

Just having a quick peak and I noticed the position of the notice is causing some issues when using the colour picker, I assume because it's constantly checking if the colour is/isn't meeting the required ratio:

http://bigbite.im/v/XlO27T

That might only be solved by moving it completely away from the selector UI?

I wonder as well (maybe as a new issue) if it's a good idea to show the exact contrast ratio? Similar to something like this in Figma:

It might be hard to understand as a user what the plugin is testing against unless it's shown explicitly (AA or AAA).

thatisrich commented 2 months ago

Ah! That's a really good spot @jonnywatersbb, I've moved the PR back to draft while I work on the fix.

Regarding the display of the pass level, the ContrastChecker is a WordPress component and is fairly self contained. The readme for the component says:

ContrastChecker component determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color.

We could pivot from the WordPress component and roll our own solution for this, which would give us more control over the output, if you would prefer the Figma approach?

jonnywatersbb commented 2 months ago

ah ok! I think for simplicity we should roll with that initially, but perhaps in the notification state that the colour contrast should meet at minimum 4.5:1 to meet WCAG 2.0 AA?

We could always expand on the contrast tools in future as separate issue

thatisrich commented 2 months ago

I'll certainly take a look into the feasibility of customising the ContrastChecker message, as the content is defined within the component itself and not available as a prop.

thatisrich commented 2 months ago

A change has been made to the ContrastChecker display approach, now the colours are passed in only when the mouse buttons are not pressed down.

This allows the user to select a custom colour within a colour picker and avoids a scenario in which the colour picker could visually jump up / down when the contrast notification display was toggled.

A demo selecting a custom colour can be seen here

NOTE - When using the keyboard to select a colour in the colour picker, the jumping issue is not present in the same way and therefore has not been affected by this change.

thatisrich commented 2 months ago

I've tried to find a way to edit the message in the ContrastChecker, @jonnywatersbb, but I'm struggling to find a solution that retains the simplicity of the existing components.

The closest approach I have at the moment would be to include the additional content as a supporting component and wrap that, and the ContrastChecker, in a conditional which determines if the ContrastChecker is actually visible or not.

I'll have another think but I wonder if tackling the more in depth information in a custom tool / component would be beneficial to cover this off?

thatisrich commented 2 months ago

Just to give an idea of what a custom component could look like for this, I've recorded a quick demo here.

This approach could display a pass / fail for AA and AAA compliance, a tailored message to that compliance, and the contrast ratio. Would this be a preferred approach over the WordPress core component or should we stick with core (and the reduced user feedback message) for this PR?

bigbite / themer