WCAG Contrast

WCAG Contrast checks CSS for color contrast compliance with Web Content Accessibility Guidelines (WCAG) 2.0.

.header {
  background-color: #444;
  color: #000; /* throws a warning for a low contrast of only 2.2 */
}

.footer {
  /* wcag-params: bold 14pt #777 */
  color: #000; /* throws no warning when text is bold 14pt and contrast is 4.7 */
}

Usage

Add WCAG Contrast to your build tool:

npm install postcss-wcag-contrast --save-dev

Node

Use WCAG Contrast to process your CSS:

require('postcss-wcag-contrast').process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use WCAG Contrast as a plugin:

postcss([
  require('postcss-wcag-contrast')()
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use WCAG Contrast in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('postcss-wcag-contrast')()
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use WCAG Contrast in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('postcss-wcag-contrast')()
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Options

compliance

Type: String
Default: "AA"

The compliance option specifies the WCAG compliance the CSS will be evaluated against.

wcag-params

Type: CSS Comment

The wcag-params specifies additional font size, font weight, background, and foreground information about the rule.