명암 대비 검사기

명암 대비 검사기란?

명암 대비 검사기는 텍스트와 배경 색상 간의 대비율을 측정하고 WCAG(웹 콘텐츠 접근성 지침) 기준 충족 여부를 실시간으로 확인하는 온라인 도구입니다. 저시력 사용자, 색각이상 사용자를 포함한 모든 사람이 웹 콘텐츠를 읽을 수 있도록 충분한 색상 대비를 확보하는 것은 웹 접근성의 핵심 요소입니다.

이 도구는 HEX, RGB 색상 코드 입력과 컬러 피커를 지원하며, 입력 즉시 대비율을 계산하여 WCAG 2.1의 AA 및 AAA 레벨 적합성을 표시합니다. 색맹/색약 시뮬레이션, 권장 색상 제안, 색상 조합 저장 기능까지 제공하여 접근성을 고려한 디자인을 쉽게 할 수 있습니다.

이런 상황에서 사용하세요

• 웹 개발 – 사이트 배포 전 버튼, 링크, 본문 텍스트의 색상 대비가 WCAG 기준을 충족하는지 검증
• UI/UX 디자인 – 브랜드 색상을 사용할 때 텍스트 가독성이 확보되는지 미리 확인
• 접근성 감사 – 기존 웹사이트의 색상 대비 문제를 찾아 수정하는 접근성 개선 작업
• 문서 제작 – PDF, 프레젠테이션, 보고서 등 디지털 문서의 텍스트 가독성 검토
• 앱 개발 – iOS, Android 앱의 색상 조합이 접근성 가이드라인을 준수하는지 확인
• 법적 준수 – 정부 기관, 교육 기관 등 WCAG 준수가 법적으로 요구되는 곳의 콘텐츠 검사
• 색각이상 대응 – 색맹, 색약 사용자에게도 정보가 전달되는지 시뮬레이션으로 확인

주요 기능

• 실시간 대비율 계산 – 색상을 입력하는 즉시 대비율이 계산됩니다. 21:1(최대)부터 1:1(최소)까지의 정확한 대비율을 표시합니다.
• WCAG 적합성 판정 – AA/AAA 레벨, 일반 텍스트/큰 텍스트 기준으로 4가지 항목의 통과 여부를 직관적으로 보여줍니다.
• 다양한 색상 입력 – HEX 코드 직접 입력, RGB 값 개별 입력, 시각적 컬러 피커를 모두 지원하여 편리하게 색상을 선택할 수 있습니다.
• 실시간 미리보기 – 선택한 텍스트/배경 색상 조합이 실제로 어떻게 보이는지 큰 텍스트와 일반 텍스트로 미리 확인할 수 있습니다.
• 색각이상 시뮬레이션 – 적색맹(Protanopia), 녹색맹(Deuteranopia), 청색맹(Tritanopia), 완전색맹(Achromatopsia) 4가지 유형의 색각이상 시점에서 색상 조합을 확인할 수 있습니다.
• 권장 색상 제안 – 현재 대비율이 부족할 때, WCAG AA 또는 AAA 기준을 충족하는 대안 색상을 자동으로 제안합니다.
• 색상 스왑 – 텍스트 색상과 배경 색상을 한 번에 교환하여 역전된 조합의 대비율도 빠르게 확인할 수 있습니다.
• CSS 코드 복사 – 검증된 색상 조합을 color: #000000; background-color: #FFFFFF; 형태의 CSS 코드로 바로 복사하여 프로젝트에 활용할 수 있습니다.
• 히스토리 저장 – 자주 사용하거나 검증된 색상 조합을 로컬에 저장하여 다음에 바로 불러올 수 있습니다. 최대 12개까지 저장됩니다.
• 랜덤 색상 생성 – 버튼 한 번으로 WCAG AA 기준을 충족하는 색상 조합을 자동으로 생성합니다. 다양한 색상 팔레트에서 랜덤으로 선택하여 매번 새로운 조합을 제안합니다.

사용 방법

1. 텍스트 색상 선택 – 왼쪽 “텍스트 색상” 영역에서 컬러 피커를 클릭하거나, HEX 코드(예: 333333) 또는 RGB 값을 직접 입력합니다.
2. 배경 색상 선택 – 오른쪽 “배경 색상” 영역에서 동일한 방법으로 배경색을 지정합니다. 중간의 화살표 버튼으로 두 색상을 교환할 수도 있습니다.
3. 결과 확인 – 상단 미리보기 영역에서 실제 텍스트 모습을 확인하고, 그 아래 대비율과 WCAG 적합성 판정 결과를 확인합니다.
4. 색각이상 확인 – 색각이상 시뮬레이션 섹션에서 다양한 색각이상 유형별로 색상이 어떻게 보이는지 확인합니다.
5. 저장 및 활용 – 적합한 색상 조합을 찾았다면 “저장” 버튼으로 히스토리에 저장하고, “CSS 복사” 버튼으로 코드를 복사하여 프로젝트에 적용합니다.

WCAG 색상 대비 기준 상세

대비율(Contrast Ratio)이란?

대비율은 두 색상의 상대 휘도(relative luminance) 비율로 계산됩니다. 가장 밝은 색(흰색)과 가장 어두운 색(검정)의 대비율은 21:1이며, 두 색이 동일하면 1:1입니다. WCAG에서는 이 대비율을 기준으로 텍스트의 가독성을 평가합니다.

WCAG 2.1 Level AA (최소 기준)

• 일반 텍스트 – 4.5:1 이상의 대비율 필요. 18px 미만 또는 14px 미만 굵은 글꼴이 해당됩니다.
• 큰 텍스트 – 3:1 이상의 대비율 필요. 18px(24px CSS) 이상 또는 14px(19px CSS) 이상 굵은 글꼴이 해당됩니다.
• UI 컴포넌트 – 버튼 테두리, 입력 필드, 아이콘 등 사용자 인터페이스 요소는 3:1 이상의 대비율이 필요합니다.

WCAG 2.1 Level AAA (향상된 기준)

• 일반 텍스트 – 7:1 이상의 대비율 필요. 가장 높은 수준의 가독성을 제공합니다.
• 큰 텍스트 – 4.5:1 이상의 대비율 필요. AA 레벨의 일반 텍스트 기준과 동일합니다.

법적으로는 대부분 AA 레벨 준수가 요구되지만, 더 넓은 사용자를 위해 AAA 레벨을 권장합니다.

큰 텍스트 정의

WCAG에서 “큰 텍스트”는 다음과 같이 정의됩니다:

• 일반 굵기: 18pt(24px) 이상
• 굵은 글꼴(Bold): 14pt(약 19px) 이상

큰 텍스트는 더 낮은 대비율에서도 읽기 쉽기 때문에 완화된 기준이 적용됩니다.

색각이상과 웹 접근성

색각이상 유형

• 적색맹(Protanopia) – 빨간색 원추세포가 없어 빨간색을 인식하지 못합니다. 남성의 약 1%가 해당됩니다.
• 녹색맹(Deuteranopia) – 녹색 원추세포가 없어 녹색을 인식하지 못합니다. 가장 흔한 색각이상으로 남성의 약 5%가 해당됩니다.
• 청색맹(Tritanopia) – 파란색 원추세포가 없어 파란색을 인식하지 못합니다. 매우 드물며 남녀 모두 약 0.01%가 해당됩니다.
• 완전색맹(Achromatopsia) – 모든 색상을 회색조로 인식합니다. 극히 드물며 약 30,000명 중 1명꼴입니다.

색각이상을 고려한 디자인 팁

• 빨간색과 녹색의 조합만으로 정보를 구분하지 마세요. 패턴, 아이콘, 텍스트 라벨을 함께 사용하세요.
• 충분한 명암 대비를 확보하면 색각이상 사용자도 밝기 차이로 구분할 수 있습니다.
• 링크에는 밑줄이나 다른 시각적 표시를 추가하여 색상 외의 방법으로도 구분되게 하세요.
• 차트나 그래프에서는 패턴, 라벨, 직접 수치 표시를 활용하세요.

실전 활용 팁

• 브랜드 색상 검증 – 회사 CI 색상을 텍스트와 배경으로 사용할 때 반드시 대비율을 확인하세요. 브랜드 가이드라인에 접근성 검증 결과를 포함하는 것이 좋습니다.
• 버튼 상태별 확인 – 버튼의 기본, 호버, 포커스, 비활성화 상태 각각에 대해 대비율을 확인하세요.
• 다크 모드 대응 – 라이트 모드와 다크 모드 모두에서 대비율을 확인하세요. 같은 텍스트 색상이 배경에 따라 다른 결과를 보일 수 있습니다.
• 반투명 배경 주의 – 반투명 오버레이 위의 텍스트는 배경 이미지에 따라 가독성이 달라질 수 있으므로 최악의 경우를 가정하여 검증하세요.
• 실제 환경 테스트 – 대비율 통과가 실제 가독성을 보장하지는 않습니다. 다양한 기기와 조명 환경에서도 테스트하세요.

자주 묻는 질문