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

[ghost]

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]

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]

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

[ilharp]

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]

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]

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

[nknapp]

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]

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