CSS contrast-color() Function: Simplifying Accessible Text Colors
Apply contrast-color() to automatically set text color to black or white based on background, but provide a fallback for unsupported browsers.
Implement contrast-color() with @supports and fallback color, and test on target browsers.
Summary
CSS contrast-color() is a new function defined in the CSS Color Module Level 5 that returns either black or white depending on which color has higher contrast against a given background. The function accepts a single color argument, which can be a literal, a variable, or a color keyword, and defaults to white when both black and white provide equal contrast. It is intended as an accessibility helper, allowing designers to set text color automatically without hard‑coding two values. However, the current implementation only supports black or white, ignores font‑size, and does not handle gradients or images, limiting its usefulness for complex themes.
The older syntax that allowed multiple contrast options has been removed, leaving a single‑argument form. Because browser support is still incomplete, developers should wrap the call in an @supports rule and provide a fallback color. The function is a work in progress, and future drafts may introduce more color choices or additional parameters. For now, contrast-color() is best used in simple scenarios where black or white suffices.
Key changes
- contrast-color() returns either black or white based on highest contrast against a given background.
- Accepts a single color argument (literal, variable, or keyword).
- Defaults to white when black and white have equal contrast.
- Only supports black or white text, no font‑size consideration.
- Older syntax with multiple contrast options has been removed.
- Requires @supports wrapper and fallback color for unsupported browsers.
- Defined in CSS Color Module Level 5.
- Best suited for simple scenarios where black or white suffices.