Pick readable text colors with CSS contrast

The contrast-color() function takes a and returns either black or white, whichever is the most contrasting color for that value.

Black/white-only is fine for quick badges, but it can still fail you on “almost-white” brand colors where white looks clean but doesn’t actually hit WCAG. I found a related kirupa. com article that can help you go deeper into this topic.