색상 대비 검사기

색상 대비 검사기는 디자이너, 개발자 및 접근성 전문가가 색상 조합이 WCAG 2.x 접근성 표준을 충족하는지 확인하는 데 도움을 줍니다. 텍스트와 배경색 사이의 적절한 대비는 가독성에 필수적이며, 특히 저시력자나 색각 이상이 있는 사용자에게 매우 중요합니다.

색상 대비율이란 무엇인가요?

색상 대비율은 두 색상 사이의 지각된 휘도(밝기) 차이를 측정합니다. 범위는 1:1(동일한 색상, 대비 없음)에서 21:1(최대 대비: 흰색 바탕에 검은색)까지입니다. 비율은 두 색상의 상대 휘도 값을 기반으로 하는 WCAG 2.x 공식을 사용하여 계산됩니다.

WCAG 대비 요구 사항

웹 콘텐츠 접근성 가이드라인(WCAG)은 색상 대비에 대해 두 가지 준수 수준을 정의합니다.

어떤 것이 "큰 텍스트"에 해당하나요?

WCAG는 큰 텍스트를 최소 18포인트(24px) 일반 굵기 또는 최소 14포인트(18.66px) 굵은 글씨로 정의합니다. 큰 문자는 태생적으로 읽기 쉽기 때문에 대비 요구 사항이 더 낮습니다.

이 도구 사용 방법

1. 색상 입력: 색상 선택기를 사용하거나 헥사 코드를 입력하여 전경색(텍스트)과 배경색을 선택하거나 프리셋 예시를 클릭합니다.
2. 라이브 미리보기 확인: 실제 UI 요소(제목, 본문 텍스트, 버튼, 링크, 양식 입력)에 색상이 적용된 모습을 즉시 확인합니다.
3. "대비 확인" 클릭: 일반 텍스트, 큰 텍스트 및 UI 구성 요소에 대한 정확한 대비율과 WCAG 준수 상태를 확인합니다.
4. 제안 사항 적용: 색상이 기준을 통과하지 못하는 경우 자동 제안 기능을 사용하여 접근 가능한 가장 가까운 대안을 찾습니다.

결과 이해하기

대비율

메인 숫자(예: 8.59:1)는 두 색상이 얼마나 다르게 보이는지 나타냅니다. 숫자가 높을수록 가독성이 좋습니다. 최소 4.5:1 이상의 비율은 대부분의 사용자가 일반 크기의 텍스트를 편안하게 읽을 수 있도록 보장합니다.

종합 등급

• AAA (매우 우수): 강화된 기준(7:1 이상)을 포함한 모든 WCAG 기준을 통과합니다. 최상의 접근성을 제공합니다.
• AA (우수): 표준 요구 사항(4.5:1 이상)을 통과합니다. 대부분의 국가에서 법적 요구 사항을 충족합니다.
• AA Large (부분 통과): 큰 텍스트 또는 UI 구성 요소(3:1 이상)에 대해서만 기준을 통과합니다. 일반 텍스트는 기준 미달입니다.
• Fail (미흡): 어떤 WCAG 대비 기준도 충족하지 못합니다. 많은 사용자가 텍스트를 읽기 어려워할 것입니다.

색상 제안

색상이 대비 요구 사항을 충족하지 못할 때, 도구는 색조와 채도를 유지하면서 밝기를 조정하여 가장 가까운 접근 가능한 색상을 제안합니다. 클릭 한 번으로 제안된 색상을 적용할 수 있습니다.

색상 대비가 중요한 이유

• 법적 준수: 많은 국가에서 법률(ADA, Section 508, EN 301 549, EAA)에 따라 WCAG AA 준수를 요구합니다.
• 사용자 경험: 좋은 대비는 장애가 있는 사용자뿐만 아니라 모든 사용자의 가독성을 향상시킵니다.
• SEO 영향: 검색 엔진은 점점 더 접근성을 검색 순위 요소로 고려하고 있습니다.
• 잠재 고객 도달: 남성 12명 중 1명, 여성 200명 중 1명은 색각 이상을 가지고 있습니다.

접근 가능한 색상 선택을 위한 팁

• 충분한 대비를 가진 상태에서 시작한 다음 디자인을 다듬으세요. 나중에 대비 문제를 수정하는 것이 훨씬 더 어렵습니다.
• 테스트 없이 유색 배경 위에 유색 텍스트를 배치하지 마세요. "다르게 보이는" 색상이라도 대비 검사를 통과하지 못할 수 있습니다.
• 흰색 배경 위의 연한 회색 텍스트는 가장 흔한 접근성 실패 사례 중 하나입니다.
• 감사 단계에서만이 아니라 디자인 과정 중에 이 도구를 사용하세요. 문제를 일찍 발견하면 상당한 재작업을 줄일 수 있습니다.
• 정보를 전달할 때 색상에만 의존하지 마세요. 모양, 패턴 또는 라벨을 함께 사용하세요.

자주 묻는 질문

색상 대비율이란 무엇인가요?

색상 대비율은 두 색상 사이의 지각된 휘도 차이를 측정합니다. 범위는 1:1(대비 없음, 동일한 색상)에서 21:1(최대 대비, 흰색 바탕에 검은색)까지입니다. 비율은 WCAG 2.x 공식인 (L1 + 0.05) / (L2 + 0.05)를 사용하여 계산되며, 여기서 L1은 더 밝은 색상의 상대 휘도이고 L2는 더 어두운 색상의 상대 휘도입니다.

WCAG AA 준수를 위해 필요한 대비율은 얼마인가요?

WCAG AA는 일반 텍스트(18pt 미만 또는 14pt 굵게 미만)의 경우 최소 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 이상 굵게)의 경우 3:1의 대비율을 요구합니다. 비텍스트 UI 구성 요소 및 그래픽 개체의 경우 최소 기준은 3:1입니다.

WCAG AA와 AAA의 차이점은 무엇인가요?

WCAG AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1을 요구하는 표준 준수 수준입니다. WCAG AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구하는 강화된 수준입니다. AA는 대부분의 접근성 법률에서 요구하는 사항이며, AAA는 권장되지만 일반적으로 웹사이트 전체에 필수적으로 요구되지는 않습니다.

WCAG 가이드라인에서 큰 텍스트란 무엇을 의미하나요?

WCAG 가이드라인에서 큰 텍스트는 최소 18포인트(24px)의 일반 굵기 또는 최소 14포인트(약 18.66px)의 굵은 글씨로 정의됩니다. 큰 문자는 낮은 대비 수준에서도 읽기 쉽기 때문에 대비 요구 사항이 더 낮습니다.

낮은 색상 대비를 해결하는 방법은 무엇인가요?

낮은 색상 대비를 해결하려면: (1) 텍스트 색상을 어둡게 하거나 배경을 밝게 합니다(또는 그 반대). (2) 기준을 통과하는 가장 가까운 색상을 자동으로 찾아주는 색상 제안 기능을 사용합니다. (3) 폰트 크기를 키워 요구 사항이 낮은 '큰 텍스트'로 분류되게 합니다. (4) 정보를 전달할 때 색상에만 의존하지 않도록 합니다.

색상 대비는 텍스트에만 적용되나요?

아니요. WCAG 2.1 성공 기준 1.4.11에 따라 양식 입력 테두리, 아이콘 및 콘텐츠 이해에 필수적인 그래픽 개체를 포함한 비텍스트 요소에 대해서도 최소 3:1의 대비율이 필요합니다. 이는 버튼, 입력 필드 및 포커스 표시기와 같은 UI 구성 요소에 적용됩니다.

추가 리소스

• WCAG 2.1: 대비 이해하기 (최소)
• WCAG 2.1: 대비 이해하기 (강화)
• 웹 콘텐츠 접근성 지침 - 위키백과