PostCSS Contrast Color Function

npm install @csstools/postcss-contrast-color-function --save-dev

PostCSS Contrast Color Function lets you dynamically specify a text color with adequate contrast following the CSS Color 5 Specification.

.color {
    color: contrast-color(oklch(82% 0.2 330));
}

/* becomes */

.color {
    color: rgb(0, 0, 0);
    color: contrast-color(oklch(82% 0.2 330));
}

Usage

Add PostCSS Contrast Color Function to your project:

npm install postcss @csstools/postcss-contrast-color-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssContrastColorFunction = require('@csstools/postcss-contrast-color-function');

postcss([
    postcssContrastColorFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

postcssContrastColorFunction({ preserve: false })

.color {
    color: contrast-color(oklch(82% 0.2 330));
}

/* becomes */

.color {
    color: rgb(0, 0, 0);
}