contrast-color-picker

Web component color picker with WCAG contrast guides
Drop-in replacement for input type=color

Install

npm install contrast-color-picker

Usage

<!-- Basic -->
<contrast-color-picker value="#3498db"></contrast-color-picker>

<!-- With reference color -->
<contrast-color-picker value="#ff5733" reference="#000000"></contrast-color-picker>

<!-- Form integration -->
<form>
  <contrast-color-picker name="theme" value="#00ff00" reference="#ffffff"></contrast-color-picker>
</form>

API

Attributes: value, reference, name, disabled
Events: colorchange, input, change
Properties: value, name, disabled

Features

• 2D canvas color selection
• Real-time WCAG contrast calculation
• Native eyedropper for reference color
• Visual contrast guides (blue=AA, green=AAA)
• Zero dependencies, framework-agnostic

Browser Support

Chrome 114+, Firefox 114+, Safari 17+ (popover API)

License

MIT