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.

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

.max {
	color: contrast-color(oklch(30% 0.2 79) max);
}

/* becomes */

.dynamic {
	color: color(display-p3 0.15433 0 0.15992);
	color: contrast-color(oklch(82% 0.2 330));
}@supports not (color: contrast-color(red max)) {@media (prefers-contrast: more) {.dynamic {
	color: rgb(0, 0, 0);
}
	}
}@supports not (color: contrast-color(red max)) {@media (prefers-contrast: less) {.dynamic {
	color: color(display-p3 0.2925 0 0.30177);
}
	}
}

.max {
	color: rgb(255, 255, 255);
	color: contrast-color(oklch(30% 0.2 79) max);
}

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 })

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

.max {
	color: contrast-color(oklch(30% 0.2 79) max);
}

/* becomes */

.dynamic {
	color: color(display-p3 0.15433 0 0.15992);
}@media (prefers-contrast: more) {.dynamic {
	color: rgb(0, 0, 0);
}
}@media (prefers-contrast: less) {.dynamic {
	color: color(display-p3 0.2925 0 0.30177);
}
}

.max {
	color: rgb(255, 255, 255);
}