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
-
Clone the repository
git clone https://github.com/ahmadrafidev/lumen.git cd lumen -
Install dependencies
pnpm install
-
Start the development server
pnpm dev
-
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:
- Relative Luminance: Calculate the relative luminance of each color
- Contrast Ratio: Apply the formula
(L1 + 0.05) / (L2 + 0.05) - 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:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - 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
This project is licensed under the MIT License - see the LICENSE file for details.
Ahmad Rafi Wirana (@rafiwiranaa)
Made with ❤️ for a more accessible web