# contrast-color() beyond black & white

DevFeed: [contrast-color() beyond black & white](<https://devfeed.tech/articles/contrast-color-beyond-black-white-28771.md>)

Original publisher: [Read original article](<https://una.im/advanced-contrast-color/>)

Published: 2026-03-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [color](<https://devfeed.tech/topics/color.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [color](<https://devfeed.tech/tags/color.md>), [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

## AI overview

This tutorial presents two techniques for extending CSS contrast-color() beyond its black-or-white result: tinting a brand color with the returned value, and creating custom color palettes with style queries and custom properties. It emphasizes validating the resulting color combinations with WCAG or APCA contrast checkers.

## Source excerpt

Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.