접근성을 위한 색상 대비를 확인하는 방법

약 12명 중 1명의 남성과 200명 중 1명의 여성이 어떤 형태의 색각 이상을 가지고 있습니다. 수백만 명의 다른 사람들은 저시력, 노화하는 시력 또는 햇빛에서 화면을 보고 있습니다. 텍스트가 배경과 충분한 대비가 없다면 이러한 사람들은 그것을 읽을 수 없습니다.

색상 대비는 « 부가 기능 »이 아닙니다 — 이는 핵심 접근성 요구 사항입니다.

WCAG가 요구하는 것

웹 콘텐츠 접근성 지침(WCAG)은 텍스트와 배경 사이의 최소 대비 비율을 정의합니다:

« 큰 텍스트 »는 굵은 18px 또는 일반 24px 이상을 의미합니다.

대비 비율은 1:1(대비 없음 — 흰색 위 흰색)에서 21:1(최대 대비 — 흰색 위 검은색)까지 범위입니다.

대비를 확인하는 방법

1. 색상 선택 — HEX 코드, RGB 값 또는 선택기를 통해 텍스트 색상(전경)과 배경 색상을 입력하세요.
2. 결과 확인 — 도구가 즉시 대비 비율과 조합이 일반 및 큰 텍스트에 대해 WCAG AA 및 AAA를 통과하는지 표시합니다.
3. 필요한 경우 조정 — 대비가 실패하면 필요한 수준에 도달할 때까지 텍스트를 어둡게 하거나 배경을 밝게 하세요(또는 그 반대).

일반적인 대비 오류

흰색 위 밝은 회색 텍스트 — #ffffff의 #999999는 단지 2.8:1 비율입니다. 이는 WCAG AA를 실패합니다. 완벽한 시력을 가진 디자이너에게는 « 깔끔하게 » 보일 수 있지만 많은 사람들에게는 읽을 수 없습니다.

컬러 배경 위 컬러 텍스트 — 흰색 텍스트가 있는 파란색 버튼은 종종 통과하지만, 흰색 텍스트가 있는 녹색 버튼은 그렇지 않습니다. 항상 확인하세요 — 대비 비율을 눈으로 판단할 수 없습니다.

플레이스홀더 텍스트 — 필드 플레이스홀더 텍스트는 대비가 약한 것으로 악명 높습니다. WCAG가 엄격하게 요구하지 않더라도 사용자는 여전히 그것을 읽어야 합니다.

다크 모드 — 디자이너는 종종 « 미묘한 » 모양을 위해 어두운 회색 위 중간 회색을 사용합니다. 이것은 자주 대비 검사에 실패합니다.

팁

• 모든 텍스트/배경 조합 확인 — 아무것도 가정하지 마세요. 경험 많은 디자이너조차도 실패하는 조합에 놀랍니다.
• 두 테마 테스트 — 사이트에 라이트 모드와 다크 모드가 있는 경우 둘 다에서 대비를 확인하세요. 흰색에서 작동하는 색상이 어두운 회색에서 실패할 수 있습니다.
• 브랜드 색상을 신중하게 사용 — 브랜드 파란색이 텍스트 색상으로 실패하면 « 큰 텍스트 » 임계값(3:1)이 적용되는 더 큰 요소(버튼, 헤더)에 사용하고 본문 텍스트에는 더 어두운 색조를 사용하세요.
• 색상에만 의존하지 마세요 — 충분한 대비 외에도 절대 색상만으로 정보를 전달하지 마세요. 보완으로 아이콘, 라벨 또는 패턴을 사용하세요.