liminfoColor Contrast Checker
색상 대비 검사기 - WCAG AA/AAA 대비비 판정
미리보기 텍스트 (24px Bold)
미리보기 텍스트 (16px Normal)
미리보기 텍스트 (12px Small)
대비비 (Contrast Ratio)
21.00:1
AA 일반 텍스트
최소 4.5:1
AA 큰 텍스트 (18pt+)
최소 3:1
AAA 일반 텍스트
최소 7:1
AAA 큰 텍스트 (18pt+)
최소 4.5:1
Color Contrast Checker 소개
색상 대비 검사기는 전경색(텍스트)과 배경색 사이의 WCAG 2.1 대비비를 계산하고, 네 가지 WCAG 준수 수준에 대한 통과 여부를 평가합니다: AA 일반 텍스트(≥4.5:1), AA 큰 텍스트(≥3:1), AAA 일반 텍스트(≥7:1), AAA 큰 텍스트(≥4.5:1). 실시간 텍스트 미리보기는 선택한 색상을 그대로 사용하여 세 가지 크기(24px 볼드, 16px 일반, 12px 소형)로 샘플 텍스트를 렌더링하므로, 코드를 작성하기 전에 가독성을 확인할 수 있습니다.
프론트엔드 개발자, UX 디자이너, 접근성 감사자, 제품 팀은 버튼 스타일, 타이포그래피 시스템, 폼 레이블, 내비게이션 메뉴 등 색상 배경 위에 텍스트가 있는 모든 UI 요소를 설계할 때 이 도구를 사용합니다. WCAG 2.1 성공 기준 1.4.3은 AA 준수를 목표로 하는 제품에서 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 대비비를 요구합니다.
기술적으로 검사기는 두 16진수 값을 IEC 61966-2-1 sRGB 감마 함수와 WCAG에 명시된 휘도 계수(0.2126 R, 0.7152 G, 0.0722 B)를 사용하여 선형화된 상대 휘도로 변환합니다. 대비비 공식은 (L_밝음 + 0.05) / (L_어두움 + 0.05)이며, L 값은 0(검정)에서 1(흰색) 사이의 상대 휘도입니다. 두 색상 입력에는 16진수 텍스트 필드와 함께 기본 색상 선택기가 포함되어 있습니다.
주요 기능
- 16진수 텍스트 필드와 기본 색상 선택기가 포함된 전경색·배경색 입력
- 선택한 색상으로 24px 볼드, 16px 일반, 12px 소형 텍스트를 보여주는 실시간 미리보기
- 정밀한 참조를 위한 소수점 형식의 대비비 표시 (예: 7.54:1)
- PASS/FAIL 배지를 포함한 네 가지 WCAG 준수 확인: AA 일반, AA 큰, AAA 일반, AAA 큰
- 교육용 참고를 위해 각 준수 수준의 최소 비율 기준 표시
- WCAG sRGB 휘도 공식을 사용한 실시간 재계산 — 입력 즉시 결과 업데이트
- 100% 클라이언트 사이드 처리 — 어떤 서버에도 데이터를 전송하지 않습니다
- 모바일·태블릿·데스크톱에서 다크 모드 호환 및 완전 반응형
자주 묻는 질문
WCAG 색상 대비란 무엇인가요?
WCAG(웹 콘텐츠 접근성 지침)는 저시력이나 색각 차이가 있는 사람들의 가독성을 보장하기 위해 텍스트와 배경 사이의 최소 대비비를 정의합니다. 대비비는 두 색상의 상대 휘도로 계산되며 1:1(대비 없음)에서 21:1(흰색 배경에 검은색 텍스트)까지 범위를 가집니다.
WCAG AA를 통과하려면 어떤 대비비가 필요한가요?
WCAG AA 준수를 위해서는 일반 크기 텍스트(18pt 정규 또는 14pt 볼드 미만, 약 24px)에 최소 4.5:1의 대비비가 필요합니다. 큰 텍스트(18pt 이상, 또는 14pt 볼드 이상 — 약 24px 볼드 또는 18.67px 정규)에는 3:1만 필요합니다. WCAG AA는 웹 및 모바일 접근성에서 가장 일반적으로 요구되는 수준입니다.
WCAG AAA란 무엇이며 언제 목표로 삼아야 하나요?
WCAG AAA는 가장 높은 접근성 수준으로, 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 시력이 크게 감소한 사용자나 고위험 상황(예: 정부 포털, 의료)을 위한 텍스트에 권장됩니다. 단, 페이지의 모든 텍스트에 대해 AAA 준수를 달성하는 것은 다채로운 디자인에서 종종 비현실적입니다.
대비비는 어떻게 계산되나요?
각 16진수 색상은 먼저 상대 휘도 L로 변환됩니다: 각 RGB 채널(0~255)이 0~1로 정규화되고, sRGB 감마 곡선에서 선형화된 후 L = 0.2126×R + 0.7152×G + 0.0722×B로 결합됩니다. 대비비는 (max(L1, L2) + 0.05) / (min(L1, L2) + 0.05)입니다. +0.05 오프셋은 순수한 검정에서의 0으로 나누는 것을 방지합니다.
WCAG에서 "큰 텍스트"란 무엇인가요?
WCAG는 큰 텍스트를 일반 굵기에서 18포인트(24px) 이상, 또는 볼드 굵기에서 14포인트(약 18.67px) 이상으로 정의합니다. 실제로는 일반적인 크기의 제목(h1~h3)과 대형 UI 레이블이 대개 큰 텍스트에 해당하고, 본문과 캡션은 해당하지 않습니다. 큰 텍스트 기준은 더 낮은 요구 대비비(AA의 경우 3:1)를 가집니다.
색상이 WCAG AA를 통과하지 못할 때 수정 방법은?
가장 직접적인 수정 방법은 전경색을 어둡게 하거나 배경색을 밝게 하는 것입니다(또는 다크 모드 디자인의 경우 그 반대). 두 색상 간의 휘도 차이를 늘리면 대비비가 높아집니다. 이 도구를 사용하면 16진수 값을 조정하고 새 비율을 즉시 확인하여 빠르게 반복할 수 있습니다.
다크 모드 대비 검사에도 사용할 수 있나요?
네. 배경 필드에 다크 모드 배경색을 입력하고 전경 필드에 의도한 텍스트 색상을 입력하세요. 이 도구는 배경이 밝든 어둡든 동일한 방식으로 대비비와 WCAG 결과를 계산합니다. 라이트 모드와 다크 모드 조합을 따로 확인하는 것이 좋습니다.
아이콘이나 UI 테두리 같은 비텍스트 요소도 검사할 수 있나요?
WCAG 성공 기준 1.4.11(비텍스트 대비)은 사용자 인터페이스 구성 요소(버튼, 폼 입력)와 그래픽 개체(아이콘, 차트)에 인접 색상 대비 최소 3:1을 요구합니다. 구성 요소와 인접 배경의 색상을 입력하여 이 도구로 해당 검사를 수행할 수 있습니다. 단, 표준 텍스트 대비 기준(1.4.3)은 비텍스트 요소에는 적용되지 않습니다.