How to group CSS colors

Question

Let's suppose I have a td, like this:

<td class="nice-text">Cell Text</td>

I would like to make sure that my text is visible, whatever the background of the td is. If we suppose that the background color is stored inside data-background, like this:

<td class="nice-text" data-background="#000000"></td>

and we add the following rule to our CSS:

.nice-text[data-background=\\#000000] {
    color: white;
}

then the color will be white if #000000 is chosen. But there are extremely many colors close to #000000. Since it is clearly unfeasible to write a CSS rule for all such colors and Javascript would be used here only in case of desperation, is there a possibility to use a selector which defines a group of colors which are close to black and set color: white; for them?

Answer 1

is there a possibility to use a selector which defines a group of colors which are close to black

No. Selectors doesn't have any knowledge of color whatsoever.

You're going to have to write your own algorithm to determine whether the foreground color should be light or dark based on the background color. And if you're trying to get things done, that means JavaScript. If you're trying to develop a CSS-only proof-of-concept for the sake of experimentation, you can take a stab at emulating regular expressions (assuming they are, as you seem convinced, possible to implement using Selectors) and seeing if what you end up with resembles an actual color-matching algorithm and produces accurate and consistent results. If you do come up with a solution that actually works, without cheating by changing the attribute value to something that makes it as easy as writing a non-algorithmic selector, feel free to post an answer with a case study.

My point is that Selectors doesn't offer a feature that's designed for your specific use case, and whatever time that might get put into developing what is essentially a hack is probably better spent on an actual, practical solution.

I tend to not believe comments without backup info.

Look, I could link you to the spec, but I'm not going to be able to link you to any particular section of the spec, simply because the spec doesn't mention such functionality anywhere, for the sole reason that the working group never considered speccing such a feature in the first place. It is up to you whether or not you want to accept this fact. Neither I nor the authors of the spec nor the people who work on layout engines nor anyone else in the working group is obligated to justify to you or anyone else whether or not a non-existent feature would be feasible to spec, implement, test, and ship.

Of course, if you want to get really pedantic, there's technically nothing stopping the working group from proposing, say, a functional pseudo-class that takes a string that represents a color as an argument and matches elements based on the criteria you've listed above. In fact, you are free to implement Selectors yourself (or take a ready-made albeit non-standard implementation such as Sizzle) and implement such a feature if you're so inclined. But if you really want an informed opinion from an expert, it is highly unlikely that such a feature would be useful to a wide enough audience to warrant all the development time and effort on part of browser vendors or the working group.

Answer 2

It's possible, but not in pure CSS. If you can bring in some javascript this solution may work for you. It's not perfect, but it's pretty good. Basically, this function will evaluate the hex color that you pass it and return simply 'black' or 'white' depending on the hex.

In JavaScript:

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

I have a working example here https://jsfiddle.net/nzcyjhz3/2/