Ensures the contrast between foreground and background colors meets wacg 2 AA minimum contrast ratio thresholds.[Bug]:

msftedad commented 3 months ago

Describe the bug

Ensures the contrast between foreground and background colors meets wacg 2 AA minimum contrast ratio thresholds.

Reproduction link

https://storybook.js.org/docs

Reproduction steps

open the URL "Storybook".
Navigate to the "docs" link and invoke it.
Run accessibility insights for web and observe the color contrast issue.

Expected Result: Ensures the contrast between foreground and background colors meets wacg 2 AA minimum contrast ratio thresholds.

Actual Result: The color contrast ratio between foreground and background colors meets wcag 2 AA minimum contrast ratio thresholds. The minimum color contrast ratio for the text is 4.5:1

stor book CCA

System

OS: Windows 11
OS version: 23H2 ((OS Build 22631.3737)
Edge Version: Version 126.0.2592.87 (Official build) (64-bit)

Additional context

No response

greptile-apps[bot] commented 3 months ago

To address the color contrast issue, update the color values in the theming configuration to ensure they meet the WCAG 2 AA minimum contrast ratio thresholds. Specifically, modify the convert(themes.light).color values in A11yContext.tsx to use colors with sufficient contrast. Example:

const colorsByType = [
  '#D32F2F', // Updated VIOLATION color
  '#388E3C', // Updated PASS color
  '#FBC02D', // Updated INCOMPLETION color
];

Ensure these colors have a contrast ratio of at least 4.5:1 against their backgrounds.

References

/code/addons/a11y/src/components/A11yContext.tsx /code/addons/a11y/src/components/A11yContext.test.tsx /code/addons/a11y/src/components/A11YPanel.tsx /code/addons/a11y/src/components/Report/HighlightToggle.tsx /code/addons/a11y/src/components/Report/HighlightToggle.test.tsx /code/addons/a11y /code/addons/a11y/src/components

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

jonniebigodes commented 3 months ago

@msftedad, thanks for taking the time to put together this issue and letting us know about it. We appreciate it 🙏 ! We're still doing some maintenance work on the documentation website, and I'll follow up with the rest of the maintainers so that they are aware of this and get a fix out soon. Sounds good to you?

Hope you have a fantastic weekend.

Stay safe

storybookjs / storybook