접근성 색상 조합 테스트

## 95. 접근성 색상 조합 테스트 ``` Define accessible color combinations with WCAG compliance: **WCAG Contrast Requirements**: | Level | Normal Text (<18px) | Large Text (≥18px bold, ≥24px) | |-------|--------------------|---------------------------------| | AA | 4.5:1 minimum | 3:1 minimum | | AAA | 7:1 minimum | 4.5:1 minimum | **Light Mode - Text on White (#FFFFFF)**: | Color | Hex | Ratio | AA Normal | AA Large | AAA | |-------------|---------|--------|-----------|----------|-----| | gray-950 | #030712 | 20.8:1 | ✓ | ✓ | ✓ | | gray-900 | #111827 | 16.9:1 | ✓ | ✓ | ✓ | | gray-800 | #1f2937 | 12.6:1 | ✓ | ✓ | ✓ | | gray-700 | #374151 | 10.1:1 | ✓ | ✓ | ✓ | | gray-600 | #4b5563 | 7.3:1 | ✓ | ✓ | ✓ | | gray-500 | #6b7280 | 5.3:1 | ✓ | ✓ | ✗ | | gray-400 | #9ca3af | 3.1:1 | ✗ | ✓ | ✗ | | gray-300 | #d1d5db | 1.8:1 | ✗ | ✗ | ✗ | **Recommended Text Colors**: - Primary text: gray-900 (#111827) - 16.9:1 ✓ AAA - Secondary text: gray-600 (#4b5563) - 7.3:1 ✓ AAA - Tertiary/muted: gray-500 (#6b7280) - 5.3:1 ✓ AA only - Disabled text: gray-400 with visual indicator (not color alone) **Brand Colors on White** (verify your brand): | Color | Hex | Ratio | Status | Recommendation | |--------------|---------|-------|--------|--------------------------| | blue-600 | #2563eb | 4.5:1 | ✓ AA | Safe for links, buttons | | blue-700 | #1d4ed8 | 6.1:1 | ✓ AA | Better for small text | | green-600 | #16a34a | 3.2:1 | ✗ | Use green-700 instead | | green-700 | #15803d | 4.6:1 | ✓ AA | Safe for success text | | red-600 | #dc2626 | 4.0:1 | ✗ | Use red-700 for text | | red-700 | #b91c1c | 5.5:1 | ✓ AA | Safe for error text | | amber-600 | #d97706 | 3.1:1 | ✗ | Use amber-700 or darker | | amber-700 | #b45309 | 4.6:1 | ✓ AA | Safe for warning text | **Dark Mode - Text on gray-900 (#111827)**: | Color | Hex | Ratio | AA Normal | AA Large | |-------------|---------|--------|-----------|----------| | white | #ffffff | 16.9:1 | ✓ | ✓ | | gray-50 | #f9fafb | 15.5:1 | ✓ | ✓ | | gray-100 | #f3f4f6 | 14.1:1 | ✓ | ✓ | | gray-200 | #e5e7eb | 11.6:1 | ✓ | ✓ | | gray-300 | #d1d5db | 9.5:1 | ✓ | ✓ | | gray-400 | #9ca3af | 5.7:1 | ✓ | ✓ | | gray-500 | #6b7280 | 3.4:1 | ✗ | ✓ | **Interactive Element Colors**: **Focus Rings**: - Light mode: brand-500 with 2px offset - Dark mode: brand-400 or lighter variant - Ensure 3:1 contrast against adjacent colors **Links**: - Default: blue-600 (#2563eb) on white - Visited: purple-600 (#9333ea) - distinguish from unvisited - Always underline or provide non-color indicator **Buttons**: | Variant | Background | Text | Ratio | |-------------|------------|---------|-------| | Primary | brand-600 | white | ≥4.5:1| | Secondary | gray-100 | gray-900| 16.9:1| | Destructive | red-600 | white | 4.5:1 | | Ghost | transparent| gray-700| 10.1:1| **Form States**: - Error border: red-500 (#ef4444) - 3.9:1 against white - Error text: red-700 (#b91c1c) - 5.5:1 ✓ AA - ... (내용이 길어 일부만 표시됩니다)