I've been thinking about color, and I don't know a...
# thinking-together
k
I've been thinking about color, and I don't know anything about it. I'd really like my hypertext browser to allow people to adjust color, but without ever compromising contrast. Is there some color space/model like rgb/hsl/CIELAB/Lch that allows you to adjust an author foreground color relative to an author background color, yielding new reader foreground and background colors that maintain the original level of contrast? Ideally I want a single spectrum/dimension/knob that I can adjust to change the hues of one element (say the background color), automatically adjusting the colors of other elements around it. For example, say the background color is white. I reflect it to get a text color of black. Then I get 3 other foreground colors that are rotated by 120 degrees along the color wheel. Now I could adjust the hue to rotate around the color wheel. Or I could reflect to get dark mode. But is there a way that supports both without going all the way to a 2D color space? For example, if you set the background color to medium grey now no foreground color can give you the desired level of contrast. So I'd like to not even represent such a background color as an option.
s
I don't know if this is exactly what you're looking for, but it reminded me of this demo of the color contrast tool in Figma I just saw: https://x.com/billy_sweeney/status/1905640393045409923
m
I really like the brightness as defined by HSLuv https://www.hsluv.org/. The transform betweeen RGB is not super straightforward but there is a lot of sample code and it produces really nice feeling colors.
Also it kind of depends if you're designing for color-blind people. Assuming the most pessimistic accessibility scenario (total color blindness), the only factor in foreground / background contrast is the difference in brightness but for folks that see color the whole UI could have the same effective brightness and still be legible (maybe even could still look nice).
(see Ishihara tests)
k
Yeah, I don't really know what I'm doing regarding color blindness, mostly I just try to avoid red on green, or using red and green foregrounds on the same background. I'm not intending this for extremely colorful things like you make, @Marek Rogalski or something professional quality that designers will make @Scott. I'm imagining there's mostly a single background, a single body color, couple of accent colors say for syntax highlighting. So I don't need to support every possible point in a scale. The goal is more to exclude bad points in a predictable, opinionated way.
s
Ah got it, yeah I guess I had never seen a visual representation of the available and bad colors at a given contrast level and thought there might be something useful for you there: exclude 90% of color space, set up some basic heuristics, get a pretty decent solution
a
i think oklch is the new black
k