100LinesOfCode icon indicating copy to clipboard operation
100LinesOfCode copied to clipboard

Add WCAG Contrast Checker Utility

Open joaogsribeiro opened this issue 4 months ago • 0 comments

Description

This PR adds a new utility: WCAG Contrast Checker.

It helps developers and designers ensure their color combinations meet accessibility standards (AA/AAA) based on official W3C formulas.

This project evolved from a simple color picker to a full accessibility tool, and finally to a Browser Extension (Manifest V3) with EyeDropper API support.

Linked Issue

Closes #443

Features

  • [x] Real-time contrast ratio calculation (W3C relative luminance).
  • [x] Dynamic preview box.
  • [x] EyeDropper API integration (Pick color from screen).
  • [x] Manual input support (HEX/RGB).
  • [x] Logic kept under 100 lines of JS (96 lines).
  • [x] Chrome Extension support (Manifest V3).

Tech Stack

  • HTML5, CSS3 (Flexbox/Grid), Vanilla JavaScript.

Thank you!

joaogsribeiro avatar Dec 06 '25 00:12 joaogsribeiro