Storybook: UI: some elements have too low color contrast

[Hypnosphi]

See https://dequeuniversity.com/rules/axe/3.4/color-contrast?application=axeAPI

Links

Primary

Element has insufficient color contrast of 2.62 (foreground color: #1ea7fd, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Suggestion: change primary link color to #027ac5

Secondary

Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Same for subheadings

Suggestion: change secondary link and subheadings color to #6f6f6f. Change subheadings font-weight to 700 for compensation

Selected sidebar item

Element has insufficient color contrast of 2.62 (foreground color: #ffffff, background color: #1ea7fd, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion 1: change background to #027ac5

Suggestion 2: change test color to #333333, change background to #81cefe

JSX highlighting

Element has insufficient color contrast of 3.63 (foreground color: #2b91af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Element has insufficient color contrast of 3.99 (foreground color: #ff0000, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Suggestion: change tag highlight color to #26809c, change attribute highlight color to #eb0000

Button

Primary

Element has insufficient color contrast of 3.23 (foreground color: #ffffff, background color: #ff4785, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion 1: change background to #eb004e

Suggestion2: change color to #333333, change background to #ff80aa

Secondary

See Selected sidebar item

Outline primary

Element has insufficient color contrast of 3.23 (foreground color: #ff4785, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion: change text color to #eb004e

Outline secondary

See Link / Secondatry

Bagde

Element has insufficient color contrast of 2.14 (foreground color: #66bf3c, background color: #e1ffd4, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1
Element has insufficient color contrast of 2.72 (foreground color: #ff4400, background color: #feded2, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1

Suggestion: change text colors to #427c27 and #bd3200

[domyen]

Thanks for the a11y audit! Would like to update the color palette to something that's perceptually similar to the current palette but with greater accessibility.

I'm researching Colorbox.io from Lyft and Stripe's recent color system article to inform this.

Edit: made a new issue for the SB design system to do this experimentation in a spike before integrating it in the main Storybook UI.

[roblevintennis]

Thanks for the great tool Storybook team! @domyen I'm glad to see you were making some progress on this. However, that's almost a year back and I'm wondering why it hasn't been fixed yet? Hoping we can prioritize that if possible :)

---

So, I was about to file my own ticket but I'm glad this one is open. I think any tool that helps with component driven development ought to be an example of best practices itself—especially for a11y.

But, there's a specific dev ux motivation to this as well, and it's for this use case…

As a developer, I'd like to be able to use tools like Lighthouse to verify my components, without requiring me to use Storybook's addons. Storybook should not compound the already confusing a11y dev experience by adding it's own errors.

Repro:
Run a simple component through Lighthouse to get the page results for contrast.

Expected:
I should see no Backgorund and foreground colors do not have a sufficient contrast ratio errors for anything else but said component

Result:
I see 5 Storybook related errors.

Having audited my own site recently, I can tell you these would be quite easy fixes involving dragging a slider slightly darker until it meets required ratio.

Thanks again for the tool. We love it. Just would love if you make fixing contrast within Storybook's own chrome a priority 👍 -- thanks!

[Hypnosphi]

@roblevintennis you probably want to audit your own components only. To do that, you can open preview frame in a new tab using "open in new tab" icon in top right corner

[roblevintennis]

Thanks @Hypnosphi -- I'll definitely keep that in mind 👍