Skip to content

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

Open
@thatisrich

Description

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

Screenshot 2024-09-19 at 09 49 10

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.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions