WCAG 명암비 확인
WCAG AA 및 AAA 접근성 기준 준수를 위한 색상 명암비를 확인합니다
입력 및 옵션
빠른 프리셋 및 예시
브라우저에서 실행됩니다. 입력한 내용은 이 기기에만 남습니다.
결과
결과를 보려면 값을 입력하세요.
WCAG 명암비 확인 소개
이 무료 온라인 WCAG 명암비 확인 도구로 디자이너, 개발자, 접근성 전문가가 텍스트와 배경색 조합이 WCAG 2.1 명암비 요건을 충족하는지 검증할 수 있습니다. 접근성을 갖춘 색 대비는 저시력이나 색각 이상이 있는 사용자를 포함한 모든 사용자가 웹 콘텐츠를 읽고 이용할 수 있도록 보장합니다.
이 도구는 W3C 공식 상대 휘도 공식을 사용해 두 색 사이의 명암비를 계산하고, 일반 텍스트와 큰 텍스트 모두에 대해 해당 조합이 WCAG AA 및 WCAG AAA 준수 수준을 통과하는지 즉시 알려 줍니다. 모든 계산은 브라우저에서 실시간으로 수행되며 어떤 데이터도 서버로 전송되지 않습니다.
접근성 감사를 진행하든, 새 인터페이스를 디자인하든, 기존 콘텐츠의 준수 여부를 검토하든, 이 명암비 확인 도구는 표준에 맞는 정확한 결과와 함께 실시간 텍스트 미리보기, 기준에 미달하는 색 조합을 고치기 위한 실용적인 제안을 제공합니다.
WCAG 명암비 요건 이해하기
월드 와이드 웹 컨소시엄(W3C)이 발표한 웹 접근성의 국제 표준인 웹 콘텐츠 접근성 지침(WCAG)은 시각 능력이 다양한 사용자도 텍스트를 읽을 수 있도록 구체적인 명암비 기준을 정의합니다.
- WCAG AA 수준(일반 텍스트): 최소 명암비 4.5:1이 필요합니다. 본문, 문단, 그리고 18pt(24px)보다 작거나 14pt 굵은 글씨(굵은 18.66px)보다 작은 모든 텍스트에 적용됩니다.
- WCAG AA 수준(큰 텍스트): 최소 명암비 3:1이 필요합니다. 큰 텍스트는 18pt(24px) 이상이거나 14pt 굵은 글씨(굵은 18.66px) 이상인 텍스트를 말합니다.
- WCAG AAA 수준(일반 텍스트): 최소 명암비 7:1이 필요합니다. 일반 크기 텍스트에 대한 가장 높은 수준의 접근성 준수입니다.
- WCAG AAA 수준(큰 텍스트): AAA 준수 수준에서 큰 텍스트에는 최소 명암비 4.5:1이 필요합니다.
최소 WCAG AA를 충족하는 것은 접근성 있는 웹 디자인의 기본 기준으로 간주되며, 미국 장애인법(ADA), 유럽 접근성법, 재활법 508조를 비롯해 전 세계 여러 법적 체계에서 요구합니다. WCAG AAA는 가능한 경우 권장되는 한 단계 높은 접근성을 제공합니다.
명암비 계산 방법
두 색 사이의 명암비는 WCAG 2.1 사양에 정의된 각 색의 상대 휘도를 사용해 구합니다. 상대 휘도는 색의 지각 밝기를 0(가장 어두운 검정)부터 1(가장 밝은 흰색)까지의 척도로 나타냅니다.
계산은 세 단계로 이루어집니다. 먼저 각 색상 채널(빨강, 초록, 파랑)을 255로 나누어 8비트 sRGB 값(0-255)을 정규화된 sRGB 값(0-1)으로 변환합니다. 다음으로 각 정규화 값에 감마 보정을 적용합니다: 값이 0.04045 이하이면 12.92로 나누고, 그렇지 않으면 ((value + 0.055) / 1.055) ^ 2.4 공식으로 변환합니다. 마지막으로 선형화된 채널 값을 가중 계수로 합칩니다: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
최종 명암비는 (L1 + 0.05) / (L2 + 0.05)로 계산하며, L1은 더 밝은 색의 상대 휘도, L2는 더 어두운 색의 상대 휘도입니다. 결과값은 1:1(대비 없음, 동일한 색)부터 21:1(최대 대비, 순수한 흰색 위의 순수한 검정)까지입니다.
주요 기능
- W3C 공식 WCAG 2.1 휘도 공식을 사용한 실시간 명암비 계산
- 일반 텍스트와 큰 텍스트 모두에 대한 WCAG AA 및 AAA 준수 수준의 통과/실패 표시
- 전경색과 배경색 모두에 대한 대화형 색상 선택기와 HEX 입력
- 클릭 한 번으로 색을 바꿔 반전된 색 조합 테스트
- 일반적인 접근성 조합을 포함한 열 가지 빠른 프리셋 색 조합
- 일반 크기와 큰 크기 텍스트에서 색이 어떻게 보이는지 보여 주는 실시간 텍스트 미리보기
- 현재 조합이 기준에 미달할 때 통과하는 가장 가까운 전경색을 자동으로 제안
- 전경색과 배경색 모두의 휘도 상세 정보
- 어떤 환경에서도 편안하게 쓸 수 있는 완전한 다크 모드 지원
- 모든 처리가 브라우저에서 로컬로 실행되며 외부 서버로 데이터가 전송되지 않음
WCAG 명암비 확인 사용 방법
- 전경색 설정: 색상 선택기 사각형을 클릭하거나 입력란에 HEX 값(예: #1A1A2E)을 입력하여 텍스트 색, 즉 전경색을 설정합니다.
- 배경색 설정: 같은 방식으로 색상 선택기나 HEX 입력을 사용해 텍스트 뒤의 배경색을 설정합니다.
- 결과 확인: 색을 바꾸는 즉시 명암비와 WCAG 네 가지 수준의 통과/실패 결과가 표시됩니다.
- 실시간 미리보기 확인: 아래로 스크롤하면 선택한 색 조합으로 일반 크기와 큰 크기의 실제 텍스트가 어떻게 보이는지 확인할 수 있습니다.
- 제안 적용: 조합이 WCAG AA를 통과하지 못하면 권장 전경색이 표시됩니다. 적용을 클릭하여 사용하세요.
- 프리셋 사용: 빠른 프리셋으로 접근성이 좋거나 나쁜 것으로 잘 알려진 색 조합을 테스트해 보세요.
- 색상 교체: 색상 교체 버튼을 클릭하면 선택한 전경색과 배경색이 서로 바뀝니다.
접근성에서 색 대비가 중요한 이유
전 세계적으로 대략 남성 12명 중 1명과 여성 200명 중 1명이 어떤 형태로든 색각 이상을 가지고 있습니다. 이 밖에도 수백만 명이 저시력, 노화에 따른 시력 변화, 화면 반사 같은 상황적 제약을 겪습니다. 충분한 색 대비는 이 모든 사용자가 웹 콘텐츠를 이용할 수 있게 하는 가장 효과적이고 간단한 방법 중 하나입니다.
텍스트와 배경 사이의 낮은 대비는 웹 감사에서 가장 흔히 발견되는 접근성 문제 중 하나입니다. 디자인 및 개발 과정에서 WCAG 명암비 확인 도구를 사용하면 팀이 대비 문제를 출시 전에 찾아 고칠 수 있어 개선 비용을 줄이고 처음부터 접근성 규정을 준수할 수 있습니다.
좋은 색 대비는 장애가 없는 사용자에게도 도움이 됩니다. 밝은 햇빛 아래, 품질이 낮은 디스플레이, 주의가 산만한 환경에서도 가독성이 좋아집니다. 접근성 있는 디자인은 모두에게 더 나은 경험을 만드는 포용적인 디자인입니다.
자주 묻는 질문
WCAG AA와 AAA의 차이는 무엇인가요?
WCAG AA는 대부분의 웹사이트와 애플리케이션에 권장되는 표준 준수 수준입니다. 일반 텍스트에는 최소 명암비 4.5:1, 큰 텍스트에는 3:1이 필요합니다. WCAG AAA는 더 엄격한 수준으로 일반 텍스트에 7:1, 큰 텍스트에 4.5:1이 필요합니다. AAA를 모든 콘텐츠에 항상 달성할 수는 없지만, 핵심 텍스트 요소와 최대한의 가독성이 필요한 곳에는 권장됩니다.
WCAG에서 큰 텍스트는 무엇을 말하나요?
WCAG 2.1에 따르면 큰 텍스트는 18포인트(약 24 CSS 픽셀) 이상이거나, 굵은 글씨의 경우 14포인트(약 18.66 CSS 픽셀) 이상인 텍스트를 말합니다. 큰 텍스트는 크기 자체로 읽기가 더 쉬우므로 명암비 요건이 더 낮습니다.
이 도구는 투명도나 알파 채널을 지원하나요?
이 도구는 불투명한 HEX 색상(6자리 HEX 코드)에서 작동합니다. 투명도가 있는 색상은 실제 대비가 투명 레이어 뒤의 배경에 따라 달라지며, 이는 페이지 곳곳에서 다를 수 있습니다. 반투명 텍스트를 확인하려면 먼저 투명 오버레이가 실제 배경 위에서 만들어 내는 실효 단색을 계산한 다음, 그 단색을 여기서 테스트하세요.
WCAG 준수는 법적으로 요구되나요?
많은 관할 지역에서 그렇습니다. 미국의 ADA, EU의 유럽 접근성법, 캐나다의 온타리오 장애인 접근성법(AODA), 그리고 다른 나라의 유사한 법령이 디지털 접근성의 표준으로 WCAG 2.1 AA 수준을 참조하거나 포함하고 있습니다. 이러한 요건을 충족하지 못한 조직은 법적 조치, 벌금, 평판 손상을 겪을 수 있습니다.