Skip to content

Checks the color contrast of your color design based on Web Content Accessibility Guidelines (WCAG)

License

Notifications You must be signed in to change notification settings

AnsonH/contrast-checker

Repository files navigation

Contrast Ratio Checker

A simple React app that checks the color contrast of your design based on Web Content Accessibility Guidelines (WCAG). 🎨

Demo

Features

  • Color pickers for color input
  • Accepts HEX, RGB and HSL color formats
  • Converts color format to HEX, RGB and HSL
  • Checks against WCAG 2.0 Level AA and Level AAA requirements
  • Saves and loads themes from local storage
  • Responsive design

Development

# 1. Clone this repository to your local computer
git clone https://github.com/AnsonH/contrast-checker.git

# 2. Change directory to the root of the repo
cd contrast-checker

# 3. Install dependencies
npm install

# 4. Start the development server
npm start

Webpack Bundle Analyzer is also installed as a dev dependency to analyze the bundle size. To generate a treemap visualization:

# 1. Create a production build
npm run build

# 2. Generate a treemap report
npm run analyze