Re: [csswg-drafts] [css-color-5] add target contrast ratio to color-contrast? (#4749)

Hi there -- new to this conversation. I have some thoughts on all of this. I would expect a `color-contrast()` function to simply run a pass/fail test of two colors, however I think the simple behavior of passing a list of possible colors with a target ratio, and returning the first color to meet that ratio (or white/black if none do). However, **in terms of adjusting the color to *meet* the target ratio, you're going to encounter problems that can't be solved by formulas and color spaces alone**.

For example, regarding this statement

> I am hoping that the newer lch() color model and formulas will help

LCh color model is not an end-all solution. There tends to be an assumption that different color models will automatically solve all of our human-perception-of-color issues, however it's simply not the case. There are continual advancements in color science in order to make models that are even more perceptually accurate (CAM02 and CAM16, developed in 2002 and 2016 respectively -- quite a bit more modern than LCh; a cylindrical adaptation of Lab which was defined in 1976). Even those don't solve all problems. 

There are also a lot of factors that go into selections of color, including **how the color should adjust as it gets brighter or darker**.  There are aesthetic choices that can't be resolved by colorspace -- such as making a yellow color become more orangish as it gets darker. And to that effect, defining how much and at what rate the color gains/loses saturation. On top of that, default interpolation is **linear**, which does not always accurately reflect how designers would expect a color to change as it approaches black/white (darkest/lightest possible color value). For that, designers may hope to have finer control, such as a smoothing function to ensure the color interpolates along a curve.

This problem is so complex I've made an (arguably *just as complex*) tool for designers and engineers to do exactly that-- generate colors based on a target contrast ratio (https://leonardocolor.io/). The engineering experience aims for the same thing it looks like being discussed here -- a single function call where you enter a color, a target ratio, and it spits out an appropriate color. However, because of the nuanced aesthetic choices that need to be controlled, this type of function also needs additional parameters:
```js
generateContrastColors({
  // specific target colors provide control over how color changes:
  colorKeys: ["FFFF00", "553300"],  
  // different color spaces may provide more desirable outputs:
  colorspace: 'RGB',
  // default interpolation is linear, however a smooth option may be better:
  smooth: true,
  // background color is needed as it takes 2 to calculate contrast:
  base: '#ffffff',
  // perhaps you want more than one color output from this scale:
  ratios: [3, 4.5]
});
```

It would be fantastic if in the future there was a CSS color function that helped with all this, however it's important to not overlook the complexity of color, color selection, and adherence to aesthetics while manipulating a color to meet a target contrast ratio. All of that would come with the need for designer-facing tools to configure the parameters for engineers to use in the product. But until then, I think it is better suited to approach either of the simpler solutions above (simply calculate contrast, **or** return a color from a list of possible colors that matches the target)

-- 
GitHub Notification of comment by NateBaldwinDesign
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4749#issuecomment-618058868 using your GitHub account

Received on Wednesday, 22 April 2020 21:49:31 UTC