FreeTubeApp / FreeTubeApp/FreeTube

[Feature Request]: Automated color contrast accessibility testing

Open
#6,661 0 comments 1 reaction 0 assignees View on GitHub
B: accessibility E: new feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.