translate

postcss-wcag-contrast


WCAG Contrast PostCSS Logo

NPM Version
Linux Build Status
Windows Build Status
Gitter Chat

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.

Rating

ABOUT

LESS COMMENTS

MESSAGE REVIEW OK

Ok