Contrast-Proofing Colors with CSS
The CSS contrast-color() function, which reached baseline support in 2026, automatically selects black or white text based on the background color to ensure high contrast. It simplifies maintaining readable text in dynamic contexts like light/dark themes or user-customized UI elements. However, the function has limitations with mid-tone colors and does not currently work within color-mix() functions.
- ▪The contrast-color() function returns black or white depending on which provides the highest contrast with the given background color.
- ▪It is useful for dynamic UI scenarios such as light/dark themes and CMS-customizable background colors.
- ▪The function does not currently support nesting within color-mix() expressions.
- ▪According to MDN, contrast-color() may produce unreadable results on mid-tone backgrounds, such as black text on royal blue (#2277d3).
- ▪Designers are advised to use high-contrast light or dark colors with contrast-color() for best accessibility outcomes.
Opening excerpt (first ~120 words) tap to expand
may 16, 2026 🔗 Contrast-proofing colors Previously in Text selection color, I covered how the most important thing to keep in mind when setting custom highlight colors, is keeping the contrast high enough. Until recently this meant picking a colour, running it through a checker, and revisiting it whenever the brand palette changed. In 2026 the contrast-color() function reached baseline support, and the browser can now handle this part directly. ::selection, ::target-text, ::search-text { background: yellow; color: black; color: contrast-color(yellow); } The function returns black or white, depending on which value has the greatest contrast with the input color. When the background colour changes, the text follows, removing one manual step from the design system.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at dan—webnotes.
Discussion
0 commentsMore from dan—webnotes
