색상 대비 체커

글자색과 배경색의 명암비를 계산해 WCAG 웹 접근성 기준(AA·AAA)을 통과하는지 확인하세요.

큰 텍스트 미리보기 Aa

일반 텍스트 미리보기입니다. The quick brown fox jumps.

명암비 (Contrast Ratio)
21.00 : 1
AA (일반 텍스트, 4.5:1↑): -AA (큰 텍스트, 3:1↑): -AAA (일반 텍스트, 7:1↑): -AAA (큰 텍스트, 4.5:1↑): -

명암비는 왜 중요한가요?

글자색과 배경색의 명암비가 낮으면 저시력자나 색약을 가진 사용자뿐 아니라, 밝은 야외에서 화면을 보는 일반 사용자에게도 텍스트가 잘 보이지 않을 수 있습니다. 웹 접근성 국제 표준인 WCAG(Web Content Accessibility Guidelines)는 이런 문제를 막기 위해 최소 명암비 기준을 정해두고 있습니다.

AA와 AAA 등급 기준

대부분의 웹사이트는 AA 등급을 최소 목표로 삼으며, 공공기관 웹사이트나 접근성이 특히 중요한 서비스에서는 AAA 등급을 권장하기도 합니다.

계산 방법

WCAG 2.1 공식에 따라 각 색상의 상대 휘도(relative luminance)를 구한 뒤, (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05) 공식으로 명암비를 계산합니다. 이 값은 1:1(전혀 구분 안 됨)부터 21:1(검정과 흰색의 최대 대비)까지의 범위를 가집니다.

자주 묻는 질문

왜 색상 대비가 밝기와 다른가요?

사람 눈은 색상마다 밝기를 다르게 인지합니다(초록색을 파란색보다 더 밝게 느끼는 등). WCAG의 상대 휘도 공식은 이런 인간의 색채 인지 특성을 반영해 각 색상 채널(R, G, B)에 서로 다른 가중치를 적용합니다.

로고나 장식적 요소에도 이 기준이 적용되나요?

WCAG의 명암비 기준은 주로 읽어야 하는 텍스트에 적용됩니다. 순수하게 장식적인 요소나 비활성화된(disabled) UI 요소, 로고에 포함된 텍스트 등은 예외로 취급되는 경우가 많습니다.