feat: implement accessibility tools and named colors explorer

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>
This commit is contained in:
valknarness
2025-11-07 11:42:55 +01:00
parent c3745bd6b7
commit 764ac90e60
6 changed files with 510 additions and 0 deletions

37
app/batch/page.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { FileUp } from 'lucide-react';
export default function BatchPage() {
return (
<div className="min-h-screen p-8">
<div className="max-w-7xl mx-auto space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Batch Operations</h1>
<p className="text-muted-foreground">
Process multiple colors at once with CSV/JSON upload
</p>
</div>
<div className="flex items-center justify-center min-h-[400px]">
<div className="text-center space-y-4">
<FileUp className="h-16 w-16 mx-auto text-muted-foreground" />
<h2 className="text-2xl font-semibold">Coming Soon</h2>
<p className="text-muted-foreground max-w-md">
Batch operations will allow you to upload CSV or JSON files with multiple colors
and apply transformations to all of them at once.
</p>
<div className="text-sm text-muted-foreground">
<p className="font-semibold mb-2">Planned features:</p>
<ul className="space-y-1">
<li> Upload CSV/JSON color lists</li>
<li> Bulk format conversion</li>
<li> Apply operations to all colors</li>
<li> Export results in multiple formats</li>
<li> Progress tracking for large batches</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}