색상 명도 대비 검사기

사용 방법

1. 왼쪽에 전경 HEX(텍스트·기호 색상), 오른쪽에 배경 HEX를 입력합니다.
2. 네이티브 컬러 피커, 직접 입력, 디자인 도구에서 붙여넣기 모두 지원. 3자리 약식(#abc)은 6자리로 자동 확장됩니다.
3. 대비비가 실시간 업데이트됩니다 — 예: 12.6 : 1, AA / AAA 통과 배지 표시.
4. 세 개의 상태 카드가 결과를 본문, 큰 글자, UI 구성요소로 나누어 AA / AAA를 각각 표시합니다.
5. 본문 AA(4.5 : 1)가 실패하면 수정 제안 카드가 나타나며, 제안 적용 버튼 한 번으로 색상은 유지하고 명도만 조정합니다.

WCAG 대비비 공식

WCAG 2.x의 대비비는 두 색상의 상대 휘도로 계산합니다. 각 sRGB 채널을 분할 함수로 gamma 디코딩하고, 0.2126·R + 0.7152·G + 0.0722·B로 가중하여 휘도를 구한 뒤, 비율은 (L1 + 0.05) / (L2 + 0.05)(L1은 더 밝은 쪽)입니다. 값의 범위는 1(대비 없음)부터 21(순수 검정/순수 흰색)까지입니다.

세 가지 단계: 본문 / 큰 글자 / UI

WCAG 2는 사용 사례별로 목표를 나눕니다:

• 본문 (성공 기준 1.4.3) — AA ≥ 4.5 : 1, AAA ≥ 7 : 1. 18 px 미만 보통 또는 14 px 미만 굵은 글자에 적용됩니다.
• 큰 글자 — AA ≥ 3 : 1, AAA ≥ 4.5 : 1. 18.66 px 굵은 글자 이상 또는 24 px 보통 이상에 적용됩니다.
• UI 구성요소 및 그래픽 (성공 기준 1.4.11) — ≥ 3 : 1. 테두리, 포커스 링, 아이콘, 차트 선 등 비텍스트 시각 요소에 적용됩니다. WCAG 2는 이 영역에 AAA를 규정하지 않습니다.

”색상은 유지, 명도만 조정”의 이유

브랜드 컬러와 디자인 토큰은 휘도가 아닌 색상 정체성으로 선택됩니다. 대비가 부족할 때 검정이나 흰색으로 무작정 바꾸면 시각 언어가 깨질 수 있습니다. 본 도구는 전경의 OKLCH 명도 축(지각적으로 균일)을 따라 이동하면서 원래 색상과 채도를 유지하고, 현재 배경에 대해 4.5 : 1을 처음으로 만족하는 명도에서 멈춥니다. 결과는 원본에 가장 가까우면서 본문 AA를 통과하는 색입니다. 해당 색상이 sRGB 색역 안에서 목표에 도달하지 못하면, 통과하는 검정 또는 흰색으로 폴백합니다.

개인 정보

HEX 파싱, OKLCH 변환, 대비비 계산, 수정 제안 탐색은 모두 브라우저 내부에서 처리됩니다. 색상이나 설정은 외부로 전송되지 않습니다.

관련 도구

• 색상 팔레트 생성기 — 기본 색상에서 보색, 유사색, 삼각, 사각 배색 생성.
• 색상 변환기 — HEX, RGB, HSL 상호 변환.
• 색상 셰이드 생성기 — Tailwind 스타일 10단계 셰이드 생성.