웹 접근성 명암비(Contrast Ratio) 계산기
HOT배경색과 텍스트 색상의 상대 휘도 명암비 계산 및 WCAG 2.1 AA/AAA 적합성 실시간 검증
Responsive 728x90 / 320x100 Ad Slot
(CLS Prevention Active · Zero Shift)실시간 UI 렌더링 시뮬레이션 프리뷰
누구나 차별 없이 읽을 수 있는 디자인
명암비는 저시력자, 색약자뿐만 아니라 햇빛이 강한 야외 환경에서 스마트폰을 사용하는 모든 사용자에게 쾌적한 가독성을 보장하는 핵심 UI 요소입니다.
Native In-Feed / High Viewability Ad Slot
(CLS Prevention Active · Zero Shift)WCAG 웹 접근성 지침과 디지털 텍스트 명암비의 인지 공학
웹 접근성(Web Accessibility)은 시각 장애, 저시력, 색각 이상(색맹·색약)을 가진 사용자는 물론, 강한 햇빛 아래 모바일 기기를 사용하는 일반 사용자까지 모든 사람이 디지털 정보에 차별 없이 접근할 수 있도록 보장하는 현대 소프트웨어의 필수 품질 규격입니다. W3C(World Wide Web Consortium)가 제정한 웹 콘텐츠 접근성 지침(WCAG, Web Content Accessibility Guidelines) 2.1 및 2.2 표준에서는 텍스트 콘텐츠와 그 배경색 간의 상대 휘도(Relative Luminance)를 기반으로 엄격한 '명암비(Contrast Ratio)' 기준을 규정하고 있습니다.
디자인 트렌드가 미니멀리즘과 세련된 모던 UI로 발전하면서 옅은 회색 배경 위에 연한 회색 텍스트를 배치하거나, 반투명 글래스모피즘 패널 위에 흰색 텍스트를 얹는 등 시각적 심미성을 추구하다 가독성을 심각하게 해치는 사례가 빈번하게 발생합니다. WCAG 규정을 위반한 서비스는 장애인 차별 금지법(국내 장애인차별금지법, 미국 ADA Title III, 유럽 EAA)에 따라 법적 소송의 대상이 될 수 있으며, 공공기관 및 금융권 웹 접근성 품질 인증 마크 획득이 원천 거절됩니다.
오르보킷 WCAG 명암비 검사기는 sRGB 색공간의 비선형 감마 보정 수식을 적용하여 1:1(대비 없음)부터 21:1(완벽한 흑백 대비)까지의 정밀한 상대 휘도 비율을 실시간으로 연산합니다. 일반 본문 텍스트, 대형 텍스트(18pt 이상 또는 14pt 볼드 이상), 그래픽 UI 컨트롤에 대한 AA 및 AAA 등급 통과 여부를 즉각 판정하며, 실시간 폰트 미리보기와 전경/배경 원클릭 스왑 기능을 제공합니다.
상대 휘도(Relative Luminance)와 W3C 명암비 수학 공식
인간 망막의 원추세포가 인지하는 삼원색 감도 가중치와 감마 보정(Gamma Expansion)을 반영한 엄격한 물리 공식입니다.
각 sRGB 채널(0~1)을 감마 보정: c <= 0.03928이면 c/12.92, 초과면 ((c+0.055)/1.055)^2.4를 취해 선형화합니다. L1은 밝은 색, L2는 어두운 색의 휘도입니다.
👉 #737373과 흰색 배경은 4.76:1의 명암비를 형성하여 WCAG Level AA 본문 기준을 안전하게 충족합니다.
- 상대 휘도(L)는 가장 어두운 흑색(0.0)부터 가장 밝은 백색(1.0)까지 정규화된 값입니다.
- 인간의 눈은 녹색(Green, 71.5%)에 가장 민감하고 청색(Blue, 7.2%)에 둔감하므로 가중치가 다릅니다.
- 분모와 분자에 더해지는 상수 0.05는 디스플레이 주변의 반사광(Ambient Flare)을 보정하는 시각 상수입니다.
- 이론상 최저 명암비는 동일 색상 간의 1:1이며, 최고 명암비는 흑과 백 사이의 21:1입니다.
WCAG 2.1 / 2.2 표준 적합성 기준 및 UI 요소별 요구 명암비
웹 서비스 심사 및 법적 준거성 평가를 위한 규격별 최소 명암비 요구치 기준표입니다.
| 적합성 수준 | 대상 UI 요소 | 최소 요구 명암비 | 규격 기준 세부 조건 | 권장 배색 예시 |
|---|---|---|---|---|
| Level AA (법적 최소 기준) | 일반 본문 텍스트 (Normal Text) | 4.5 : 1 이상 | 18pt(24px) 미만 또는 14pt(18.67px) 미만 볼드 | #FFFFFF 배경 위 #767676 텍스트 |
| Level AA (법적 최소 기준) | 대형 텍스트 (Large Text) | 3.0 : 1 이상 | 18pt(24px) 이상 또는 14pt 볼드 이상 제목 | #FFFFFF 배경 위 #949494 헤드라인 |
| Level AA (신설 규정) | UI 컴포넌트 및 그래픽 객체 | 3.0 : 1 이상 | 버튼 외곽선, 입력 폼 테두리, 의미 있는 아이콘 | 입력창 border vs 배경색 대비 |
| Level AAA (최고 등급) | 일반 본문 텍스트 (Normal Text) | 7.0 : 1 이상 | 고령자, 저시력인을 위한 고대비 전용 테마 | #FFFFFF 배경 위 #595959 텍스트 |
| Level AAA (최고 등급) | 대형 텍스트 (Large Text) | 4.5 : 1 이상 | 가독성이 극대화되어야 하는 대형 디스플레이 | #FFFFFF 배경 위 #767676 대제목 |
| 예외 대상 (Exempt) | 비활성화(Disabled) 비활성 요소 | 제한 없음 | 사용자 조작이 불가능한 disabled 버튼/폼 | 시각적으로 흐릿하게 처리된 요소 |
| 예외 대상 (Exempt) | 순수 장식용(Decorative) 그래픽 | 제한 없음 | 정보 전달 목적이 없는 배경 무늬나 로고 일러스트 | 배경 워터마크, 추상 기하학 패턴 |
* 국내 공공기관 웹 접근성 품질 인증 마크(WA) 획득을 위해서는 전 페이지 Level AA 충족이 의무입니다.
High-Engagement In-Article Native Ad Slot
(CLS Prevention Active · Zero Shift)사용 방법
11. 전경색(텍스트) 및 배경색 선택
검사할 텍스트 색상과 배경 색상의 HEX(#000000)를 입력하거나 컬러 피커로 지정합니다.
22. 상대 휘도 기반 명암비(Contrast Ratio) 확인
1:1부터 21:1까지의 공식 W3C 상대 휘도 대비 수치(예: 4.54:1)를 실시간으로 확인합니다.
33. WCAG 2.1 적합성 레벨(AA / AAA) 판정 확인
일반 본문 텍스트(Normal Text), 대형 텍스트(Large Text), UI 컴포넌트 및 아이콘에 대한 통과(Pass)/불합격(Fail) 상태를 점검합니다.
44. 실시간 가독성 프리뷰 및 색상 스왑
버튼, 본문 문단, 카드 UI 미리보기 창을 통해 실제 가독성을 평가하고, 전경/배경 교체 버튼으로 다크·라이트 양방향을 테스트합니다.
실무 웹 서비스 및 디자인 시스템 접근성 검증 사례
디지털 프로덕트 디자인과 프론트엔드 검수 과정에서의 대표적 활용 사례입니다.
약관 동의 체크박스, 경고 문구 텍스트, 조회 버튼의 명암비를 4.5:1 이상으로 전수 교정.
딥 다크 배경(#0F172A) 위에 본문 텍스트(#E2E8F0, 대비 13.8:1)와 서브 텍스트(#94A3B8, 대비 6.8:1)의 시각 피로도 최적화.
붉은색 에러 텍스트(#EF4444)가 흰색 배경에서 3.99:1로 불합격함을 발견하고 진한 레드(#DC2626, 4.52:1)로 전격 교체.
글꼴 크기를 키우지 않고도 7:1 이상의 높은 명암비를 제공하여 저시력 사용자 리텐션 25% 개선.
💡 접근성 전문가가 권장하는 명암비 최적화 실전 가이드
대다수 브라우저 기본 플레이스홀더 색상은 명암비 2.5:1 미만으로 WCAG 불합격 대상입니다. 입력 필드 힌트는 외부 레이블로 승격하거나 #767676 이상의 짙은 회색으로 스타일링하세요.
밝은 노랑(#FFFF00), 시안(#00FFFF), 밝은 연두(#00FF00)는 인간의 눈에 매우 튀지만 흰색 배경에서는 명암비가 1.2:1 수준으로 글자를 전혀 읽을 수 없습니다.
WCAG 2.1 규정에 따라 키보드 탭(Tab) 이동 시 나타나는 아웃라인 포커스 링(Focus Ring)도 인접 배경과 최소 3:1 이상의 대비를 이루어야 합니다.
복잡한 사진 위에 텍스트를 배치할 때는 사진 밝기 변화에 대응하기 위해 반드시 반투명 블랙 딤(Dim) 레이어(예: bg-black/60)를 덧씌워야 합니다.
⚠️ 흔히 하는 실수 & 예방법
자주 묻는 질문 (FAQ)
사용자 및 전문가들이 가장 자주 묻는 핵심 질문과 명확한 해답입니다.
WCAG 기준 대형 텍스트는 18pt(약 24px) 이상의 일반 두께 글꼴이거나, 볼드(Bold, 가중치 700 이상)가 적용된 14pt(약 18.67px) 이상의 글꼴을 의미합니다.
Wide Responsive Banner
(CLS Prevention Active · Zero Shift)관련 도구 추천
색상 코드 실시간 변환기 및 조화 배색기
HEX, RGB, HSL, CMYK 상호 실시간 변환 및 보색, 유사색, 삼각배색 조화 팔레트 추천
Tailwind CSS 11단계 명도 팔레트 생성기
기준 HEX 컬러 1개로 50부터 950까지 11단계 명도 팔레트 및 tailwind.config.js 테마 코드 생성
반응형 px ↔ rem ↔ vw 변환 & clamp() 수식기
루트 폰트 기준 px, rem, em, vw 동시 환산 및 미디어 쿼리 없는 CSS 유동 폰트 clamp() 수식 생성
CSS & Tailwind 그라데이션 에디터
선형(Linear) 및 원형(Radial) 그라데이션 시각적 조절 및 CSS/Tailwind 코드 원클릭 복사