🌗색상 명도 대비 비율(WCAG) 계산기

두 색상의 명도 대비 비율을 계산해 웹 접근성(WCAG) 기준 충족 여부 판단

전경색(텍스트) HEX

배경색 HEX

기준	통과 여부
AA (일반 텍스트, 4.5:1)	-
AA (큰 텍스트, 3:1)	-
AAA (일반 텍스트, 7:1)	-
AAA (큰 텍스트, 4.5:1)	-

색상 대비 비율(WCAG) 계산기 사용법

웹 접근성 국제 표준인 WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경색의 명도 대비 비율이 일정 기준 이상이어야 저시력자도 콘텐츠를 읽을 수 있다고 규정합니다. 대비가 낮으면 눈이 좋은 사람도 화면을 오래 볼 때 눈이 쉽게 피로해질 수 있습니다.

전경색(주로 텍스트)과 배경색의 HEX 코드를 입력하면 두 색상의 상대 휘도를 계산해 명도 대비 비율을 산출하고, WCAG 2.1의 AA·AAA 등급별 기준(일반 텍스트 4.5:1·7:1, 큰 텍스트 3:1·4.5:1) 통과 여부를 표로 보여줍니다.

일반적으로 본문 텍스트는 AA 등급(4.5:1) 이상을, 공공기관·금융 서비스처럼 접근성이 중요한 사이트는 AAA 등급(7:1)을 권장합니다. 버튼 색상, 링크 색상, 폼 안내 문구 등 웹사이트의 모든 텍스트 요소에 이 기준을 적용해 디자인 시안 단계에서 미리 검증해 보세요.

명도 대비는 색상 자체의 채도나 색조보다 밝기 차이에 크게 좌우됩니다. 예를 들어 빨간색과 초록색은 색상은 확연히 다르지만 밝기가 비슷하면 대비 비율이 낮게 나올 수 있으니, 디자인할 때는 색상뿐 아니라 밝기 차이도 함께 고려해야 합니다.

자주 묻는 질문

AA와 AAA 등급 중 어느 것을 기준으로 삼아야 하나요?

대부분의 웹사이트는 WCAG AA 등급(일반 텍스트 4.5:1 이상)을 최소 기준으로 삼습니다. 정부기관, 금융, 의료 등 접근성이 특히 중요한 서비스는 더 엄격한 AAA 등급(7:1 이상)을 권장합니다.

큰 텍스트는 왜 기준이 더 낮은가요?

18pt(약 24px) 이상 또는 14pt 굵은 글씨 이상의 큰 텍스트는 작은 텍스트보다 읽기 쉬워 낮은 대비에서도 인식이 가능하다고 판단해 WCAG에서 완화된 기준(3:1, 4.5:1)을 적용합니다.

색상 대비 비율(WCAG) 계산기 사용법

자주 묻는 질문

함께 보면 좋은 도구