764ac90e60
Add comprehensive accessibility features and color naming:
**Color Utilities (lib/utils/color.ts):**
- getRelativeLuminance() - WCAG 2.1 luminance calculation
- getContrastRatio() - Contrast ratio between two colors
- hexToRgb() - Convert hex to RGB
- checkWCAGCompliance() - AA/AAA compliance checker
- Full WCAG 2.1 specification implementation
**New UI Component:**
- Badge component - Status indicators
- Variants: default, success, warning, destructive, outline
- Used for pass/fail indicators
- Accessible focus states
**Accessibility Pages:**
1. Contrast Checker (/accessibility/contrast)
- Dual color pickers (foreground/background)
- Real-time contrast ratio calculation
- Live text preview with both colors
- WCAG 2.1 compliance display:
- Level AA: Normal text (4.5:1), Large text (3:1), UI (3:1)
- Level AAA: Normal text (7:1), Large text (4.5:1)
- Pass/Fail badges for each criterion
- Swap colors button
- Visual feedback with color-coded results
2. Accessibility Dashboard (/accessibility)
- Overview of all accessibility tools
- Feature cards with icons
- Educational content about WCAG 2.1
- Standards explanation (AA vs AAA)
- Links to each tool
**Named Colors Page (/names):**
- Display all 148 CSS/X11 named colors
- Search by name or hex value
- Sort options (name, hue)
- Responsive grid layout (2-6 columns)
- Click to copy color
- Color name and hex display
- Loading and error states
- Empty state for no results
- Real-time filtering
**Batch Operations Page (/batch):**
- Placeholder "Coming Soon" page
- Feature preview list
- Planned capabilities description
- Professional coming soon message
**Features Implemented:**
- Real WCAG calculations (not approximations)
- Live contrast ratio updates
- Interactive color swapping
- Comprehensive compliance checking
- Educational content
- Named colors from API
- Search and filtering
- Responsive layouts
**Build Status:**
✅ 11 pages successfully rendering
✅ All TypeScript checks passing
✅ No build errors
All major sections now have functional or placeholder pages!
Next: Polish, testing, and additional enhancements.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
/**
|
|
* Calculate relative luminance of a color
|
|
* Based on WCAG 2.1 specification
|
|
*/
|
|
export function getRelativeLuminance(r: number, g: number, b: number): number {
|
|
const [rs, gs, bs] = [r, g, b].map((c) => {
|
|
const sRGB = c / 255;
|
|
return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
|
|
});
|
|
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
}
|
|
|
|
/**
|
|
* Calculate contrast ratio between two colors
|
|
* Returns ratio from 1 to 21
|
|
*/
|
|
export function getContrastRatio(
|
|
fg: { r: number; g: number; b: number },
|
|
bg: { r: number; g: number; b: number }
|
|
): number {
|
|
const l1 = getRelativeLuminance(fg.r, fg.g, fg.b);
|
|
const l2 = getRelativeLuminance(bg.r, bg.g, bg.b);
|
|
const lighter = Math.max(l1, l2);
|
|
const darker = Math.min(l1, l2);
|
|
return (lighter + 0.05) / (darker + 0.05);
|
|
}
|
|
|
|
/**
|
|
* Parse hex color to RGB
|
|
*/
|
|
export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
|
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return result
|
|
? {
|
|
r: parseInt(result[1], 16),
|
|
g: parseInt(result[2], 16),
|
|
b: parseInt(result[3], 16),
|
|
}
|
|
: null;
|
|
}
|
|
|
|
/**
|
|
* Check if a contrast ratio meets WCAG standards
|
|
*/
|
|
export function checkWCAGCompliance(ratio: number) {
|
|
return {
|
|
aa: {
|
|
normalText: ratio >= 4.5,
|
|
largeText: ratio >= 3,
|
|
ui: ratio >= 3,
|
|
},
|
|
aaa: {
|
|
normalText: ratio >= 7,
|
|
largeText: ratio >= 4.5,
|
|
},
|
|
};
|
|
}
|