Original plugin: PostCSS High Contrast

Installation

$ npm install --save-dev postcss @webgarden/postcss-high-contrast

Basic Usage

postcss([
  require('@webgarden/postcss-high-contrast')({
    aggressiveHC: true,
    aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
    aggressiveHCCustomSelectorList: ['div', 'span'],

    colorProps: ['color', 'fill'],

    backgroundColor: '#000',
    altBgColor: '#fff',

    textColor: '#fff',

    buttonSelector: ['button'],
    buttonColor: '#000',
    buttonBackgroundColor: '#fcff3c',
    buttonBorderColor: 'none',

    linkSelectors: ['a'],
    linkColor: '#fcff3c',
    linkHoverColor: '#fcff3c',

    borderColor: '#fff',
    disableShadow: true,

    customSelectors: ['input'],
    customSelectorColor: '#fff',
    customSelectorBackgroundColor: '#000',
    customSelectorBorderdColor: '#fff',

    selectorsBlackList: ['textfield'],

    imageFilter: 'invert(100%)',
    imageSelectors: ['img'],

    CSSPropsWhiteList: ['background', 'background-color', 'color', 'border', 'border-top', 'border-bottom',
      'border-left', 'border-right', 'border-color', 'border-top-color', 'border-right-color',
      'border-bottom-color', 'border-left-color', 'box-shadow', 'filter', 'text-shadow', 'fill'],
    HTMLHighContrastClass: 'hc',
    removeAnimations: false,
    append: true
  })
]);

Using on wepbage

Using this plugin with append option, the high contrast CSS is prefixed with the configured html class ( default: html.hc), and gets appended to the original css. You can toggle .hc class on the HTML tag.

document.querySelector('a.high-contrast').addEventListener('click', function (evt) {
  evt.preventDefault();
  document.documentElement.classList.toggle('hc');
});

Tip: use cookies to remember turned on high contrast css on different sessions and pages.

Options

| Name | Default Value | Description | |:----------------------------------|:---------------------------------------------------|:---------------| | aggressiveHC | true | Will append properties even if they do not exist | | aggressiveHCDefaultSelectorList | ['h1', 'h2', 'h3', 'h4', 'h5', 'h6','p', 'li', 'th', 'td'] | Default list of selectors for aggressive property append | | aggressiveHCCustomSelectorList | ['span'] | Custom list of selectors for aggressive property append | | colorProps | ['color','fill'] | List of Properties that will be considered for color changing | | backgroundColor | #000 | Backgound color | | altBgColor | #fff | Alternative background color | | textColor | #fff | Text color | | buttonSelector | [button] | Button Selector | | buttonColor | #000 | Button color | | buttonBackgroundColor | #fcff3c | Button background color | | buttonBorderColor | none | Button border color | | linkColor | #fcff3c | Link color | | linkHoverBgColor | #fff | Link hover bacground color | | linkHoverColor | #000 | Link hover color | | borderColor | #fff | Border color | | disableShadow | true | Disable shadow | | imageFilter | false/invert(100%)/grayscale(100%)/contrast(200%) | Image Filter (disabled by default). false to disable. Any css filter option can be passed| | imageSelectors | ['img'] | Default list of image selectors to apply imageFilter| | removeCSSProps | false | This option will remove all unused CSS selectors or properties for better optimization. Use CSS minifiers like CSSNano or CSSO to merge selectors| | CSSPropsWhiteList | ['background', 'background-color', 'color', 'border', 'border-top', 'border-bottom', 'border-left', 'border-right', 'border-color', 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', 'box-shadow', 'filter', 'text-shadow'] | CSS properties whitelist | | HTMLHighContrastClass | hc | Class added to HTML selector | | append | true | Append HC CSS to original one. False means: overwrite | | removeAnimations | true | Removes keyframe animation definition if true |