@webgarden/postcss-high-contrast NPM

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

postcss css postcss-plugin high contrast web accessibility

@infinitebrahmanuniverse/nolb-_webg @everything-registry/sub-chunk-1008

2.0.1

3 years ago

2.0.0

3 years ago

1.0.0

3 years ago