Contrast Ratio Checker

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

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