[Tags] var(--tag-color) should depend on var(--tag-bg) rather than var(--body-bg) #3633
Description
Current Behavior
When you create a colored tag with an extremely light or dark background, the tag's text color (defined by var(--tag-color)) will be more or less readable depending on your choice regarding the dark/light theme.
Steps to Reproduce
For example, I just created a very light colored tag on Nightly. Here is the same tag appearance with light and dark theme:
| light mode | dark mode |
|---|---|
 |
 |
Expected Behavior
I expect my colored tags to be readable in every condition. This is not literarily a bug, but this is a real a11y issue.
Screenshots
No response
Environment
- Nightly
Output of php flarum info
No response
Possible Solution
I'd like to propose a new snippet (let's call it contrast.ts. I think it's worth placing it directly into the core (framework/core/js/src/common/utils/contrast.ts), because it could be very useful to resolve more contrast issues in the future. I already began to develop a PoC some times ago, but I never finished it because I was writing a thesis. Now that I'm free, I'd like to propose a PR which adds this util, and a second PR which uses it in order to make var(--tag-color) depending directly on var(--tag-bg). Then it could be used as a good example to improve other pieces of the flarum frontend when it comes to contrast issues.
WDYT?
Additional Context
The simple snippet I worked on:
/**
* The `getContrast` utility converts a hex color to rgb, and then calcul a YIQ
* value in order to get the appropriate contrast value (is it dark or is it light?)
* See https://www.w3.org/TR/AERT/#color-contrast for references
*/
export default function getContrast(hexcolor: String) {
const hexnum = hexcolor.replace("#", "");
const r = parseInt(hexnum.substr(0,2),16);
const g = parseInt(hexnum.substr(2,2),16);
const b = parseInt(hexnum.substr(4,2),16);
const contrast = ((r*299)+(g*587)+(b*114))/1000;
return contrast;
}