[Tags] `var(--tag-color)` should depend on `var(--tag-bg)` rather than `var(--body-bg)`

[Ornanovitch]

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;
}

[SychO9]

PRs are welcome :)

[ekumanov]

Apparently this went into 1.7.0 and now my forum looks pretty bad because the tags are too prominent compared to the rest of the forum. I hope you will make this optional in future because it solves a problem with a rare edge-case (who makes tag colors that are almost white?) while deteriorating the nice visual design for everybody else.

[davwheat]

This was an accessibility concern, and hence we have no plans to revert it or make it optional.

You can override this with custom CSS if you desire but I wouldn't recommend it.

[ekumanov]

It wasn't an accessibility issue unless one chose tag colors that are extreme. BTW, Discuss doesn't seem to have the new dev since tags have white colored text and I use the same tag colors as Discuss (I picked them with the eyedrop tool when I created my forum because I liked how they looked). How is that possible, did Discuss apply a CSS?

[Ornanovitch]

edit: I see the discussion is also on discuss, so I remove my answer.