🎨 색상 대비 체커🎨 Color Contrast Checker
WCAG 접근성 기준에 따른 전경·배경 색상 대비를 실시간으로 확인합니다.Check foreground/background color contrast against WCAG accessibility standards in real time.
대비비Contrast ratio
—
AA (일반 텍스트 4.5:1)(normal text 4.5:1)
—
AAA (강화 기준 7:1)(enhanced 7:1)
—
① UI 컴포넌트 미리보기UI Component Preview
Badge
링크 텍스트Link text
일반 텍스트Body text
큰 제목Heading
입력 필드Input
버튼Button
뱃지Badge
링크Link
텍스트Text
제목Heading
입력창Input
② 자동 색상 수정 제안Auto Color Fix Suggestions
현재 색상이 AA 기준을 통과하지 못하면 가장 가까운 통과 색상을 자동으로 제안합니다. 클릭하면 바로 적용됩니다.If the current colors fail the AA standard, the closest passing color is suggested automatically. Click to apply.
③ 색각 이상 시뮬레이션Color Vision Simulation
색각 이상 유형별로 색상이 어떻게 보이는지 확인합니다. 전 세계 인구의 약 8%(남성)가 색각 이상을 가집니다.Preview how colors appear under different types of color vision deficiency. About 8% of males worldwide are affected.
④ 카테고리별 프리셋Preset Combinations
📋 WCAG 2.1 대비 기준 요약WCAG 2.1 Contrast Requirements
| 기준Level | 적용 대상Applies to | 최소 비율Min ratio |
|---|---|---|
| AA | 일반 텍스트 (18pt 미만 또는 14pt Bold 미만)Normal text (below 18pt or 14pt Bold) | 4.5 : 1 |
| AA | 큰 텍스트 (18pt 이상 또는 14pt Bold 이상)Large text (18pt+ or 14pt Bold+) | 3.0 : 1 |
| AA | UI 컴포넌트, 아이콘, 그래픽UI components, icons, graphics | 3.0 : 1 |
| AAA | 일반 텍스트 (강화 기준)Normal text (enhanced) | 7.0 : 1 |
| AAA | 큰 텍스트 (강화 기준)Large text (enhanced) | 4.5 : 1 |