색상 대비 검사기 (WCAG)

글자색과 배경색의 명도 대비를 계산해 WCAG AA·AAA 기준 통과 여부를 알려주고, 실패 시 통과하는 색을 추천합니다.

–대비비

기준	최소 대비	결과
AA · 일반 텍스트	4.5 : 1
AA · 큰 텍스트	3 : 1
AAA · 일반 텍스트	7 : 1
AAA · 큰 텍스트	4.5 : 1
UI 요소 · 그래픽	3 : 1

큰 텍스트 미리보기 — Large text 24px

일반 텍스트 미리보기입니다. The quick brown fox jumps over the lazy dog. 0123456789

사용법

글자색과 배경색을 입력하면 두 색의 명도 대비(contrast ratio)를 1:1 ~ 21:1 범위로 계산합니다. WCAG는 이 값으로 가독성 기준을 정합니다. AA 일반 텍스트는 4.5:1 이상, 큰 텍스트(약 24px 이상, 또는 굵은 18.66px 이상)는 3:1 이상이어야 합니다. 더 엄격한 AAA는 각각 7:1, 4.5:1입니다.

색은 #RGB, #RRGGBB 형식으로 입력하거나 색상 선택기를 쓸 수 있습니다. 기준을 통과하지 못하면 배경은 그대로 두고 글자색만 조정해 AA를 통과하는 가장 가까운 색을 추천합니다. 추천 색을 누르면 바로 적용됩니다.

대비는 색상(hue)이 아니라 밝기 차이로 결정됩니다. 빨강 위의 초록처럼 채도가 높아도 밝기가 비슷하면 대비비는 낮게 나옵니다.

실제 응용

시안을 받으면 회색부터 검사한다

실무에서 대비 기준에 걸리는 곳은 거의 정해져 있습니다. 디자인에서 "연하게"라고 지정된 자리가 대부분입니다. 전부 검사하려 들지 말고 아래 다섯 군데를 먼저 넣어 보세요. 여기서 걸리지 않으면 나머지는 대체로 통과합니다.

입력 칸의 placeholder — 가장 자주 걸립니다. 회색 위 회색이 되기 쉽습니다.
비활성(disabled) 버튼과 라벨 — "눌리지 않는다"를 흐리기로 표현하다 보면 읽을 수 없어집니다.
보조 설명·도움말 문구 — 본문보다 한 단계 연한 회색으로 두는 그 자리입니다.
타임스탬프·메타 정보 — "3분 전", 조회수처럼 작고 연한 텍스트.
브랜드 색 버튼 위의 흰 글자 — 파랑·초록 계열 브랜드에서 특히 자주 미달합니다.

큰 텍스트 3:1 예외를 남용하지 않는다

AA에서 큰 텍스트는 3:1만 넘으면 됩니다. 다만 큰 텍스트의 정의가 좁습니다 — 24px 이상, 또는 굵게(bold) 처리한 18.66px 이상입니다. 20px 일반 텍스트는 해당하지 않아 4.5:1을 지켜야 합니다.

대비가 모자랄 때 글자를 키워서 예외로 넘어가려는 접근은 권하지 않습니다. 화면에서 실제로 읽기 힘든 상태는 그대로이기 때문입니다. 제목처럼 원래 큰 자리에만 이 예외를 적용하고, 본문은 색을 고치는 쪽이 맞습니다.

다크 모드는 따로 검사한다

라이트 모드에서 통과한 색이 다크 모드에서 떨어지는 일이 흔합니다. 밝은 배경 위에서 충분히 어둡던 회색이, 어두운 배경 위에서는 배경과 가까워지기 때문입니다. 두 테마의 색 조합을 각각 넣어서 확인하세요. 특히 두 테마가 같은 회색 변수를 공유하고 있다면 한쪽은 거의 확실히 미달입니다.

텍스트만 대상이 아니다

WCAG 1.4.11(비텍스트 대비)은 의미를 전달하는 시각 요소에 3:1을 요구합니다. 글자가 아니라서 놓치기 쉬운 자리들입니다.

아이콘 버튼 — 라벨 없이 아이콘만 있는 경우 그 아이콘 색
입력 칸 테두리 — 어디가 입력 칸인지 구분하는 유일한 단서일 때
포커스 링 — 키보드 사용자가 현재 위치를 아는 수단
토글 스위치의 켜짐/꺼짐 상태 색
차트의 계열 색, 그래프의 축·격자선

이 도구에 요소 색과 배경색을 넣고 3:1을 넘는지 보면 됩니다. 텍스트가 아니므로 4.5:1까지는 필요 없습니다.