FreeTubeApp / FreeTubeApp/FreeTube
[Feature Request]: Automated color contrast accessibility testing
- Dominant language
- Vue
- Stars
- 21.9k
- Forks
- 1.5k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 62
Description
### Guidelines
- [x] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the feature request I want to file, without success.
- [x] I have searched the [documentation](https://docs.freetubeapp.io/) for information that matches the description of the feature request I want to file, without success.
- [x] This issue contains only one feature request.
### Problem Description
The addition of new themes can introduce many different types of accessibility issues with regards to the color contrast. This can be time-intensive for contributors to manually test and identify.
### Proposed Solution
Implement automated digital accessibility testing for themes. This means:
- For base themes with related primary & secondary theme colors (e.g., Dracula & Dracula Cyan), [require that there is a 3+:1 color contrast](https://www.w3.org/TR/WCAG20-TECHS/G183.html) between them.
- Ensure that each base theme's text colors [have a 4.5+:1 (WCAG AA) or 7+:1 (WCAG AAA) color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) with both the `card-bg-color`, `bg-color`, and `secondary-card-bg-color`.
- Require that each primary & secondary theme's text-with color [has a 4.5+:1 (WCAG AA) or 7+:1 (WCAG AAA) color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) with them.
- (arguable / post-MVP because it is not followed by many of our themes currently) [Require that there is a 3+:1 color contrast](https://www.w3.org/TR/WCAG20-TECHS/G183.html) with each base theme's `search-bar-color` and `secondary-card-bg-color` against the `card-bg-color`.
Automated enforcement of this as a part of our build process can be done as part of the same effort or split into a separate PR if deemed appropriate.
### Alternatives Considered
Don't implement this feature.
### Issue Labels
new feature
### Additional Information
I suggest that this be done before merging any future theme PRs. Otherwise, any new theme PRs need to have exhaustive link & screenshot evidence of manual accessibility testing for all relevant color combinations before being considered ready to review.
Contributor guide
Research direction
Start by locating the theme definitions and the build process, then determine where automated contrast checks would fit. Compare the listed theme color combinations against the linked WCAG contrast requirements; done means the checks enforce the stated thresholds and future theme additions are covered.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, frontend, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100