[css-color] Adaptive Color Keywords black-or-white and white-or-black

[Crissov]

If invert (optionally) depended on the value of background-color #4611 and was added to other properties than outline-color, but perhaps not to the <color> type itself, there would be some other useful color keywords defined in a similar way:

• white-or-black equals black if the value of background-color has a CIE lightness of more than 40%, otherwise it equals white
• black-or-white equals white if the value of background-color has a CIE lightness of less than 60%, otherwise it equals black

I am not sure whether they should depend on the specified, computed, actual or used value. The thresholds of 40% and 60% are chosen arbitrarily; with 50% there would be no need for two different keywords.

This could be used, for instance, in color swatch tables where the background shows the sample color and the text gives the color name or code value, and it would thus ensure readability.

Perhaps there could also be a point made in favor of current-or-black and current-or-white keywords, which would not depend on the absolute lightness of the background color but on the contrast ratio between that and currentcolor.

[Loirooriol]

I'm not sure that adding a dependency to background-color is a good idea.

But if it's done, I would say that it would be better to go all the way, expose backgroundColor in <color>, handle cyclic dependencies like for var(), and cover your usecase with color-contrast:

color: color-contrast(backgroundColor white, black)

@frivoal proposed backgroundColor in #364, but it was rejected because background-color is not inheritable and usually you want the background of some ancestor, not the element itself.

But you can use variables:

--background-color: #123456;
background-color: var(--background-color);
color: color-contrast(var(--background-color) white, black);

[Crissov]

If I understand the new contrast-color(), replacing color-contrast (), correctly, it very much does what I had proposed here.