Text colors on different backgrounds

[niklasmh]

Low priority, but having a system for choosing which text color that should be used with each background color could make it easier to choose. People will have different perceptions of what matches and don't. Some are obvious, like white on black or black on white, but what about the greys. Where do you switch?

I see two solutions:

1. We can hardcode each background color with a text color on beforehand. We should then be consistent and use a calculator like this: https://contrast-ratio.com/
2. We can do fancy calculations dynamically, removing all hard work in the future :) https://css-tricks.com/methods-contrasting-text-backgrounds/

Using the second solution you can use something like this:

.text {
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(30);
}

Negative side effects from the second solution:

Thus deciding a contrast color for a perfect gray may be tricky for any logic.

[plusk]

In the current color palette "component", I've set the text color based on your first option. Honestly, I don't think we need a hyper-general solution here. A design system is just as much about providing and limiting your options. If we define a text color for light backgrounds and one for dark backgrounds, then we only have two contrast ratios to check, which we can do manually like I've done now. Right now I've just gone for pure black and pure white, even if some websites prefer a lower-contrast option. The color component could definitely use some more features, and at the very least define which colors should be used when. It's still somewhat of a work-in-progress, which we can figure out more as we use the colors. Here is a pretty decent example of showing contrast when clicking on a color. They check contrast to black, white, gray, and blue (the interactive color used for buttons). Here again though, if white is the "default" text color you'd use on @navBla, then I don't see a lot of reason to include some programmatic checker that @navLimeGronnDarken20 works too. The design system should tell you in writing what cases you use colors, and you'd never end up in a situation where you try to combine the two