A modern, intuitive color accessibility checker built with Next.js

Lumen is a comprehensive web application designed to help designers and developers ensure their color choices meet accessibility standards. Built with modern web technologies, it provides real-time contrast ratio calculations based on WCAG (Web Content Accessibility Guidelines) standards, making web accessibility testing simple and intuitive.

• Instant Feedback: Real-time contrast ratio calculations as you adjust colors
• WCAG Compliant: Comprehensive testing for AA and AAA accessibility standards
• Modern UI: Beautiful, responsive interface with dark/light mode support
• Developer Friendly: Clean, accessible design with smooth animations
• Multiple Input Methods: Hex codes, visual color picker, and direct input support

• Hex Code Input: Direct hex value entry with validation
• Interactive Color Picker: Visual color selection using react-colorful
• Real-time Updates: Instant preview as you modify colors
• Color Validation: Automatic fallback for invalid color values

• Normal Text Standards: AA (4.5:1) and AAA (7:1) compliance checking
• Large Text Standards: AA (3:1) and AAA (4.5:1) compliance checking
• UI Components: AA (3:1) compliance for interface elements
• Visual Indicators: Clear pass/fail status with intuitive icons

• Real-time Rendering: See exactly how your colors will look together
• Sample Content: Test with headings, paragraphs, and buttons
• Interactive Elements: Preview buttons and UI components
• Color Information: Display current hex values for reference

• Keyboard Navigation: Full keyboard accessibility support
• Screen Reader Friendly: Proper ARIA labels and semantic HTML
• Color Contrast: The app itself meets WCAG AA standards
• Responsive Design: Mobile-first approach with optimized layouts

• Dark/Light Mode: Automatic theme detection with manual toggle
• Smooth Transitions: Elegant theme switching animations

• Node.js 18.0 or later
• pnpm (recommended) or npm/yarn

1. Clone the repository

   git clone https://github.com/ahmadrafidev/lumen.git
   cd lumen

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:3000

# Build the application
pnpm build

# Start the production server
pnpm start

• Next.js 15.0.3 – React framework with App Router
• React 19 RC – Latest React with concurrent features
• TypeScript – Type-safe development

• Tailwind CSS – Utility-first CSS framework
• Radix UI – Accessible component primitives
• Lucide React – Beautiful, consistent icons
• next-themes – Theme management

• react-colorful – Lightweight color picker
• Custom WCAG utilities – Precise contrast ratio calculations
• Relative luminance calculations – Following WCAG 2.1 standards

• ESLint – Code linting and formatting
• PostCSS – CSS processing
• pnpm – Fast, disk space efficient package manager

lumen/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Main application page
│   ├── layout.tsx         # Root layout with providers
│   ├── globals.css        # Global styles and CSS variables
│   └── not-found.tsx      # 404 error page
├── components/            # React components
│   ├── ui/               # Reusable UI primitives
│   ├── ForegroundCard/   # Foreground color input
│   ├── BackgroundCard/   # Background color input
│   ├── ContrastRatioCard/ # Contrast ratio display
│   ├── LivePreviewCard/  # Real-time preview
│   ├── PassCheckCard/    # WCAG compliance checker
│   ├── Header/           # Application header
│   ├── Footer/           # Application footer
│   └── Home/             # Main homepage component
├── utils/                # Utility functions
│   └── colorUtils.ts     # Color calculation utilities
├── lib/                  # Shared libraries
├── public/               # Static assets
└── ...config files

Lumen uses the official WCAG 2.1 formula for calculating contrast ratios:

1. Relative Luminance: Calculate the relative luminance of each color
2. Contrast Ratio: Apply the formula (L1 + 0.05) / (L2 + 0.05)
3. WCAG Compliance: Compare against WCAG AA/AAA thresholds

export const calculateContrastRatio = (foreground: string, background: string): number => {
  const lum1 = calculateLuminance(foreground);
  const lum2 = calculateLuminance(background);
  
  return lum1 > lum2
    ? (lum1 + 0.05) / (lum2 + 0.05)
    : (lum2 + 0.05) / (lum1 + 0.05);
};

• AA Normal Text: 4.5:1 minimum contrast ratio
• AA Large Text: 3:1 minimum contrast ratio
• AAA Normal Text: 7:1 minimum contrast ratio
• AAA Large Text: 4.5:1 minimum contrast ratio
• UI Components: 3:1 minimum contrast ratio

We welcome contributions! Here’s how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

• Follow TypeScript best practices
• Use conventional commit messages
• Ensure accessibility standards are met
• Add tests for new features
• Update documentation as needed

• WCAG 2.1 Overview
• WebAIM Contrast Checker
• Understanding WCAG Success Criteria

• Color Universal Design
• Accessible Colors
• Colour Contrast Analyser

• Next.js Documentation
• Tailwind CSS Guide
• Radix UI Primitives

This project is licensed under the MIT License – see the LICENSE file for details.

Ahmad Rafi Wirana (@rafiwiranaa)