전체 도구 ↗

명도 대비 검사기

글자·배경 대비를 검사.

샘플 텍스트 Abc 가나다
광고

설명

두 색의 명도 대비비(WCAG 기준)를 계산해 웹 접근성 통과 여부(AA 4.5:1, AAA 7:1)를 확인합니다. 글자색·배경색 가독성 점검에 활용하세요.

광고

관련 도구

그라데이션 생성기그림자 생성기색상 팔레트명도대비 검사HEX·RGB·HSL 변환랜덤 색상 생성색상 혼합기CSS 둥근 모서리 생성기

웹사이트나 앱에서 텍스트와 배경의 색 대비가 부족하면 저시력자나 야외 밝은 환경에서 내용을 읽기 어렵습니다. 이 도구는 두 색상의 명도 대비비(Contrast Ratio)를 계산하고 WCAG 2.1 기준인 AA(4.5:1)와 AAA(7:1) 충족 여부를 즉시 알려 줍니다. 웹 접근성 준수가 필요한 디자이너와 개발자가 색상을 선택할 때 빠르게 검증하는 용도로 씁니다.

사용 방법

전경색(텍스트 색)과 배경색을 각각 입력합니다. HEX 코드(#ffffff), RGB 값, 또는 색상 피커로 직접 고를 수 있습니다. 입력하면 두 색상의 명도 대비비가 X:1 형식으로 표시되고, WCAG AA·AAA 기준 통과 여부가 초록색(통과) 또는 빨간색(실패)으로 표시됩니다. 기준을 통과하지 못하면 더 어둡거나 밝은 색으로 조정해 가며 통과 지점을 찾아냅니다.

WCAG 기준이 왜 중요한가요?

WCAG(Web Content Accessibility Guidelines)는 W3C가 정한 웹 접근성 국제 표준입니다. 한국에서도 '장애인·노인 등을 위한 정보 접근성 향상을 위한 법률(웹 접근성 법)'에 따라 공공기관 웹사이트는 WCAG 기준 준수가 의무입니다. AA 등급(4.5:1)은 일반 텍스트, 18px 이상 굵은 텍스트는 3:1 이상이면 통과합니다. AAA(7:1)는 노인·시각 약자를 위한 더 엄격한 기준이며, 의료·금융 등 중요 정보를 다루는 사이트에서 권장됩니다.

자주 하는 실수

회색 계열 텍스트(예: #888888)를 흰 배경에 쓰는 디자인은 세련돼 보이지만 대비비가 약 3.5:1로 AA 기준에 미달합니다. 브랜드 컬러를 버튼 텍스트 색으로 그대로 쓸 때도 배경과의 대비를 확인하지 않아 기준을 놓치는 경우가 많습니다. 또한 색약·색맹 사용자를 위해서는 색상 차이 외에 명도 차이도 충분히 두는 것이 중요하며, 이 도구에서 산출한 명도 대비비가 그 기준을 직접 수치로 보여 줍니다.

자주 묻는 질문

WCAG AA와 AAA의 차이는 무엇인가요?
AA는 일반 텍스트 기준 4.5:1, 18pt(약 24px) 이상 굵은 텍스트는 3:1 이상을 요구하는 표준 접근성 기준입니다. AAA는 더 엄격하여 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구하며, 시각 장애인 지원을 최우선으로 하는 사이트에서 지향하는 수준입니다.
이미지 위의 텍스트도 이 도구로 검사할 수 있나요?
이미지 배경은 위치마다 색이 달라 단일 대비비로 표현하기 어렵습니다. 이 도구는 단색 배경과 텍스트 색의 대비 검사에 적합하며, 이미지 배경에 텍스트를 올릴 때는 반투명 오버레이를 깔아 명도 차이를 확보하는 방법을 권장합니다.
대비 비율은 어떻게 계산되나요?
WCAG 명도 대비비는 두 색의 상대 휘도(Relative Luminance) 값을 이용해 (L1 + 0.05) / (L2 + 0.05)로 계산합니다. 상대 휘도는 각 색상 채널(R, G, B)을 감마 보정한 값의 가중 합으로 구합니다.
색상 피커로 고른 색과 실제 모니터 표시 색이 다를 수 있나요?
모니터 캘리브레이션 상태와 색 공간(sRGB vs. Display P3 등)에 따라 화면에서 보이는 색이 달라질 수 있습니다. 정확한 색상 관리가 필요한 전문 디자인 작업에서는 캘리브레이션된 모니터와 색상 프로파일을 함께 활용하세요.
한국 법적으로 웹 접근성이 의무인가요?
공공기관 웹사이트는 '국가정보화 기본법' 및 '장애인차별금지법'에 따라 WCAG 2.1 AA 이상 준수가 의무입니다. 민간 기업은 의무 대상이 아니지만, 장애인 이용자의 접근성 확보를 위해 자율적으로 준수하는 것이 권장됩니다.

개인정보처리방침

모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com

명도 대비율이란

명도 대비율은 두 색의 상대 휘도(relative luminance) 차이를 1:1부터 21:1까지의 값으로 나타낸 수치입니다. 흰색과 검은색 조합이 최대인 21:1이고, 같은 색끼리는 1:1이 됩니다. 이 도구는 글자색과 배경색을 입력하면 대비율을 계산해 WCAG(웹 콘텐츠 접근성 지침)의 AA·AAA 기준 통과 여부를 바로 알려 줍니다.

계산 원리

먼저 각 색의 sRGB 값(0~255)을 0~1로 정규화한 뒤 감마 보정을 풀어 선형화하고, 사람 눈의 색 민감도에 맞춘 가중치(빨강 0.2126, 초록 0.7152, 파랑 0.0722)를 곱해 상대 휘도 L을 구합니다. 그다음 밝은 쪽 휘도를 L1, 어두운 쪽을 L2로 두고 (L1 + 0.05) / (L2 + 0.05) 공식으로 대비율을 냅니다. 초록 가중치가 가장 크기 때문에 초록 계열은 밝게, 파랑 계열은 어둡게 평가됩니다. 두 색의 순서를 바꿔도 결과가 같은 것은 이 때문입니다.

기준값 표

텍스트 종류AAAAA
본문(일반 크기)4.5:17:1
큰 글자(24px 이상, 또는 굵은 18.66px 이상)3:14.5:1
UI 요소·그래픽 경계(비텍스트)3:1—

여기서 '큰 글자'는 대략 18pt(24px) 이상 또는 굵은 14pt(18.66px) 이상을 뜻합니다. 같은 색 조합이라도 글자 크기에 따라 통과 등급이 달라지므로, 실제 화면에 쓰는 크기 기준으로 확인해야 합니다.

이런 상황에 씁니다

연한 회색 안내문이나 배경 위 옅은 색 버튼처럼 '읽기 애매한' 색을 정할 때, 브랜드 컬러를 유지하면서 통과선을 넘기는 최소 명도를 찾을 때 유용합니다. 배경색을 조금 어둡게, 글자색을 조금 더 진하게 조정하며 4.5:1을 막 넘기는 지점을 잡는 식으로 반복 확인하면 됩니다.