이 도구가 가정하는 것
- 대비 계산은 sRGB 색 공간을 전제로 합니다. 넓은 색영역(P3 등)으로 지정한 색은 결과가 다를 수 있습니다.
- 입력색을 선택한 배경색 위에 합성한 뒤 대비를 계산합니다. 배경 선택은 불투명 색입니다.
- WCAG는 로고와 장식용 문자, 사용하지 않는 상태의 요소를 기준에서 제외합니다. 이 도구는 그 예외를 판단하지 않습니다.
- "가장 가까운 이름"은 RGB 값의 산술 거리로 고른 것이며 사람이 느끼는 색 차이와는 다릅니다.
- 색상 코드는 브라우저 안에서만 계산하며 어디로도 전송하지 않습니다.
계산 방법
- 상대 휘도 = 각 채널을 0~1로 만들고 감마를 되돌린 뒤 0.2126·0.7152·0.0722로 가중합한 값입니다.
- 대비비 = (밝은 쪽 휘도 + 0.05) ÷ (어두운 쪽 휘도 + 0.05). 최소 1:1에서 최대 21:1입니다.
- 기준 = 본문 4.5:1(AA)과 7:1(AAA), 큰 글자 3:1(AA)과 4.5:1(AAA), 버튼 테두리·아이콘 3:1.
- 명도 단계 = HSL로 바꿔 색상과 채도는 그대로 두고 명도만 10%씩 옮긴 색입니다.
예시
| 글자색 | 배경 | 대비비 | 판정 |
|---|---|---|---|
| #000000 | #ffffff | 21.00 : 1 | 모두 통과 (최대값) |
| #767676 | #ffffff | 4.54 : 1 | 본문 AA 통과, AAA 미달 |
| #777777 | #ffffff | 4.48 : 1 | 본문 AA 미달 — 한 끗 차이로 갈립니다 |
| #1e90ff | #ffffff | 3.24 : 1 | 큰 글자와 버튼 테두리만 통과 |
흔한 실수와 주의
- 기준을 넘겼다고 읽기 쉬운 것은 아닙니다. 4.5:1은 최소선이고, 글꼴이 얇거나 화면이 작으면 더 큰 대비가 필요합니다.
- 색만으로 정보를 구분하지 마세요. 대비를 맞춰도 색으로만 구분한 정보는 색각 이상이 있는 사람이 알아볼 수 없습니다. 모양이나 글자를 함께 쓰세요.
- 어두운 화면 모드를 따로 확인하세요. 밝은 배경에서 통과한 조합이 어두운 배경에서는 미달일 수 있습니다.
- 입력색을 선택한 배경색 위에 합성한 뒤 대비를 계산합니다. 배경 선택은 불투명 색입니다.
자주 묻는 질문
명도 대비는 왜 재나요?
글자와 배경의 밝기 차이가 작으면 읽기 어렵기 때문입니다. 특히 저시력이나 색각 이상이 있는 사람, 밝은 야외에서 화면을 보는 사람에게 크게 영향을 줍니다. 웹 접근성 지침(WCAG 2.2)은 본문 글자에 4.5:1, 큰 글자에 3:1 이상을 요구하고, 더 엄격한 AAA 등급은 각각 7:1과 4.5:1을 요구합니다. 공공기관 웹사이트는 국내에서도 이 기준을 따르도록 되어 있습니다.
대비비 숫자는 어떻게 계산하나요?
W3C가 정한 상대 휘도를 두 색에 대해 구한 뒤 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 나눕니다. 상대 휘도는 R·G·B 값을 0~1로 만들고 감마를 되돌린 다음 0.2126·0.7152·0.0722의 가중치로 더한 값입니다. 초록에 가중치가 큰 것은 사람 눈이 초록을 가장 밝게 느끼기 때문입니다. 검정과 흰색이 최대인 21:1, 같은 색끼리가 최소인 1:1입니다.
"큰 글자" 기준은 몇 pt인가요?
WCAG는 18pt 이상, 또는 굵은 글씨라면 14pt 이상을 큰 글자로 봅니다. 웹에서 흔히 쓰는 px로는 대략 24px, 굵은 글씨면 18.66px입니다. 큰 글자는 획이 두꺼워 같은 대비에서도 읽기 쉬우므로 기준이 4.5:1에서 3:1로 낮아집니다.
HEX와 RGB와 HSL은 무엇이 다른가요?
같은 색을 다르게 적은 것뿐이라 서로 정확히 바꿀 수 있습니다. HEX는 짧아서 코드에 쓰기 좋고, RGB는 빛의 삼원색 값을 그대로 보여 주며, HSL은 색상·채도·명도로 나눠 적어 "이 색에서 밝기만 낮추기" 같은 조정이 직관적입니다. 이 페이지의 명도 단계도 HSL에서 명도만 바꿔 만든 것입니다.
투명도(알파)도 다루나요?
입력색을 선택한 배경색 위에 합성한 뒤 대비를 계산합니다. 배경 선택은 불투명 색입니다.
"가장 가까운 이름"은 어떻게 정하나요?
CSS가 이름을 정해 둔 색 148가지와 R·G·B 값의 거리를 재서 가장 가까운 것을 고릅니다. 정확히 같으면 그렇다고 표시합니다. 다만 이 거리는 숫자상의 거리이지 사람이 느끼는 색 차이와는 다르므로, 이름을 색의 정체로 받아들이기보다 대략 어느 계열인지 가늠하는 용도로 쓰세요.