the only way the math works out with fixed transforms is adding enough brightness that you're above the all of the background, ie darkening layers or hdr colors.
ios has been using hdr more recently, and of course uses many backdrop layers that measure the colors behind
Yeah, helpful to get a baseline luminance but ultimately will need a custom shader to set the new color. I'm just surprised that it's 2024 and a consistent contrast blend mode isn't built into every design tool yet.
What eg iOS materials often do is apply a blur, then apply a color matrix with 5th column components for minimum brightness (or some other mechanism to guarantee min/max luminance), then compose the text on top of that (your choice of blend modes here).
If I’m remembering correctly it was pretty simple, the blend mode got the luminance of the background and then gave us a contrasting light or dark output - the result was a readable text colour for any random background colour.
Gotcha. I've done something similar before. Was looking for something where the overlaying color is more dynamic to ensure a consistent degree of contrast.
That's exactly what I've been looking for! But I didn't think it was possible to do with a shader (not possible to "get the luminance of the background" because you can't inspect the pixels around you). Is there some way to do it I haven't found?
I think I'm looking for something like this—a combination of plus lighter + plus darker to ensure a consistent luminance distance—and when that distance hits a limit, flips direction.
Only concern here is that if you do this pixel by pixel, you will occasionally hit the seem and have text that is part lighter and part darker than the background, which definitely isn’t good for readability
The way I solved it was to draw an overlay of a very contrasty color (yellow or blue), then use DIFFERENCE blend mode so the text was the opposite blue or yellow
Comments
ios has been using hdr more recently, and of course uses many backdrop layers that measure the colors behind
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors