Color_Checker

Streamlit App.py

Inspiration

Accessibility is often overlooked in web design, especially when it comes to color contrast. Many websites fail WCAG standards, making content difficult for visually impaired users. I wanted to create a simple yet effective tool that helps developers and designers ensure inclusivity without extra effort.

What it does

Color_Checker scans websites, extracts text and background colors, calculates contrast ratios, and highlights elements that fail accessibility standards. It also provides quick fixes and suggestions to make colors WCAG-compliant.

How we built it

Frontend: HTML, CSS, JavaScript for the interface and scanning logic. Contrast Engine: Implemented WCAG 2.1 formulas to calculate contrast ratios. Enhancements: 1.Support for named colors (e.g., red, white). 2.CSS file scanning for more accurate analysis. 3.OCR integration for screenshots to detect text + background colors. 4.Pass/Fail highlights in results table (green/red).

Challenges we ran into

Parsing and normalizing different CSS color formats. Implementing accurate OCR for detecting colors from images. Ensuring fast performance when scanning larger CSS files or webpages.

Accomplishments that we're proud of

Built a working prototype that checks and fixes contrast issues in one click. Successfully integrated WCAG contrast ratio calculations with user-friendly results. Added extra features like screenshot OCR and pass/fail highlighting for better usability.

What we learned

Deeper understanding of web accessibility principles and WCAG 2.1 guidelines. How to implement and test contrast ratio formulas: $$Contrast Ratio=L2+0.05/L1+0.05$$ Improved skills in JavaScript, CSS parsing, and working with OCR libraries.

What's next for Color_Checker

Build a browser extension for real-time accessibility checks. Add auto-fix suggestions that directly generate accessible color palettes. Expand support for mobile and dark mode accessibility testing. Provide an exportable accessibility report for developers and designers.