postcss-contrast

PostCSS plugin to change text color depending on background color contrast. This is generally useful if your writing a mixin or placeholder selector that applies to many scenarios.

TL;DR Use the contrast() function anywhere and get #fff or #000 depending on the lightness of the color you pass in the function.

Install

npm i --save-dev postcss-contrast

Usage

var fs = require('fs');
var postcss = require('postcss');
var customProperties = require('postcss-custom-properties');
var contrast = require('postcss-contrast');
 
var css = fs.readFileSync('input.css', 'utf8');
 
var output = postcss()
  .use(customProperties())
  .use(contrast())
  .process(css)
  .css;
 

PostCSS

/* input.css */
 
:root {
  --bg-color: #fff;
}
 
body {
  background-color: var(--bg-color);
  color: contrast(var(--bg-color));
}

Compiled CSS

/* output.css */
 
body {
  background-color: #fff;
  color: #000;
}

Options

dark (default: #000)

This lets your define a custom black for all contrast functions in your project.

var out = postcss()
  .use(contrast({dark: '#444'}))
  .process(css)
  .css;
 

light (default: #fff)

This lets your define a custom white for all contrast functions in your project.

var out = postcss()
  .use(contrast({light: '#efefef'}))
  .process(css)
  .css;
 

Contributing

Make a branch, npm test often, submit a new pull when it passes.

git clone https://github.com/stephenway/postcss-contrast.git
git checkout -b patch-1
npm i
npm test

Resources

• License
• Releases
• Plugin Guidelines