Color Contrast Tool

Accessible Color Palettes, Designer-Friendly Tool For Finding Creative Color Palettes

Comment

Color Contrast Tool link

Inspiration

As someone who's dabbled in UI design, I've always been frustrated by tools that make it hard to check color accessibility quickly. The Color Contrast Tool was inspired by the need for a straightforward, designer-friendly way to build and test color palettes against WCAG standards—something I wished I'd had when tweaking designs late at night to meet readability guidelines.

What it does

The Color Contrast Tool helps graphic and UI designers create accessible color palettes. Key features include:

  • Pick colors and build a palette
  • Instantly see contrast ratios for every text-background combination
  • WCAG 2.0 compliance rating with a star system (2 to 5 stars) and pass/fail indicators (✓ or ✗ for a 4.5 ratio)
  • Local palette history saved with localStorage
  • Image palette extractor to pull colors from uploaded images
  • Fully optimized for mobile use
  • Dark/light mode toggle for interface adaptability

How I built it

Built with modern web technologies:

Core Technologies

  • React.js for dynamic frontend
  • tinycolor2 for contrast ratio calculations
  • Material UI (@mui/material) for polished components
  • react-color for color picking
  • color-thief-react for image palette extraction

Deployment & Optimization

  • Bundled with Vite for fast development
  • Deployed on Netlify
  • Local storage via localStorage
  • Mobile optimization with responsive design
  • Dependencies managed with npm

Challenges I ran into

  1. Contrast Math: Implementing tinycolor2 to accurately compute WCAG-compliant contrast ratios was tricky—small rounding errors threw off star ratings initially.
  2. Image Extraction: Getting color-thief-react to reliably extract usable palettes from diverse images (like low-contrast or noisy ones) required tweaking and fallback logic.
  3. UI Responsiveness: Balancing Material UI's theming with the dark/light toggle took extra effort to avoid clashing with user-picked colors.
  4. Performance: Rendering contrast ratios for large palettes bogged down the app until I optimized state updates with React's useMemo.

Accomplishments that I'm proud of

  • WCAG Integration: The star-based rating system (5 stars for 7+, 4 for 4.5+, etc.) with ✓/✗ indicators makes accessibility intuitive and visual.
  • Local History: Saving palettes with localStorage lets users pick up where they left off seamlessly.
  • Mobile Ready: The tool's fully optimized for mobile, with smooth touch controls and a responsive layout.
  • Image Feature: The image palette extractor works flawlessly—upload a photo, get a palette, and export it with one click.

What I learned

  • Accessibility Standards: Deepened understanding of WCAG 2.0 and how contrast impacts readability.
  • React Optimization: Mastered hooks like useMemo and useCallback for snappy UIs with heavy computations.
  • Material UI: Gained expertise in theming and component customization, especially with dynamic dark/light modes.
  • Image Processing: Learned practical frontend image manipulation techniques.

What's next for Color Contrast Tool

  • Palette Presets: Adding pre-built palettes (e.g., monochromatic, complementary) for quick starts.
  • Export Options: Enhancing exports with formats like CSS variables or JSON for easier integration into design workflows.
  • AI Suggestions: Integrating @google/generative-ai to suggest accessible color tweaks based on your palette.
  • Collaboration Mode: Adding a feature to share palettes with others via a generated link or code.
  • Performance Tweaks: Further refining load times for the image extractor with larger files.

How to use

  1. Visit the Tool: Go to colorcontrasttool.netlify.app.
  2. Add a Color: Click the color input to pick a color, then hit ADD COLOR to add it to your palette. Repeat until your palette is complete.
  3. Check Contrast: Each added color generates a table of contrast ratios for all text-background combos, rated with stars:
    • 5 stars: ≥7 (AAA for normal text)
    • 4 stars: ≥4.5 (AA for normal text, AAA for large text)
    • 3 stars: ≥3 (AA for large text/UI components)
    • 2 stars: ≥2 (below standard)
    • ✓ if ≥4.5, ✗ if not.
  4. Reorder Colors: Use the arrows next to each color to move it up or down the palette.
  5. Toggle Theme: Switch between dark/light mode with the top-right button if the theme clashes with your colors.
  6. Extract from Image: Upload an image, see the extracted palette, and click individual colors or EXPORT PALETTE to use them all.
  7. Access History: Your palettes are saved locally—reload the page to see your past work.
Share this project:

Updates