Nihilist Postmodern Mistake

    postcss-wcag-contrast

    2.0.0 • Public • Published

    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.

    Install

    npm i postcss-wcag-contrast

    DownloadsWeekly Downloads

    281

    Version

    2.0.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • jonathantneal