codeforboston / codeforboston/maple

Fix Color Contrast for Accessibility

Open
#1,576 0 comments 0 reactions 0 assignees View on GitHub
enhancement frontend needs scope UI
Dominant language
TypeScript
Stars
56
Forks
175
Avg merge
2d 5h
Merged PRs (30d)
13

Description

# Problem

Setting appropriate color contrasts in our designs is essential for vision-impaired users to successfully navigate our site. There are some areas of MAPLE that do not handle color contrast to industry standards. We should adjust the color palettes of these parts of the site so that they contrast enough to be readable for all users.

TBD - Konstantin, where do we need to adjust this specifically on the existing site (future changes can be handled on the design side)?

# Success Criteria

- [ ] All site pages pass a color contrast audit (details TBD - we can do this manually for the first pass)
- [ ] Enable color contrast auditing on future builds (This is possible through Storybook and Playwright addons - Playwright may be more accessible because we're not as consistent as we should be with Storybook)

# Related Links
* Storybook Accessibility Addon Docs: https://storybook.js.org/addons/@storybook/addon-a11y
* Playwright Accessibility Addon Docs: https://playwright.dev/docs/accessibility-testing

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.