[css-color-5] limited use of contrast adjuster

[xi]

https://drafts.csswg.org/css-color-4/#contrast-adjuster

Usecase 1: My website uses background-color: #ddd and color: #333. I want to add a button with a blue background and one of these colors for font. If none of these colors has enough contrast, it is ok to automatically pick a different one. - currently it is not possible to pick colors from an existing color scheme.

Usecase 2: I want to have a green button with blue font. The font color should be automatically adjusted to guarantee sufficient contrast. - currently it is not possible to have a different hue than the base color.

Both these use cases could be catered for with an extension like this:

contrast( <color1>?, <color2>?, <color3>?, …, <percentage>? )'

• First the provided colors are checked. The first one that has sufficient contrast to the base color is picked. The percentage is ignored.
• If none of the provided colors have sufficient contrast, the one with the highest contrast is picked and adjusted as described in the current draft.
• If no color is provided, the method described in the current draft is used.

See my gist for a working Sass implementation.

[xi]

On second thought, maybe it would be better to split this into two adjusters:

• contrast-pick( $color1 $color2 $color3? … ) - picks the color with the highest contrast. (usecase 1)
• contrast-adjust( $base $contrast? ) - mixes the color with black or white until it has a minimum contrast of $contrast to $base. (usecase 2)

Note that color( #050 contrast-pick( #002, #f00 ) contrast-stretch( #050 4.5 ) ) will pick the darker #002 in the first step and increase whiteness in the second one. If this was a single adjuster, that behavior could be different.

[AmeliaBR]

I agree that these are both important use cases.

In general, I think the current proposal (and @xi's suggested fixes, too) suffers from trying to fit into the color-mod(<color>,<series of adjustments to that color>) syntax.

Would there really be any use case for fixing the contrast and then adding additional adjustments in the sequence? If not, maybe it is best to use a separate function altogether, which clearly takes separate arguments for the base color and the desired color (or colors) to test against it & modify if the contrast requirement isn't met.

Adding the comment I made as a tangent to #1628 (sorry for muddling the discussion):

Giana Blantin's Sass functions show one possible API for a "fix contrast" function that might be more clear.

Her main fix-contrast method has a desired color, a color to contrast against, and a minimum contrast ratio. She then uses a Lab model to adjust the color until luminance is met, while trying to maintain the rest of the color perception. She also has a boolean method which can be used in Sass to create a switch behavior between multiple options; but pure CSS would need a more explicit function.

[stof]

The Material component library has a Sass mixin allowing to select an accessible ink color, to have enough contrast with the provided background. but it will always return one of 2 possible colors: white or rgba(black, .87) (for different cases, it has different sets of values with different alpha channels, but the idea stays the same).
AFAICT, the current proposal for adjusters does not allow to implement the same in CSS.

A use case here is of course that the background color comes from a CSS custom property, to allow building a theming system. Currently, building such theming would still require having 2 initial CSS files (one for dark themes and one for light themes), and choosing the right one based on the theme color, as things cannot be computed in the browser.

[xi]

Closing since the contrast adjuster is no longer part of the spec.

[xi]

Usecase 1 has been addressed in the draft for css-color-5

[svgeesus]

Re-targetting to CSS Color 5, which has a contrast function

[LeaVerou]

Closing once more since color candidates now are part of the contrast-color() syntax.