명암비 검사기 (WCAG 기준 판정)

두 가지 색상을 입력하면 WCAG(Web Content Accessibility Guidelines) 명암비를 계산하여 AA·AAA 기준 충족 여부를 판정합니다.

마지막 업데이트: 2026-08-31

WCAG 명암비 기준 요약

기준 등급	대상	필요한 명암비
AA (최소 기준)	일반 텍스트	4.5:1 이상
AA (최소 기준)	큰 텍스트 (18pt 이상 또는 14pt 이상 굵게)	3:1 이상
AA (최소 기준)	UI 구성 요소·그래픽 객체	3:1 이상
AAA (고수준)	일반 텍스트	7:1 이상
AAA (고수준)	큰 텍스트	4.5:1 이상

명암비란 무엇인가요

명암비는 글자색과 배경색의 밝기 차이를 1:1(차이 없음)부터 21:1(흑백 사이의 최대 차이)까지의 숫자로 나타낸 값입니다. 숫자가 클수록 글자를 읽기 쉬워지며, WCAG(Web Content Accessibility Guidelines)는 이 값을 기준으로 AA·AAA라는 두 단계의 준수 등급을 정하고 있습니다. 이 도구는 입력한 두 가지 색상 코드로부터 명암비를 자동으로 계산하여, 5가지 기준 각각을 충족하는지 한눈에 확인할 수 있게 해 줍니다.

계산의 기초가 되는 값은 "상대 휘도(relative luminance)"라고 불립니다. HSL의 L값과 같은 단순한 명도가 아니라, sRGB의 감마 보정을 제거한 뒤 빨강·초록·파랑 각각에 대한 사람 눈의 감도 차이를 가중치로 반영해 합산하기 때문에, 실제로 눈에 보이는 밝기 인상에 더 가까운 값을 얻을 수 있습니다. 비슷한 색상끼리는 명암비가 낮게 나오기 쉬우므로, 판정 결과가 "불합격"이라고 해서 색상 자체가 잘못되었다는 의미는 아니며, 두 색상의 밝기 차이를 더 벌릴 필요가 있다는 뜻으로 받아들이면 됩니다.

명암비 검사기 사용 방법

글자색을 입력합니다 색상 선택기로 고르거나 16진수 색상 코드를 직접 입력합니다. 기본값은 진한 회색(#333333)입니다.
배경색을 입력합니다 마찬가지로 색상 선택기나 16진수 색상 코드로 지정합니다. 기본값은 흰색(#ffffff)입니다.
계산 결과를 확인합니다 값을 입력하면 실시간으로 명암비와 AA·AAA 각 기준에 대한 합격·불합격 배지가 표시됩니다.
필요하면 색상을 바꿉니다 "색상 바꾸기" 버튼으로 글자색과 배경색을 반전시켜, 배색안을 반대 패턴으로도 비교할 수 있습니다.

더 잘 활용하기 위한 팁

글자색과 배경색은 색상 선택기를 이용하거나, 16진수 색상 코드(`#RRGGBB`·`#RGB` 형식 모두 지원)를 직접 입력하여 지정할 수 있습니다.
"색상 바꾸기" 버튼을 누르면 글자색과 배경색을 빠르게 맞바꿔 비교할 수 있습니다. 로고나 아이콘의 배색안을 여러 개 비교할 때 유용합니다.
AAA 기준은 AA 기준보다 엄격한 수준입니다. 일반적인 웹사이트는 AA 기준을 충족하는 것이 권장되는 최소 기준이지만, 가독성이 특히 중요한 콘텐츠라면 AAA 기준을 목표로 하는 것이 바람직합니다.
버튼 테두리나 아이콘 등 UI 구성 요소·그래픽 객체에 대한 기준(3:1 이상)은 WCAG 2.1에서 새로 추가된 성공 기준(1.4.11)입니다.

이런 상황에서 활용됩니다

버튼·링크 배색 점검

사이트의 주요 조작 버튼이나 텍스트 링크의 글자색과 배경색을 입력해 AA 기준(4.5:1 이상)을 충족하는지 확인하는 용도입니다.

로고·배너 배경색과의 조합 확인

로고 색상이나 홍보 배너의 문구가, 게재될 배경색 위에서 충분한 가독성을 유지하는지 사전에 검증할 수 있습니다.

디자인 시스템 색상 팔레트 감사

기존 브랜드 컬러와 텍스트 컬러의 조합을 하나씩 입력해, UI 전체가 접근성 요건을 충족하는지 점검하는 작업에 사용할 수 있습니다.

다크 모드 배색 검증

다크 모드용으로 반전시킨 배색이 라이트 모드와 마찬가지로 명암비 기준을 충족하는지 개별적으로 확인할 때 유용합니다.

용어집

상대 휘도(relative luminance): sRGB의 감마 보정을 제거한 뒤, 빨강·초록·파랑에 대한 감도 차이를 가중치로 반영해 합산한 밝기 지표입니다. 명암비 계산의 기초가 됩니다.
명암비: 밝은 색과 어두운 색의 상대 휘도로부터 산출되는 1:1~21:1 사이의 숫자입니다. 값이 클수록 두 색상의 명암 차이가 크고, 글자를 읽기 쉽다는 것을 의미합니다.
WCAG: Web Content Accessibility Guidelines의 약자로, W3C가 제정하는 국제적인 웹 접근성 지침입니다. 명암비의 합격 기준도 이 안에서 정의됩니다.
AA 기준: WCAG에서 두 번째로 높은 달성 등급으로, 일반 텍스트는 4.5:1 이상의 명암비가 필요합니다. 많은 법령이나 지침이 참조하는 최소한의 목표 수준으로 여겨집니다.
AAA 기준: WCAG에서 가장 높은 달성 등급으로, 일반 텍스트는 7:1 이상의 명암비가 필요합니다. 필수는 아니지만, 가독성을 특히 중시하는 경우에 권장됩니다.
큰 텍스트: WCAG가 정의하는, 18포인트(약 24px) 이상의 일반 텍스트, 또는 14포인트(약 18.66px) 이상의 굵은 텍스트를 가리키는 구분입니다. 일반 텍스트보다 완화된 기준이 적용됩니다.
UI 구성 요소: 버튼 테두리나 입력란의 윤곽, 아이콘 등 조작 대상을 나타내는 시각적 요소를 말합니다. WCAG 2.1에서 3:1 이상의 명암비 기준이 새로 추가되었습니다.

자주 묻는 질문

WCAG(Web Content Accessibility Guidelines)는 더 많은 사람이 웹 콘텐츠에 접근할 수 있도록 하기 위한 국제 지침입니다. 명암비는 글자색과 배경색의 밝기 차이를 1:1(차이 없음)부터 21:1(흑백 사이의 최대 차이)까지의 숫자로 나타낸 것으로, 시각 장애가 있는 사람이나 고령자, 야외의 밝은 곳에서 스마트폰을 볼 때 등 다양한 조건에서 글자의 가독성을 객관적으로 평가하는 지표로 사용됩니다.

글자가 클수록 형태를 구분하기 쉬워, 명암비가 다소 낮아도 읽기 쉽다고 여겨지기 때문입니다. WCAG에서는 18포인트(약 24px) 이상의 일반 텍스트, 또는 14포인트(약 18.66px) 이상의 굵은 텍스트를 "큰 텍스트"로 정의하고, 일반 텍스트보다 완화된 기준(AA 기준에서 3:1 이상)을 적용합니다.

WCAG 2.1의 AA 기준은 여러 국가·지역의 법령이나 지침(예: 미국의 ADA, EU의 Web Accessibility Directive 등)에서 참조하는 최소 충족 기준으로 자리 잡고 있습니다. AAA 기준은 그보다 높은 수준으로 필수는 아니지만, 가독성이 특히 중요한 콘텐츠(공공기관 사이트 등)에서는 권장되기도 합니다.

WCAG 2.x에서는 먼저 각 색상의 sRGB 값에서 감마 보정을 제거한 "상대 휘도(relative luminance)"를 계산합니다. 그다음 밝은 쪽 색상의 휘도를 L1, 어두운 쪽을 L2라 하고 (L1+0.05)/(L2+0.05) 식으로 명암비를 산출합니다. 이 계산 방법은 W3C의 기술 사양으로 공개되어 있습니다.

여담 ― 웹 접근성 기준이 만들어진 배경

WCAG(Web Content Accessibility Guidelines)는 W3C(World Wide Web Consortium)가 주도해 제정한 국제 지침으로, 첫 번째 버전인 WCAG 1.0은 1999년에 공개되었습니다. 당시부터 이미 스크린 리더 등 보조 기술을 이용해 웹을 이용하는 시각 장애인 사용자가 겪는 장벽을 줄이는 것이 중요한 과제로 인식되고 있었습니다.

명암비 기준이 중요하게 다뤄지게 된 배경에는 색각 이상(색약)을 가진 사람이 인구의 일정 비율(남성의 경우 약 20명 중 1명 정도로 알려짐)로 존재한다는 점, 나이가 들면서 수정체가 황변하는 등의 이유로 명암 대비 감도가 낮아진다는 점, 야외 직사광선 아래에서는 스마트폰 화면이 잘 보이지 않게 된다는 점 등 시각과 관련된 다양한 조건이 있습니다. 수치 기준을 마련함으로써 디자이너가 주관적인 "보기 편함"에 대한 판단에만 의존하지 않고 객관적으로 접근성을 검증할 수 있게 되었습니다.

오늘날 많은 국가에서 웹 접근성이 법적 요구 사항이 되고 있으며(예: 일본에서는 2024년 4월부터 장애인차별해소법 개정으로 사업자의 정당한 편의 제공이 의무화됨), 명암비 확인은 기업의 웹사이트 제작에서 피할 수 없는 기본적인 품질 점검 항목 중 하나가 되었습니다.

모든 여담 보기