[Feature Request]: Mark & sort color themes by color contrast with base theme

[kommunarr]

Guidelines

• [X] I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• [X] I have searched the documentation 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

Currently, many main & secondary color themes have insufficient color contrast with some base themes. This is an accessibility issue that can extremely worsen the user experience for colorblind users and even non-colorblind users alike.

Caption: The screenshot above shows the settings page of FreeTube with a base theme of Light and primary & secondary theme colors of Catppuccin Mocha Pink. The color contrast between the Catppuccin Mocha Pink - colored label text and the white card background is 1.52:1, far below the 7:1 required for small text as per the Level AAA success criterion of the WCAG 2.

Sources: https://webaim.org/articles/contrast/ https://uxdesign.cc/colour-contrast-in-ux-design-477011020095

Proposed Solution

On loading the Settings section, sort the theme colors by their contrast with the main theme and visually mark which ones have insufficient color contrast, OR vice versa (e.g., place a checkmark by ones with sufficient color contrast and have a label explaining what that means). This allows users to more easily identify which color themes would be a good choice for the given base theme.

Option A (Preferred):

• On changing the theme, override all inaccessible* primary and secondary theme colors with a default value and display them with a strikethrough (e.g., Catppuccin Mocha Pink) and lower opacity in the corresponding ft-select box(es) on the Theme Settings tab.
  • Add a message above each ft-select box wherein the current value is being overridden with a default that this is what is occurring and why.
  • Retain the user's actual primary & secondary selections (& "re-enable" them) if a new theme is switched to at any point in time. In other words, don't implement this such that the user's selections are overwritten with the default values, but just overwrite their styling internally.
  • (Strongly recommended) Sort the ft-select primary and secondary theme color boxes such that inaccessible struck-through colors are all at the bottom or top of the list (bottom seems preferable by my estimation).

Option B:

• On changing the theme, filter out all inaccessible* primary and secondary colors.
• Set a default color for the primary and/or secondary theme colors if the current color is invalidated (e.g., the first non-filtered color in the list).
• (Optional) If the user's primary and/or secondary theme colors were invalidated, and they switch to a theme wherein those colors would be valid again within x seconds/minutes (e.g., 10 seconds), restore their original value(s). This revert-back effect can be solely local to the Settings page (i.e., contingent on the Settings staying open that whole period); doesn't need to be retained in longer-term storage.

*Inaccessible in the context means "color contrast between that theme's card-bg-color and the foreground color fails the Level AA criterion of the WCAG 2 (i.e., 4.5:1 minimum color contrast ratio)." Note that this can and should be detected programmatically based off of the two colors' lumninances! You can use this library and access the card-bg-colors in one of the manners outlined here.

Alternatives Considered

• We could try to make every color accessible for all themes, but that will simply not work with the sheer variation in luminance that our theme card-bg-colors can exhibit.
• We could try to modify the inaccessible colors to "be" accessible by modifying their properties or choosing the "most similar" accessible color available, but that can be incredibly tricky to implement & can still be pretty suboptimal even when it does work.

Issue Labels

visual improvement

Additional Information

The About Page has different background colors for text, but it is the only major exception.

[efb4f5ff-1298-471a-8973-3d47447115dc]

• I think our our standard colors should at least be compatible with our own themes. If not maybe the colors should be adjusted or even removed.
• Theme specific colors should at least be compatible with the associated theme. If not colors should be adjusted or maybe even removed.