Display notification when related background and foreground colours fail accessible colour contrast ratios

[thatisrich]

What problem does this address?

It is currently possible to assign elements colours that would fail accessibility colour contrast ratios when used within the theme. For example, it is possible to assign the same colour to both the background and text colour for a button hover, which would result in the text being completely unreadable.

Including a notification alongside block / element instances where a background and foreground colour are present, and the colour contrast on the selected colours is below colour contrast ratios, would alert the user to this issue and allow them to make changes where possible.

A potentially helpful web based resource to check colour contrast ratios can be found at colourcontrast.cc.

What is your proposed solution?

One approach to this would be to use the WordPress ContrastChecker block, which accepts font size, background colour, and text colour as props and will be displayed if the contrast between the two colours does not meet the correct standard. Further information on this block can be found within the WordPress gutenberg repo.