Separate light mode and dark mode colors for roles

(#1363) Feature Under consideration accessibility community

Problem

Currently, a role's color appears the same regardless of whether it's set against a dark or light (or whatever other) background. Trying to optimize for contrast when choosing role colors is a matter of balancing opposing goals, and it seems the best compromise achievable is a contrast ratio of around 3.4 against both the dark and light backgrounds, which is below the WCAG 2.2 minimum value of 4.5 for small text. (source: my experiments with the Role Preview for Discord tool – the default background colors for Fluxer are slightly different, but comparable)

Proposal

I'd like to be able to specify two colors per role: one that appears to users in (one of the) dark mode(s), and one for light mode. Allowing a role to have one color displayed for dark mode backgrounds and another for light mode backgrounds would allow accessible role colors for everyone without the need for compromise colors that don't have a good contrast ratio against either. For people using custom CSS, there could be a toggle letting them choose if they want their theme paired with “dark mode roles” or “light mode roles”. The change can be made progressive by declaring one mode (say, dark) to be the “default” with regards to role colors, and assigning roles' current colors to that mode, allowing community owners to optionally specify an alternative color for the other mode.

Notes

Some color roles I attempted to optimize for legibility against both dark and light backgrounds, and various forms of colorblindness.

3 comments

Sign in with Fluxer to comment and vote.
Comment by @mi2ebi
RexSystem 1 vote originally by @mi2ebi on GitHub
good idea !
For people using custom CSS, there could be a toggle letting them choose if they want their theme paired with “dark mode roles” or “light mode roles”.
this could maybe be done automatically by finding e.g. the OKLCH lightness of the background
Comment by @C-Ezra-M
RexSystem 1 vote originally by @C-Ezra-M on GitHub 1 reply
I like this idea, but it would be pretty complex to implement, due to the fact Fluxer's official web client is very customizable.
Comment by @mi2ebi
RexSystem 1 vote originally by @mi2ebi on GitHub
see the "For people using custom CSS..."