- From: Will Bond via GitHub <sysbot+gh@w3.org>
- Date: Mon, 19 Nov 2018 15:49:11 +0000
- To: public-css-archive@w3.org
Sublime Text's minihtml engine had the need for color modifications last year, and I implemented them using the older draft of the color-mod function. Rather than invent our own syntax, it seemed to make sense to start from a foundation that had been previously discussed. Not all aspects of that have been implemented, but recently I ran into a use case that feels worth considering since this new proposal is being discussed. We have two components of the UI that introduce color - the theme and the color scheme. The color scheme includes colors fo syntax highlighting, and the theme controls the editor chrome. Color schemes are relatively easy to create and include diverse palettes. Themes require much more work, including raster graphics. Because of this, themes can derive colors from the color scheme. This introduces the issue of ensuring contrast. The original `contrast()` modifier only allowed modifying a color to create a new color the was appropriately contrasted with the base. This may be useful in some situations, but in our use case the issue is tweaking a color so it is appropriately contrasted with a different base. For instance, a blue color from a color scheme needing to be high enough contrast to be used as foreground on a grey background. So in addition to: > Getting white or black depending on which one contrasts better with the base color It seems it would be nice to have an option for: - Modifying a color to meet a luminosity ratio, when compared to a second color Hard-coding the ratio to 4.5 and then allowing blends between that and the maximum contrast color seems less useful than the user being able to specify the minimum contrast they want. It may not be that 4.5 is required (such as for headlines), or that the UI element is a decoration that requires some contrast, but not a full 4.5. It seems most of the discussion on syntax so far has been for modifying components of a color in a specific color space. (My personal take on that is that the `rel(50%)` syntax feels like one of the less complicated syntactic approaches.) So the following example is not endorsing a specific syntax, but proposing a basic concept that would be useful. ``` color-contrast(var(--red) var(--bg) 3.0) ``` This would modify the `var(--red)` to have a contrast ratio of at least 3.0 when compared with `var(--bg)`. I would be fine with the syntax being `contrast()`, `min-contrast()` or `contrast-adjust()`. If there was a function to pick color based on contrast, perhaps something like `pick-contrast(white black var(--bg))`. There is also the idea proposed in #1627 of picking the closest contrasting color from a list and then adjusting it to meet the required contrast ratio. In terms of blending, `cross-fade()` makes me think of audio production, as opposed to colors. I think `blend()` or `lerp()` may be a better fit for the color domain. -- GitHub Notification of comment by wbond Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-439939875 using your GitHub account
Received on Monday, 19 November 2018 15:49:13 UTC