Building accessible websites is becoming progressively important, especially as laws demand high contrast versions of digital spaces. The PostCSS High Contrast plugin offers a streamlined method to achieve this goal, rendering all colors in your project to meet high contrast standards.

Why Use PostCSS High Contrast?

Accessibility is no longer just a suggestion; it’s a necessity. A high contrast version of your project not only caters to visually impaired users but also aligns with legal requirements across various countries. Despite its importance, creating a high contrast version can be challenging if done manually. Here’s where PostCSS High Contrast steps in, simplifying the process significantly.

Live Example

Basic Usage

To utilize this plugin in your project, you would typically set it up like this:

postcss([
  require('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',
    customSelectorBorderColor: '#fff',
    selectorsBlackList: ['textfield'],
    imageFilter: 'invert(100%)',
    imageSelectors: ['img'],
    removeCSSProps: false,
    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']
  })
]);

Think of the PostCSS High Contrast plugin as a painter that can take your color palette and instantly transform it into a high contrast masterpiece. Just like an artist skillfully chooses hues to create visual impact and clarity, the plugin automatically adjusts the colors in your CSS to ensure they stand out sharply against backgrounds and other elements.

How It Works

None Aggressive Mode

In this mode, the plugin identifies colors in your stylesheets and replaces them with high-contrast alternatives. For instance:

/* input.css */
body {
  background: #fff;
  color: #000;
}
a {
  color: #0b39e1;
}

/* output.css */
body {
  background: #000;
  color: #fff;
}
a {
  color: #fcff3c;
}

Aggressive Mode

By default, the aggressive mode replaces colors while appending properties if they don’t exist, increasing specificity. Here’s an example:

/* input.css */
h1 {
  font-size: 48px;
  margin: 0;
  padding: 0 24px;
  width: 100%;
}
p {
  font-size: 48px;
  margin: 0 0 24px;
}

/* output.css */
h1 {
  color: #fff;
  font-size: 48px;
  margin: 0;
  padding: 0 24px;
  width: 100%;
}
p {
  color: #fff;
  font-size: 48px;
  margin: 0 0 24px;
}

Options for Customization

• aggressiveHC: true – Appends properties even if they don’t exist.
• aggressiveHCDefaultSelectorList: <default selectors> – List of selectors for aggressive property append.
• removeCSSProps: false – Remove unused CSS selectors or properties.
• CSSPropsWhiteList: <list of properties> – Whitelist specific properties from being removed.

Troubleshooting

If you encounter issues while setting up the PostCSS High Contrast plugin, consider these troubleshooting tips:

• Ensure all color properties are included in your CSSPropsWhiteList to prevent accidental removals.
• If things still don’t work as expected, check your configuration syntax for correctness.
• Use console logging to debug which selectors are being processed to identify potential issues.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.