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).

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?

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

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.

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.

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?

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?