color-contrast-checker icon indicating copy to clipboard operation
color-contrast-checker copied to clipboard

Check color contrast with alpha channels.

Contrast Checker

A color contrast checker with support for alpha channels.

Demo: https://contrast-checker.now.sh/002244/0094f0/eef9ff/004771/00477191

You can add swatches to the color palette by adding hex, hex alpha or rgba strings to the URI.

Screenshot

Codesandbox: https://codesandbox.io/s/0053my42jp

Made with …

  • https://codesandbox.io/
  • https://www.npmjs.com/package/react-color
  • https://www.npmjs.com/package/get-relative-luminance
  • https://www.npmjs.com/package/wcag-contrast
  • https://www.npmjs.com/package/chroma-js

Inspired by https://contrast-checker.glitch.me/