Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the Contrast Accessibility Warning #34968

Open
MadtownLems opened this issue Sep 20, 2021 · 3 comments
Open

Improve the Contrast Accessibility Warning #34968

MadtownLems opened this issue Sep 20, 2021 · 3 comments

Comments

@MadtownLems
Copy link

@MadtownLems MadtownLems commented Sep 20, 2021

What problem does this address?

The Block Editor provides a great warning when background/text colors lack sufficient contrast to be easily readable, but could perhaps be improved to specifically call it out as an "Accessibility"-related issue. We have been educating and pressing our content providers hard to improve the accessibility of their content, and I think that using that word here specifically would help people understand the gravity of the situation and make them take it more seriously.

Image Description:
Image of the WordPress contrast warning - This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.

What is your proposed solution?

Specifically cite that this is an "Accessibility" concern in the notification.
The current text of the warning is: "This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color."

There are lots of options for a solution. I'll outline a couple, but this ticket is being created at the request of the #accessibility chat where they wanted additional feedback or suggestions.

a) Add some text to the end, such as: "..... or a darker text color to make the content more accessible."
b) Add a helpful link below the paragraph, worded something like: "Learn More About Contrast Accessibility" that links to a trusted resource
c) Add a small heading before the warning, saying something like: "Accessibility Warning" or - to be less scary - something more like "This content could be more accessible."

@annezazu
Copy link
Contributor

@annezazu annezazu commented Sep 20, 2021

Thanks so much for opening this up! This seems like a great improvement. What would you like to see for a trusted resource? I think it would be great to link to one.

@MadtownLems
Copy link
Author

@MadtownLems MadtownLems commented Sep 20, 2021

What would you like to see for a trusted resource?

I'm not an expert, but this looks good to me
https://webaim.org/articles/contrast/

@javierarce
Copy link
Contributor

@javierarce javierarce commented Sep 21, 2021

Here are some ideas for the design of the messages. Besides adding a link and using the words "accessible" or "accessibility", I improved the message so it's easier to read and more actionable:

This color combination may be hard to read. Make it more accessible by using:

- A darker text color.

- A brighter background color. 

In the first row I show:

  1. A message with a link integrated into the text (so the message is not very long, but also points to more information)
  2. Same but with an indication of the "problematic" color combination.
  3. An idea to show more specific information (because of that, maybe this kind of info should be behind a setting)

The second row contains the same information, but the link appears at the bottom. I personally prefer the options of the first row, because the link is integrated and the box is not very tall.

The image shows six designs for the color notification. The description for each of them appears in the body of the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants