Axe-storybook misidentifying background color

[tstewart15]

I'm seeing many examples of color-contrast issues where the "background color" reported is incorrect.

In my case, I'm continually seeing links and buttons fail due to insufficient color contrast, and background color: #0073b1. For example:

html: <a class="tab-link" aria-current="true" href="#?trk=test" data-tracking-control-name="test" data-tracking-will-navigate="">
                   
                      First Tab
                  </a>
            summary: Fix any of the following:
                       Element has insufficient color contrast of 1.11 (foreground color: #057642, background color: #0073b1, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

The actual background color in Storybook though is white. Here's the example above, depicted in Storybook:

The Storybook "Accessibility" tab correctly doesn't report any color-contrast issues here. Any idea what could be causing this issue?

[ahuth]

Thanks for raising this issue!

Looks like this example is the first tab (which is green), and Axe thinks there's a light-ish blue background color. Is this happening for only tabs, or is it also affecting other kinds of buttons/links?

Normally when I see something like this, it's one of

• Something with some opacity < 1 is initially covering up the element in question (and may be fading out or being removed from the DOM)
• There's some sort of background color being applied that's transitioning out

Are any of these possibilities? Could run axe-storybook in non-headless mode, with the --headless false CLI option. The --pattern TabsAsLinks option may be useful to zero in on just the stories in question.

[tstewart15]

OK! Sorry for the delayed response; unfortunately, my bandwidth to work on this Storybook a11y project has diminished recently, so we'll see if I can drive this to completion.

Anyways, based on your suggestion that there might be some obscuring or overlapping between test runs that's causing this color-contrast to be reported, I was able fix my issue by applying some targeted background-color: white CSS to the test root element in preview-head.html:

<style>
  div#root {
    background-color: white;
  }
</style>

This appears to remove all the false-positive color-contrast issues! Still unsure why this fix is necessary though; I would've hoped that Storybook/Playwright would be able to isolate test runs from each other (assuming that's even the issue).

[ahuth]

No worries, @tstewart15! I wonder if you're running into storybookjs/storybook#13612.

When axe-storybook-testing transitions from one story to the next, any transitions of background color coming from either the story or from storybook itself will still happen. This can interfere with the color contrast checks.

In the apps I work on we work around storybook's background transition with

@media (prefers-reduced-motion) {
  .sb-show-main {
    transition: none !important; /* !important needed to counter inline style */
  }
}

which works because axe-storybook-testing forces prefers-reduced-motion to on.

I actually forgot all about this until your comment reminded me. Will update the README to document this.

[ahuth]

If this is the issue you're facing, it also looks like from storybookjs/storybook#13711 that Storybook itself will resolve this in v6.4.