10

Microsoft Teams lets you set a light gray text color that looks like faded text in the dark theme but is invisible in the light theme.
And it lets you set a dark color that looks faded on light and invisible on dark theme.

Thanks. Now I get to argue with my team about it.

Comments
  • 2
    I love symmetry.

    For my editor, I used a hue, chroma & lightness colorspace.

    I use a "dark" color which is 5% lightness, a very dark blue, almost black.

    For the "light" color, I use 95% lightness, a very light but warm orangey white, exactly "opposite" from the dark color.

    For all highlight/accent colors I use 50% lightness and a constant chroma, and space them all out equidistant from each other around the 360 degrees of hues.

    That way, you have a perfect rainbow of colors which all contrast perfectly both with each other and with the background -- regardless of whether you pick a dark or light theme.
  • 0
    @bittersweet sorry to disappoint you but the human perception is not symmetric or balanced. It’s logarithmic.
    For example, 90% text on 95% background is perceived differently than 10% text on 5% background.
    The contrast is different.
  • 1
    @Lensflare If they were talking about HSL, sure, but isn't the Luma/chroma color space designed align with human perception?
  • 1
    @localpost @Lensflare

    Yeah that's why I used HCL.

    The neat thing about HCL is that orange and blue at the same chroma/lightness both turn into the exact same gray if you'd render it as grayscale.

    So the colors are all tuned to be the exact same "intensity" to the (average!) human eye, if you change the hue, it's REALLY only the hue which changes.

    Although I did make a mistake in my previous comment: It's locked at chroma 37 and luminance 85% for my dark theme, and chroma 37 and luminance 45% for my light theme.

    So not perfect symmetry -- At certain ranges within HCL you would get "impossible" colors, at least impossible for humans to perceive.

    But the idea is to always have the RGB components for every chosen font color add up to an equal amount of "intensity" for what the RGB cones in your eyes perceive

    -- with a constant distance from each other in terms of hue, and a constant distance from the background in terms of lightness.
  • 0
    Like this
  • 0
    And this for the font colors for the light theme.

    You see that where the RGB "clips" out of range, it causes distortions in the HCL spectrum.
  • 2
    @localpost @Lensflare

    I was working on a side project once which would let you brute-force calculate extremely exact color themes in CIE LAB / CIEDE2000 color space, but the formulas for detemining "perceptual distance between colors" are... quite complicated.

    Doing things like "find the largest n-sided equilateral polygon which fits horizontally along the lightness axis inside of a 3D colorspace adjusted for human perception" is a pretty difficult challenge.

    I mean try guessing at which lightness level you could fit the largest octagon inside the below shape, and how you would have to rotate it to maximize its size for optimal contrast in your color palette.

    https://en.wikipedia.org/wiki/...
  • 3
    @bittersweet Hmm... probably easier to do that using like a physics simulation that wiggles your n-gon into place than to try and solve it with calculus or something 😅
  • 2
    @bittersweet May be one of those geometric problems math just doesn't have a better answer for than brute forcing it. Like splitting a cubic bezier curve into equal length parts.
Add Comment