Accessibility: Contrast Issues and other errors

[jrchamp]

Thank you for this great theme! A lot of people are using this downstream because it makes presenting high quality information easy.

There are a dozen or so issues mostly related to contrast that would be great to have fixed here in the upstream.

https://wave.webaim.org/report#/https://learn.netlify.app/en/

If you have any questions, please let me know.

[jrchamp]

Specific examples:

• No form label for menu language selector.
• Empty form label for search box (no text content).
• No link text for "built with ❤️" link.
• Text is hard to read. Contrast would help quite a bit, especially for links.

[JianLoong]

I could probably help out on this but are there any suggestions to handle the contrast issue? It seems the other examples like the form label and etc are the easy fixes in terms of accessibility. The main thing here is that the color for the hyperlink is causing the contrast issue.

I also did a quick run of site on Chrome Lighthouse tool and it did score an 80 mentioning the same issue the WAVE tool mentioned.

"Background and foreground colors do not have a sufficient contrast ratio."

Do you have a fix in mind for the contrast issue?

[jrchamp]

If we just scale the lightness, we get something like #0080A3
I'm not sure that speaks to the pop-of-color visual style, so #0071F3 seems like a better minimum option but fails in the green and blue alert boxes. #0063F3 works there too, but I wonder if it's enough when other alert styles are considered. Having a test page that shows all possible default styles would be helpful here. Either way, #0063F3 is a big improvement in that it fixes all the examples on the Netlify page I linked.

[McShelby]

For notices there's a test page in the repo showing all visual styles at exampleSite/content/shortcodes/notice.en.md or available online at https://learn.netlify.app/en/shortcodes/notice/

[jrchamp]

Thanks @McShelby With that page as guidance, #005AF3 is the highest luminosity color that does not modify the amount of blue and is compatible with the warning notice. Would it also be beneficial to add some more sample content to either the notice documentation or a separate "test" file so that links and other color contrast concerns can be tested directly from that page?

[JianLoong]

Perhaps the right approach here, is to introduce another theme in addition to the existing themes that just aims to handles the contrast issues. So that, users will know that they have the option to use it. That way, more changes can be made to theme as well. So, no contrast changes to the original theme.

Then another issue which is completely separate to the contrast issue would be to address the other accessibility issues. For example, the empty links and empty form labels. In other words, no contrast changes to the original theme but only addressing other accessibility issues.

What do you think of that approach? @jrchamp

[jrchamp]

That approach is not my favorite. Fixing the core/default theme is the best way to encourage an accessible experience.

• Offering two experiences - one that is accessible and one that is not - is very similar to the "separate but equal" approach (bad).
• In most primary-English countries and Europe, following the WCAG guidelines is a legal requirement.
• Most importantly, it's a moral obligation to produce tools that are accessible by default, because we care about people and want to remove unnecessary barriers to entry. ❤️

[JianLoong]

Agreed, fixing the core is indeed the way to go.

Gosh, you now remind me of my old lecturer from ages back who was very adamant about these during XHTML times. Lol.

@matalo33 , What do you think? Perhaps we should aim to fix the accessibility issues for the next release. (Not sure if contrast issue is present the other colour themes). It would certainly take some time to look into them.

[BITS-Editor]

Any updates on fixing the core?