색상 대비 체크

두 색상의 대비비와 WCAG AA/AAA 통과 여부 확인

전경색 (텍스트)

배경색

큰 텍스트 미리보기

일반 크기 텍스트가 이렇게 보입니다. 문단처럼 긴 글을 읽을 때 대비가 특히 중요합니다.

미리보기의 문구를 클릭해 직접 고쳐볼 수 있습니다.

텍스트 그림자

text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);

그림자는 미리보기 확인용이며 WCAG 대비 계산에는 반영되지 않습니다.

1.00: 1

명도 대비비

기준	AA	AAA
일반 텍스트
큰 텍스트
UI 컴포넌트 · 그래픽		—

WCAG는 24px(18pt) 이상, 또는 19px(14pt) 이상 굵은 글씨를 "큰 텍스트"로 취급해 기준을 완화합니다.

모든 계산은 브라우저에서만 이루어지며 서버로 전송되지 않습니다.

색상 대비 체크 소개

이 도구는 두 색의 명도 대비비를 WCAG 2.x 공식 그대로 계산하고, 일반 텍스트·큰 텍스트·UI 컴포넌트 기준으로 AA/AAA 통과 여부를 표시합니다. 결과는 1:1(같은 색)부터 21:1(검정과 흰색) 사이의 숫자 하나입니다.

기준에 못 미치면 전경색의 색조(H)와 채도(S)는 그대로 두고 HSL 명도(L)만 0~100 사이에서 훑어, 원래 명도에서 가장 적게 움직인 통과 색을 추천합니다. 브랜드 색을 버리지 않고 「조금 더 어둡게」로 해결할 수 있는지 먼저 확인하는 용도입니다.

대비비는 이렇게 계산된다

먼저 각 채널(0~255)을 255로 나눈 값 c를 선형광으로 되돌립니다. c가 0.04045 이하이면 c/12.92, 그보다 크면 ((c+0.055)/1.055)^2.4입니다. sRGB 감마를 풀어 실제 빛의 양에 가깝게 만드는 단계입니다.

다음으로 상대 휘도 L = 0.2126R + 0.7152G + 0.0722B를 구합니다. 초록 가중치가 파랑의 열 배 가까이 되는 것은 사람 눈이 초록 파장에 가장 민감하기 때문입니다. 마지막으로 (밝은 쪽 L + 0.05) / (어두운 쪽 L + 0.05)가 대비비입니다. 0.05는 화면 반사광(flare)을 흉내 낸 값이라, 순수한 검정이 있어도 비율이 무한대로 가지 않고 최대 21에서 멈춥니다.

WCAG 문서에는 예전에 문턱값이 0.03928로 적혀 있었고 2021년에 sRGB 표준값 0.04045로 고쳐졌습니다. W3C는 이 차이가 판정에 실질적인 영향이 없다고 밝히고 있고, 이 도구의 코드는 옛 값 0.03928을 씁니다. 0~255 정수 입력에서는 두 문턱 사이에 걸리는 값(10/255 = 0.0392)이 양쪽 식에서 거의 같은 결과를 냅니다.

4.5, 3, 7이라는 숫자의 출처

W3C 해설서에 따르면 3:1은 ISO 9241-3이 정상 시력 사용자에게 권한 최소 대비이고, 시력 20/40(한국식 0.5 정도)인 사람은 대비 감도가 약 1.5배 떨어지므로 3 × 1.5 = 4.5가 AA 기준이 되었습니다. 7:1(AAA)은 20/80 수준의 저시력을 감안한 값입니다.

큰 텍스트는 18pt 이상, 또는 굵은 글꼴 14pt 이상입니다. CSS 픽셀로는 약 24px, 굵게 18.5px 정도입니다(1pt = 1.333px). 한글·일본어처럼 획이 많은 CJK 글꼴은 「그에 상응하는 크기」라고만 되어 있어, 16px 본문 굵은 글씨를 큰 텍스트로 취급하면 안 됩니다. 큰 텍스트는 AA 3:1, AAA 4.5:1입니다.

UI 컴포넌트 3:1은 WCAG 2.1에서 추가된 1.4.11 비텍스트 대비 기준입니다. 입력창 테두리, 체크박스 외곽선, 아이콘처럼 「이게 조작 가능한 요소다」를 알아보는 데 필요한 부분에 적용됩니다. 비활성 버튼, 로고, 순수 장식은 대비 요구가 없습니다.

공식이 틀리게 말해 주는 경우

WCAG 2 공식은 색의 순서를 가리지 않습니다. 흰 바탕의 회색 글씨와 회색 바탕의 흰 글씨가 같은 숫자를 받지만, 어두운 배경에 밝은 글씨(다크 모드)는 실제로 더 읽기 어렵다는 지적이 많습니다. 또 주황 바탕 흰 글씨처럼 체감상 잘 보이는 조합이 떨어지고, 어두운 쪽 조합이 과하게 통과하는 경향이 있습니다.

이런 비판에서 나온 것이 APCA(Accessible Perceptual Contrast Algorithm)입니다. 글꼴 크기·굵기와 배경 극성을 함께 고려합니다. 다만 APCA는 WCAG 3 초안에 한때 들어갔다가 2023년 7월 작업 초안에서 빠졌고, 현재 WCAG 3 초안은 대비 알고리즘을 「미정」으로 두고 있습니다. 법적·계약상 기준은 여전히 WCAG 2.x이므로, 이 도구도 WCAG 2 공식만 판정합니다.

대비만으로 해결되지 않는 것: 색각 이상

북유럽계 인구에서 적록 색각 이상은 남성 약 8%, 여성 약 0.5%로 보고됩니다. 동아시아 남성은 이보다 낮은 4~7% 정도로 조사됩니다. 대비비는 밝기 차이만 보므로, 빨강과 초록이 비슷한 밝기라면 대비비를 통과해도 색각 이상 사용자에게는 구별이 안 될 수 있습니다. 오류는 빨간색, 성공은 초록색으로만 표시하지 말고 아이콘이나 문구를 같이 두는 것이 WCAG 1.4.1(색만으로 정보 전달 금지)의 요구입니다.

예시

흰 바탕 위 회색 글씨의 경계선

입력: 전경 #767676 / 배경 #FFFFFF
결과: 4.54:1 — 일반 텍스트 AA 통과

118/255 = 0.4627 → 선형값 0.1811. (1 + 0.05) / (0.1811 + 0.05) = 4.54. 한 단계 밝은 #777777은 4.48:1로 떨어집니다. 흰 바탕에서 AA를 통과하는 가장 밝은 회색이 #767676입니다.

순수한 빨강

입력: 전경 #FF0000 / 배경 #FFFFFF
결과: 4.00:1 — 큰 텍스트 AA만 통과

빨강의 상대 휘도는 0.2126입니다. 1.05 / 0.2626 = 4.00. 같은 빨강을 검정 배경에 두면 0.2626 / 0.05 = 5.25:1로 일반 텍스트 AA를 통과합니다.

초록과 파랑의 차이

입력: #00FF00, #0000FF 각각 흰 배경
결과: 초록 1.37:1 / 파랑 8.59:1

둘 다 한 채널이 255인 원색이지만 가중치가 0.7152와 0.0722로 열 배 차이가 나서 결과가 정반대입니다.

사용 방법

전경색(글자)과 배경색을 HEX나 rgb()로 입력하거나 선택기로 고릅니다.
대비비와 다섯 가지 기준의 통과 여부를 확인합니다.
미달이면 추천 색이나 명도 범위 막대를 보고 가장 가까운 통과 색을 고릅니다.

자주 묻는 질문

4.49:1은 반올림해서 4.5로 봐도 되나요?

안 됩니다. W3C 해설서는 임계값을 반올림하지 말라고 명시합니다. 4.499도 AA 미달입니다.

투명도가 있는 색은 어떻게 재나요?

전경색에 rgba(0,0,0,0.5)나 #00000080처럼 알파를 넣으면, 입력한 배경색 위에 합성한 실제 표시 색으로 대비를 계산합니다. 검정 50%를 흰 배경에 올리면 21:1이 아니라 약 3.98:1입니다. 배경색은 불투명 색으로 넣어야 하며, 배경 자체가 반투명하면 그 아래 색과 합성된 최종 색을 스포이트로 읽어 넣으세요.

그라데이션이나 사진 위 글씨는요?

글자 뒤에서 가장 불리한(글자와 밝기가 가장 비슷한) 지점의 색을 배경으로 넣어 확인하세요. 한 지점이라도 미달이면 그 부분은 읽기 어렵습니다.

APCA 점수(Lc)도 볼 수 있나요?

아니요. APCA는 아직 어떤 확정 표준에도 들어 있지 않아 이 도구는 WCAG 2 대비비만 보여 줍니다.

출처

기준일: 2026-09-22

개인정보와 저장 방식