홍라이프 계산기명도 대비 계산기 쉽게 이해하기 — 개념과 원리
배경에 비해 너무 연한 글자는 읽기 어렵고, 특히 저시력 사용자에게 그렇습니다. 웹 콘텐츠 접근성 지침(WCAG)은 최소 명도 대비를 정해 둡니다. 이 계산기는 글자색과 배경색의 대비를 재고, 일반 글자, 큰 글자, 인터페이스 요소에 대한 AA·AAA 기준과 비교합니다.
계산 방법
sRGB 채널 c(0~1)를 선형화: c ≤ 0.04045이면 c ÷ 12.92, 아니면 ((c + 0.055) ÷ 1.055)^2.4
상대 휘도 L = 0.2126 R + 0.7152 G + 0.0722 B
대비 = (밝은 쪽 L + 0.05) ÷ (어두운 쪽 L + 0.05), 1:1~21:1
기준: AA 일반 4.5:1, AA 큰 글자 3:1, AAA 일반 7:1, AAA 큰 글자 4.5:1, 비텍스트 UI 3:1
기준 바로 아래 값은 탈락이므로 비율은 내림해 표시합니다.
원리
화면은 색을 비선형으로 저장하므로 먼저 실제 빛의 양으로 되돌립니다. 휘도는 눈의 민감도에 따라 채널에 가중치를 주며 초록의 비중이 가장 큽니다. 대비는 두 색이 내는 빛을 비교하고, 각각에 0.05를 더하는 것은 화면에 반사되는 주변광을 반영해 아주 어두운 색에서 비율이 무한히 커지지 않게 하기 위해서입니다. 큰 글자는 획이 굵어 낮은 대비에서도 읽히므로 기준이 더 낮습니다.
예제 풀이
기본값인 글자 #767676, 배경 #FFFFFF로 계산합니다.
- 0x76 = 118, 118 ÷ 255 = 0.4627, 선형화하면 회색의 L = 0.1812입니다.
- 흰색의 L = 1입니다.
- 대비 = 1.05 ÷ 0.2312 = 4.54, 표시값 4.54:1입니다.
- AA 일반(4.5:1) 통과, AA 큰 글자(3:1) 통과입니다.
- AAA 일반(7:1) 탈락, AAA 큰 글자(4.5:1) 통과, UI 요소(3:1) 통과입니다.
결과 해석
#767676은 흰 배경에서 일반 글자 AA를 통과하는 가장 연한 회색에 가까운 값으로 잘 알려져 있습니다. 대부분의 법규와 정책이 AA 수준을 기준으로 합니다. '큰 글자'는 18pt(24px) 이상, 굵게는 14pt(약 18.7px) 이상입니다. 비율을 통과해도 글꼴 굵기, 크기, 배경 무늬에 따라 읽기 어려울 수 있습니다.
흔한 실수
- 4.48:1을 4.5:1로 반올림하는 경우(WCAG는 올림을 허용하지 않습니다)
- 규칙 확인 없이 안내 문구나 비활성 컨트롤을 예외로 보는 경우
- 이미지나 그라데이션 위 글자를 한 지점에서만 재는 경우
- 3:1이 필요한 포커스 표시와 아이콘을 잊는 경우
자주 묻는 질문
본문 글자에는 몇 대비가 필요한가요?
WCAG AA는 4.5:1 이상, AAA는 7:1 이상입니다.
가장 높은 대비는?
흰 바탕의 검은 글자로 21:1입니다.
로고도 대비 기준을 지켜야 하나요?
WCAG에서 로고나 브랜드 이름의 일부인 글자는 예외입니다.
출처: W3C, Web Content Accessibility Guidelines (WCAG) 2.2, success criteria 1.4.3, 1.4.6 and 1.4.11, and definitions of relative luminance, contrast ratio and large-scale text