색상 대비 검사기는 글자색과 배경색 사이의 WCAG 대비 비율을 계산해 일반 글자, 큰 글자, UI 구성요소에서 AA와 AAA를 통과하는지 알려 줍니다. 색 두 개를 입력하거나 고르면 비율, 다섯 줄의 통과·미달 판정, 실제 미리보기가 즉시 바뀝니다.
조합이 미달이면 빨간 배지로 끝나지 않습니다. 한쪽 색의 OKLCH 명도만 바꿔 기준을 넘는 가장 가까운 색을 찾고, 색상과 채도는 sRGB가 허용하는 한 그대로 둡니다. 글자색을 바꾸는 안과 배경색을 바꾸는 안을 각각 결과 비율과 함께 보여 주고 버튼 한 번으로 적용합니다. 흰 배경에서 미달인 브랜드 주황의 해법은 보통 다른 색이 아니라 조금 더 어두운 주황입니다.
통과 여부는 반올림 전의 정확한 비율로 판정합니다. 화면 값은 소수 둘째 자리로 반올림하되, 미달인 조합이 3, 4.5, 7에 도달해 보일 때만 버림합니다. 그래서 흰 배경의 #959595는 3.00이 아니라 2.99로 표시됩니다.
사용 방법
글자색 정하기
#767676,rgb(23 32 29),oklch(0.3 0.02 170),navy같은 값을 입력하거나 색 칸을 눌러 시스템 색 선택기를 씁니다. 읽을 수 없는 값은 입력란 아래에 오류가 뜨고 마지막 유효한 색이 유지됩니다.배경색 정하기
배경색도 같은 방식으로 정합니다. 사진이나 그라데이션 위 글자는 글자가 걸치는 가장 밝은 곳과 어두운 곳을 각각 검사하세요. 투명한 색은 먼저 합성하며 글자는 배경 위에, 배경은 흰색 위에 얹어 계산합니다.
비율과 판정 읽기
큰 숫자가 대비 비율입니다. 아래 다섯 줄이 AA 일반(4.5:1), AA 큰 글자(3:1), AAA 일반(7:1), AAA 큰 글자(4.5:1), UI 구성요소(3:1)의 통과·미달을 보여 주고, 판정이 바뀌면 배지가 움직입니다.
맞춰야 할 기준 고르기
맞출 기준에서 AA 4.5:1, AA 큰 글자 3:1, AAA 7:1 중 하나를 고르면 그 기준에 맞춰 제안이 다시 계산됩니다. 글자색을 바꾸는 안과 배경색을 바꾸는 안이 각각 나옵니다.
제안 적용 후 미리보기 확인
적용을 누르면 제안된 색이 입력되고, 일반 글자·큰 글자·테두리 버튼이 있는 미리보기에서 눈으로 확인할 수 있습니다. 색 바꾸기는 두 색을 맞바꾸고 공유 링크는 버튼을 눌렀을 때만 두 색이 담긴 주소를 만듭니다.
작동 원리
상대 휘도와 대비 비율
WCAG 2.2는 0(검정)에서 1(흰색)까지의 상대 휘도로 대비를 정의합니다. 8비트 sRGB 채널을 255로 나눠 감마를 되돌리는 선형화를 하고 가중합을 냅니다. 초록이 가장 크게, 파랑이 가장 작게 기여합니다. 비율은 밝은 쪽 휘도 L1을 어두운 쪽 L2로 나누되 주변광을 반영해 양쪽에 0.05를 더합니다.
결과는 1:1(같은 색)에서 21:1(흰 바탕 검정)까지입니다. 항상 밝은 색이 분자에 오므로 두 색의 순서를 바꿔도 값은 같습니다.
c = 채널 / 255
linear(c) = c / 12.92 (c <= 0.04045)
= ((c + 0.055) / 1.055) ^ 2.4 (그 외)
L = 0.2126 R + 0.7152 G + 0.0722 B
비율 = (L1 + 0.05) / (L2 + 0.05) L1 >= L2
#767676 / #FFFFFF
linear(118/255) = 0.18116 = L
비율 = 1.05 / 0.23116 = 4.542기준값과 출처
WCAG 2.2 SC 1.4.3(AA)은 일반 글자 4.5:1, 큰 글자 3:1을 요구합니다. 큰 글자는 CSS 기준 24px 이상 보통 굵기 또는 약 18.66px 이상 굵은 글자입니다. SC 1.4.6(AAA)은 7:1과 4.5:1이고, SC 1.4.11은 UI 구성요소 경계와 의미 있는 그래픽에 3:1을 요구해 이 도구도 3:1 UI 줄을 함께 보여 줍니다.
통과 여부는 정확한 비율을 기준값과 비교합니다. 먼저 반올림하면 2.9953이 3으로 올라가 통과하게 되는데, WCAG는 이를 허용하지 않습니다.
| 등급 | 일반 글자 | 큰 글자 | SC |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 1.4.3 |
| AAA | 7:1 | 4.5:1 | 1.4.6 |
| AA (UI, 그래픽) | 3:1 | 3:1 | 1.4.11 |
가장 가까운 통과 색을 찾는 방법
색을 OKLCH로 바꾸면 명도가 지각적으로 고르게 분포합니다. 색상과 채도는 두고 명도를 0.001씩 검은색 쪽과 흰색 쪽으로 움직이며, sRGB를 벗어나면 채도를 줄여 범위 안으로 되돌립니다. 후보마다 8비트 HEX로 반올림해 비율을 다시 계산하므로, 제안된 색은 반올림 뒤에도 실제로 통과합니다.
명도 변화가 더 작은 쪽이 채택되고 배경도 고정된 글자색을 기준으로 같은 탐색을 합니다. 어느 방향으로도 기준에 닿지 않으면, 예컨대 중간 회색 두 개에서 한쪽만 바꿔 7:1을 맞추려는 경우 그 사실을 알려 주므로 반대쪽 색을 바꾸세요.
실제 예시
글자 #767676
배경 #FFFFFF4.54:1
AA 일반: 통과
AA 큰 글자: 통과
AAA 일반: 미달
AAA 큰 글자: 통과#767676은 흰 배경에서 일반 글자 AA를 통과하는 가장 밝은 무채색 회색입니다.
글자 #777777
배경 #FFFFFF4.48:1 (정확한 값 4.4781)
AA 일반: 미달
글자색 제안: #767676 (4.54:1)
배경색 제안: #060606 (4.52:1)4.48은 4.5 미달을 가리지 않으므로 소수 둘째 자리로 반올림해 표시합니다.
글자 #F3722C
배경 #FFFFFF2.89:1
AA 일반: 미달 AA 큰 글자: 미달
글자색 제안: #C85200 (4.50:1)제안은 OKLCH 명도를 낮춰 얻은, 색상이 같은 더 어두운 주황입니다.
글자 #959595
배경 #FFFFFF2.99:1 (정확한 값 2.9953)
AA 큰 글자: 미달
UI 3:1: 미달
글자색 제안: #767676 (4.54:1)소수 둘째 자리로 반올림하면 3.00이 되어 3:1 검사를 잘못 통과시킵니다.
글자 #6B7280
배경 #F3F4F64.39:1
AA 일반: 미달
글자색 제안: #69707E (4.52:1)
배경색 제안: #F6F7F9 (4.51:1)색이 살짝 들어간 패널에서는 순백 위에서 괜찮던 중간 회색이 4.5:1 바로 아래로 떨어지는 경우가 많습니다.
자주 하는 실수
3.00으로 보여도 미달일 수 있습니다
일부 검사기는 비율을 반올림한 뒤 비교해서 2.9953을 통과시킵니다. 이 도구는 정확한 값으로 판정하고 화면 값은 소수 둘째 자리로 반올림하되, 미달인데 3, 4.5, 7에 도달해 보일 때만 버림합니다. 기준값에 아슬아슬하게 닿았다면 여유를 조금 더 두세요.
글자 크기는 입력값이 아닙니다
도구는 글꼴 크기와 굵기를 알 수 없어 일반 글자와 큰 글자 결과를 따로 보여 줍니다. 24px 보통 또는 약 18.66px 굵은 글자 이상인지 직접 판단해 해당 줄을 읽으세요. 본문은 일반 글자입니다.
투명도는 합성해서 계산합니다
불투명도 60%의 글자색은 배경과 섞고, 반투명 배경은 흰색과 섞어 계산합니다. 실제 바탕이 사진이거나 어두운 페이지라면 그 바탕과 먼저 섞은 색을 직접 입력하세요.
그라데이션·이미지·상태는 여러 번 검사해야 합니다
한 쌍은 숫자 하나일 뿐입니다. 그라데이션 위 글자는 걸치는 가장 밝은 곳과 어두운 곳을 따로 검사하세요. 호버·포커스·비활성·다크 모드는 서로 다른 쌍이며, 제안은 명도만 바꾸므로 원래보다 밋밋해 보일 수 있습니다.
대비 통과가 접근성 전체는 아닙니다
비율은 색만으로 정보를 전달하는지, 포커스가 보이는지, 글꼴이 읽기 쉬운지를 알려 주지 않습니다. WCAG 3에서 제안된 APCA 모델은 숫자가 다르며 이 도구가 계산하는 값이 아닙니다.
자주 묻는 질문
WCAG AA는 대비 비율 몇 대 몇을 요구하나요?
WCAG 2.2 AA는 일반 글자 4.5:1, 큰 글자 3:1(SC 1.4.3), UI 구성요소 경계와 의미 있는 그래픽 3:1(SC 1.4.11)을 요구합니다. AAA는 글자 기준을 7:1과 4.5:1로 높입니다(SC 1.4.6).
대비 비율은 어떻게 계산하나요?
각 색을 상대 휘도로 바꾸고 (L1 + 0.05) / (L2 + 0.05)로 나눕니다. L1은 밝은 쪽입니다. 휘도는 감마를 선형화한 채널로 0.2126 R + 0.7152 G + 0.0722 B를 계산합니다. 흰 배경의 #767676은 4.54:1입니다.
통과하는 색은 어떻게 제안하나요?
한쪽 색을 OKLCH로 바꿔 명도만 0.001씩 양방향으로 움직이고, 색상과 채도는 sRGB가 허용하는 한 유지합니다. 반올림한 HEX가 고른 기준을 넘는 가장 작은 변화를 반환하며 글자색과 배경색은 따로 계산합니다.
2.99:1은 왜 3:1에 미달인가요?
실제 비율이 2.9953이고 WCAG는 정확한 값으로 비교하기 때문입니다. 화면 값은 보통 소수 둘째 자리로 반올림하지만, 미달인 값이 3, 4.5, 7에 도달해 보일 때는 버림합니다.
WCAG에서 큰 글자는 어떤 기준인가요?
보통 굵기는 18pt(24 CSS px) 이상, 굵은 글자는 14pt(약 18.66 CSS px) 이상입니다. 그보다 작으면 일반 글자로 보고 더 높은 비율을 적용합니다.
rgba, hsl, oklch 색도 쓸 수 있나요?
네. 색상 코드 변환기가 읽는 CSS 색 문법은 알파를 포함해 모두 됩니다. 비율을 계산하기 전에 투명한 글자는 배경과, 투명한 배경은 흰색과 합성합니다.
글자색과 배경색의 순서가 중요한가요?
아니요. 밝은 휘도를 어두운 휘도로 나누므로 두 색을 바꿔도 비율은 같습니다. 순서는 첫 번째 색이 글자색이 되는 미리보기에만 영향을 줍니다.
색을 검사할 때 어딘가로 업로드되나요?
아니요. 비율과 제안은 모두 브라우저 안에서 계산되며 색은 서버로 전송되지 않습니다.
더 깊이 읽기
마지막 업데이트: