상대 휘도(Relative Luminance) 산출 공식과 명도 대비 수학적 원리
시각 장애, 저시력, 저색각(색맹/색약) 사용자뿐만 아니라 야외 태양광 아래에서 모바일 디바이스를 사용하는 모든 이용자에게 디지털 콘텐츠의 명확한 가독성은 필수적인 요소입니다. W3C의 WCAG 2.1(웹 콘텐츠 접근성 지침)은 전경색(텍스트)과 배경색 간의 명도 대비 비율을 정량적으로 평가할 것을 권장합니다.
Toolbase 컬러 대비 검사기는 sRGB 색상 공간을 부동소수점 선형화(Linearization)한 후, 인간 눈의 시각 감도(적/녹/청 광원 가중치)를 반영한 상대 휘도(Relative Luminance) 수식을 적용하여 정확한 대비 비율을 계산합니다.
WCAG 2.1 AA/AAA 4종 자동 검증
일반 텍스트 및 18pt 이상 대형 텍스트 기준 4가지 규격(AA/AAA) 통과(PASS) 여부를 실시간 판정합니다.
명도(Lightness) 미세 조절 슬라이더
대비 수치가 기준 미달일 때 슬라이더를 즉시 조절하여 합격 기준을 만족하는 최적의 색상을 탐색합니다.
1초 전경색-배경색 맞바꾸기
버튼 한 번으로 전경색과 배경색을 스왑(Swap)하여 다크모드 및 리버스 UI 명도 대비를 손쉽게 점검합니다.
1. W3C 상대 휘도(Relative Luminance) 산출 수학 수식
RGB 각 채널 수치(0~255)를 0.0~1.0 범위로 정규화한 뒤, 0.03928 이하일 경우 R/12.92 수식을, 초과할 경우 ((R+0.055)/1.055)^2.4 감마 보정 선형화를 적용합니다.
선형화된 sRGB 값에 인간의 시력 반응 감도 가중치(R: 21.26%, G: 71.52%, B: 7.22%)를 곱해 상대 휘도 L을 산출합니다: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
두 색상 중 더 밝은 휘도 L1과 어두운 휘도 L2의 명도 대비 비율(Contrast Ratio)은 다음과 같습니다: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
WCAG 2.1 명도 대비 비율 통과 기준표
텍스트 크기 및 대상 등급에 따른 최소 요구 명도 대비 수치 사양입니다.
| 접근성 등급 | 텍스트 유형 | 최소 요구 명도 대비 수치 | 권장 사용 대상 |
|---|---|---|---|
| AA 등급 (필수 표준) | 일반 텍스트 (18pt 미만) | 4.5 : 1 이상 | 모든 공공기관, 기업 웹/앱 필수 권장 표준 |
| AA 등급 (필수 표준) | 대형 텍스트 (18pt / 14pt Bold 이상) | 3.0 : 1 이상 | 대형 타이틀, 메인 폰트 헤더 |
| AAA 등급 (최고 표준) | 일반 텍스트 (18pt 미만) | 7.0 : 1 이상 | 고대비 최적화 전문 문서, 시니어 포털 |
| AAA 등급 (최고 표준) | 대형 텍스트 (18pt / 14pt Bold 이상) | 4.5 : 1 이상 | 하이라이트 배너, 인포그래픽 타이틀 |
2. 실무 UI/UX 접근성 개선 디자인 팁
완전한 순수 검정(#000000)과 순수 흰색(#FFFFFF)의 명도 대비는 21:1로 가장 높지만, 너무 강한 대비는 난독증 사용자에게 눈의 피로를 줄 수 있습니다.
따라서 메인 본문 텍스트에는 #131B2E 또는 #1E293B 같은 어두운 차콜/슬레이트 톤을 적용하여 10:1 ~ 15:1 수준의 편안한 고대비를 유지하는 것이 좋습니다.
버튼 내 텍스트나 플레이스홀더(Placeholder) 색상 입력 시에도 4.5:1 미만이 되지 않도록 명도 미세 조절 슬라이더를 활용해 보세요.
자주 묻는 질문 (FAQ)
Q.18pt 이상 대형 텍스트(Large Text)의 정확한 정의는 무엇인가요?
W3C 기준 18pt(약 24px) 이상의 일반 폰트 크기이거나, 또는 14pt(약 18.5px) 이상의 볼드(Bold) 굵기 폰트를 의미합니다.
Q.아이콘이나 일반 UI 테두리도 명도 대비 기준을 지켜야 하나요?
네, 지켜야 합니다. WCAG 2.1 1.4.11(비텍스트 콘텐츠 대비) 지침에 따르면 중요한 의미를 전달하는 아이콘이나 입력 폼의 테두리는 최소 3.0:1 이상의 명도 대비를 갖추는 것이 권장됩니다.
Q.입력한 색상 조합 데이터가 서버에 저장되나요?
저장되지 않습니다. 본 검사기는 사용자의 브라우저 내에서만 수학 수식을 실행하므로 입력한 정보가 외부로 전송되지 않습니다.