Skip to content

Lumen: Fast, accessible color checks for designers and developers

License

Notifications You must be signed in to change notification settings

ahmadrafidev/lumen

Repository files navigation

Lumen

Lumen Overview Image

Lumen is a simple yet effective web app designed to help designers and developers evaluate the accessibility of their color choices. By calculating contrast ratios based on WCAG standards, Lumen ensures your designs are readable and inclusive for all users.

Table of Contents

  1. Overview
  2. Core Features
  3. References

Overview

Lumen enables designers and developers to check the contrast between two colors and determine if they meet the accessibility requirements outlined in the Web Content Accessibility Guidelines (WCAG). With quick and clear feedback, Lumen helps you create designs that are easy to read for everyone.

Core Features

Input Color Selection

  • Flexible Input Options Enter color values by:
    • Typing hex codes.
    • Using a color picker.
    • Inputting RGB or HSL values.

Contrast Ratio Calculation

  • WCAG Compliance Calculates the contrast ratio between two colors based on WCAG guidelines, with results for:
    • AA Level: Minimum 4.5:1 for normal text, 3:1 for large text.
    • AAA Level: Minimum 7:1 for normal text, 4.5:1 for large text.

Accessibility Pass/Fail Feedback

  • Instant Results: Displays whether the selected color combination meets AA or AAA standards.
    • Uses visual indicators (e.g., checkmarks or red X's) for quick, intuitive feedback.

Real-time Preview

  • Live Feedback: Shows immediate results as you adjust your colors, ensuring an intuitive user experience.

References

  1. How Accessible Is My Website?
  2. WebAIM's WCAG 2 Checklist
  3. WCAG 2 Overview

About

Lumen: Fast, accessible color checks for designers and developers

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published