search

handlebars-lang / docs

Documentation for handlebars.js and the handlebars-language
https://handlebarsjs.com
MIT License
37 stars 47 forks source link

.footer/.page-nav color contrast fails WCAG AA #51

Open ghost opened 4 years ago

ghost commented 4 years ago

I am not colorblind; I am having trouble reading text on .footer and .page-nav. When using WebAIM Contrast Checker, the color combination for text and background fails tests for WCAG AAA and WCAG AA. The contrast should at least pass WCAG AA for better readability.

nknapp commented 4 years ago

Hi and thanks for pointing this out. I hadn't known this tool, but I shall give it a try in the future. In this case, I have to admit, I just copied the colors from the original Handlebars site and tried my best to make it look alike.

At the moment, I don't have much time to take care of this, but if you like to play around with different colors, please don't hesitate to submit a PR: The changes need to be made in this directory.

nknapp commented 4 years ago

Is there any tool that can be included into the CI/CD-build to check such problems automatically?

ilharp commented 4 years ago

There are several tools that can help check the website's "Accessibility" (a11y) such as stylelint-a11y, a plugin of StyleLint. But I think this does not meet the actual needs.

At present, the tool I found to meet the needs is Web Accessibility Evaluation Tool (WAVE), which provides an online inspection page (here is an example for Handlebars Docs) and browser plugins, but it does not provide a free API.

There may be other free tools to solve this problem... but I haven't found one yet.

papasmile commented 4 years ago

There are handy tools like https://github.com/nickcolley/jest-axe when we have fully rendered components; but since we are using a site generator I think we'd have to run a full browser-test suite (eg Selenium) to get decent tooling. That's a significant undertaking even for a small-ish site... perhaps just fix offensive CSS manually for now?

nknapp commented 4 years ago

would be cool though to have such a tool for vuepress. It could also be used by other sites...

nknapp commented 4 years ago

but I agree, at the moment, it should just be fixed in the CSS. I just always ask myself this question: Could we use tools to prevent this in the future.

jaylinski commented 2 years ago

I'd use https://github.com/GoogleChrome/lighthouse-ci for this. It has accessibility checks.