웹 접근성 명도 대비(Contrast Ratio) 판독기
W3C WCAG 2.1 국제 표준 공식 알고리즘 기반. 글자 색상과 배경 색상의 명도 대비비 및 AA/AAA 통과 여부를 실시간 검사합니다.
W3C WCAG 2.1 명도 대비(Contrast Ratio) 규격 안내
저시력자, 색약자, 고령자를 포함한 모든 사용자가 콘텐츠를 명확히 판별할 수 있도록 W3C 국제 표준 규격은 텍스트와 배경 간의 상대 휘도 명도 대비비를 규정합니다.
명도 대비비 산식 = (L1 + 0.05) / (L2 + 0.05) (단, L1 ≥ L2 이며 L은 sRGB 선형 감마 보정 상대 휘도)
본문 텍스트(18pt 미만): AA 4.5:1 이상 / AAA 7.0:1 이상 | 큰 텍스트(18pt 이상 또는 14pt 볼드): AA 3.0:1 이상 / AAA 4.5:1 이상
⚡ 원터치 추천 시나리오 프리셋
✍️ 글자 색상 (Foreground)
🎨 배경 색상 (Background)
👁️ 실시간 가독성 렌더링 프리뷰
AA / AAA 동시 시뮬레이션
큰 텍스트 (Title 24px / 18pt 이상) — 웹 접근성 검사
일반 본문 텍스트 (Body 16px) — W3C WCAG 2.1 지침에 따르면 저시력자 및 모든 사용자가 명확하게 읽을 수 있도록 충분한 명도 대비비를 유지해야 합니다.
소제목 및 강조 글꼴 (Bold 14px / 10.5pt 이상)
명도 대비 지수 실시간 확인 중...
🟢 최고 우수 (AAA 통과)
WCAG 2.1 권정 완수
상대 휘도 명도 대비비 (Contrast Ratio)
21.00
: 1
모든 텍스트 및 UI 요소 최고 등급 AAA 통과
📊 명도 대비비 지수 스펙트럼 (1:1 ~ 21:1)
21.00 : 1 (최고 등급)
1:1 (불가)
3:1 (AA 큰글씨)
4.5:1 (AA 본문)
7:1 (AAA 본문)
21:1 (최고)
글자 휘도 (L_fg)
0.0000
배경 휘도 (L_bg)
1.0000
AA 본문 요구치
4.50 : 1
AAA 본문 요구치
7.00 : 1
📋 W3C WCAG 2.1 세부 규격별 판정 결과
📖 일반 본문 텍스트
AAA 통과
18pt(24px) 미만 본문 글씨, 설명글
요구 기준: AA ≥ 4.5:1 / AAA ≥ 7.0:1
🔤 큰 텍스트 (Title)
AAA 통과
18pt(24px) 이상 또는 14pt(18.5px) 볼드
요구 기준: AA ≥ 3.0:1 / AAA ≥ 4.5:1
🔘 UI 및 그래픽 요소
AA 통과
버튼 테두리, 아이콘, 폼 입력창 경계
요구 기준: AA ≥ 3.0:1
✨ 접근성 명도 보정 추천
현재 색상 조합은 최고 수준의 가독성 규격을 만족하고 있습니다.
📊 대표 실무 색상 조합 명도 대비비 비교
| 색상 조합 명칭 | 글자 Hex | 배경 Hex | 대비비 (Ratio) | AA 본문 | AAA 본문 |
|---|
디자이너 & 기획자 팁
- 본문 텍스트는 최소 4.5:1 (AA) 이상을 유지해야 저시력 사용자가 가독 문제를 겪지 않습니다.
- 회색(#767676)은 흰색 배경에서 딱 4.54:1을 형성하므로 본문 회색 텍스트의 마지노선입니다.
- 슬라이드 발표 자료(PPT)는 프로젝터 광량 저하를 고려해 7:1 (AAA) 이상을 적극 권장합니다.
WCAG 2.1 접근성 가이드
- 색상 정보 단독 전달 금지: 빨강/초록 상태 뱃지는 텍스트나 이모지를 반드시 함께 표시하세요.
- 비텍스트 그래픽(아이콘, 차트 범례)은 배경 대비 3.0:1 이상이 필요합니다.
- 고대비 다크 모드 구현 시 순수 검정(#000) 배경에 순수 흰색(#FFF)은 눈의 피로를 유발할 수 있으므로 다크네이비/다크지색을 권장합니다.
💡 자주 묻는 질문 (FAQ)
Q W3C WCAG 2.1 명도 대비(Contrast Ratio) 기준은 무엇인가요?
W3C(World Wide Web Consortium) 웹 콘텐츠 접근성 지침(WCAG 2.1)에 따르면 일반 본문 텍스트는 4.5:1 이상(AA 등급), 7:1 이상(AAA 등급)의 명도 대비비를 가져야 시각 장애인, 저시력자, 고령자도 불편 없이 글자를 읽을 수 있습니다. 큰 텍스트(18pt 이상 또는 14pt 볼드)는 3:1 이상(AA) / 4.5:1 이상(AAA)을 요구합니다.
Q 상대 휘도(Relative Luminance)는 어떻게 산출되나요?
sRGB 색상 채널(0~255)을 감마 보정하여 선형 RGB로 변환한 후, 인간 눈의 감탄 파장 가중치(R: 0.2126, G: 0.7152, B: 0.0722)를 곱하여 0(최저 휘도, 순수 검정)부터 1(최고 휘도, 순수 흰색) 사이의 실수값 L을 산출합니다.
Q PPT 발표 자료나 Web/App 디자이너는 이 도구를 어떻게 활용해야 하나요?
브랜드 가이드라인이나 디자인 시안의 글자 색상과 배경 색상 HEX 코드를 입력하면 즉시 통과 여부와 함께 실시간 텍스트 프리뷰 뷰어가 구동됩니다. 통과하지 못한 경우 도구가 자동으로 제시하는 명도 보정 추천 색상을 사용하여 가독성을 개선할 수 있습니다.
Q 명도 대비비 21:1 및 1:1은 무엇을 의미하나요?
21:1은 이론상 달성할 수 있는 최고의 명도 대비비로 순수 검정(#000000) 글자에 순수 흰색(#FFFFFF) 배경의 조합입니다. 반대로 1:1은 글자 색상과 배경 색상이 완전히 동일하여 글씨를 전혀 인지할 수 없는 상태입니다.
Q 3자리 HEX 코드(#fff)나 # 기호 없이 입력해도 작동하나요?
네, 본 판독기 엔진은 #FFFFFF, #FFF, ffffff, fff 등 다양한 색상 코드 형식을 자동으로 정규화(Normalize)하여 정밀 연산합니다.