Vivid Cyan Blue Button Block: Fails Accessible Color Contrast

[0aveRyan]

Button Blocks with #FFF text and #0693E3 background color (.has-vivid-cyan-blue-background-color) display at 16px in 400 weight, which fails WCAG AA and AAA.

[ryelle]

hm, this is a content issue, the button is using the core color vivid-cyan-blue on the current site too. I'm tempted to say we should fix the content (update the button color in the editor), but I don't know if there are other places this color is used against white.

I'd like to hear some other thoughts about how we could fix this (because it is a contrast problem).

(labelled question but I really mean "discussion" 🙂 )

[0aveRyan]

Sorry I was going quick at the end of my day, really should be prefixing these with "the site looks gorgeous, apologies to nitpick" 😇

Everything else I've checked (not comprehensive) passed WCAG AA, this was the only thing that didn't so I just wanted to flag it. I'm not familiar enough with the codebase to know where else it's used.

[dd32]

Here are the posts that contain the has-vivid-cyan-blue-background-color class (also the only class in use I could find using 'vivid-cyan' in it's name)

• https://wordpress.org/news/2019/11/2019-annual-survey/
• https://wordpress.org/news/2020/10/take-the-2020-wordpress-annual-survey-and-view-the-2019-results/ (One of the buttons here has a weird outline, because it's set to an Outline button rather than a Fill button)
• https://wordpress.org/news/2020/02/pop-up-livestream-on-february-22/

I'm inclined to agree that this is a Content issue.
Making these buttons bold however will also resolve the issue it seems.
I'm not sure simply updating the content will prevent this in future though..

[tellyworth]

#359 makes them bold in css, which should fix it going forward I think.

[dd32]

Is there a plugin available for WordPress/Gutenberg which can flag elements that have low-contrast? That might resolve content issues going forward, and might be able to lean on editors to ensure the elements are accessible?

[ryelle]

Is there a plugin available for WordPress/Gutenberg which can flag elements that have low-contrast?

That should be a core functionality, but it looks like it's not working on Buttons — made an issue about it here: WordPress/gutenberg#39226

I don't think we should be forcing buttons bold, I would rather see the existing content updated and let the editors manage this in the future.