Contrast checker doesn't appear to be functioning as expected

[alexmahan]

Hi there,

Working on my first Nuxt project and enjoying it so far. I installed the Vue-Axe plugin to get some automated a11y checking, but the contrast check doesn't appear to be working for me. I used some black text on a black background, and I'd expect something like the following (which works fine on the demo page):

Missing alt descriptions on images DO throw a warning in the console, so the plugin is working, it just seems to be missing these contrast errors. This is a server-rendered app, but the plugin is setup in the config before the generate method, so I'd expect it to work.

The Chrome Wave plugin does find the contrast errors:

Using version 1.0.7 of vue-axe and 2.4.0 of Nuxt.

Any suggestions appreciated!

[ktquez]

Hi, how are you? I'm sorry for the delay in answering.

Try to enable contrast color through config, this link can help:
https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure

Thank you for using.

[alexmahan]

@ktquez Thanks for the reply. Adding the contrast to the config doesn't seem to help, unfortunately. Shouldn't that rule be enabled by default, anyway?

Here's the contents of my axe.js Nuxt plugin:

if (process.env.NODE_ENV !== 'production') {
  const VueAxe = require('vue-axe')
  Vue.use(VueAxe, {
    clearConsoleOnUpdate: false,
    config: {
      rules: [{ id: 'color-contrast', enabled: true }],
    },
  })
}

[ktquez]

In the next version I will put as standard several necessary rules, including the one that you got the solution.

Thank you for using @alexmahan, we also accept contributions.

[alexmahan]

Hi @ktquez, this isn't actually the solution. It doesn't work with or without the rule. It never tests for contrast.

[ingvoo]

I already mentioned this over here #1 (sorry @ktquez that I did not get back to you). I was (and still am) having the same same issue like @alexmahan with the color contrast rule.

Today I tested in multiple browsers, tested dev and prod. Then I cloned this repo and started the demo locally but without getting color contrast to work as on the demo here https://vue-axe.surge.sh/

I have a fresh setup using:

• vue 2.6.10
• vue-axe 1.0.7

If anyone is interested here is the my branch
https://github.com/liip-amboss/forge/tree/feature/accessibilty-tools
ℹ️Worth mentioning that I use yarn but I do not think that causes the issue

Just thought of sharing my process here. Hope that someone has an idea what might resolve this. I will do some more research and tests again soon.

[ktquez]

Version v2 is out.

We added the delay and also a way to execute it manually.

You check out the demo, I inserted more color contrast errors and it seems to be working ok.

[ktquez]

If the case is resolved, feel free to close the issue.