명도대비 검사기
글자색과 배경색을 고르면 WCAG 접근성 기준(AA·AAA) 통과 여부를 바로 확인할 수 있어요.
기본값(#333333 · #ffffff)으로 이미 계산해 뒀어요. 아래에서 색을 바꾸면 결과가 즉시 다시 계산됩니다.
실제 화면 미리보기
본문 텍스트는 이렇게 보입니다. 가나다라마바사 ABC 123 — 일반 텍스트 기준이에요.
아주 선명하게 읽혀요
이 배색이 다크 모드에서도 통과할까요? 색상 팔레트에서 새 조합을 만들어 다시 검사해 보세요.
설명
글자색과 배경색, 두 색의 명도대비를 계산해 WCAG 접근성 기준(AA/AAA) 통과 여부를 바로 보여드립니다. 계산은 모두 브라우저 안에서만 이뤄집니다.
관련 도구
명도대비(Contrast Ratio)는 텍스트 색상과 배경 색상 사이의 밝기 차이를 수치로 나타낸 지표로, 시각 약자와 고령 사용자가 콘텐츠를 읽을 수 있는지 판단하는 핵심 기준입니다. WCAG 2.1 기준으로 일반 텍스트는 4.5:1, 굵은 텍스트(18pt 이상 또는 Bold 14pt 이상)는 3:1 이상이어야 AA 등급을 통과합니다. 이 도구에서 전경색과 배경색을 고르면 대비 비율과 AA/AAA 등급 통과 여부를 즉시 확인할 수 있습니다.
사용 방법
전경색(텍스트 색상)과 배경색을 각각 색상 피커에서 고릅니다. 자주 쓰는 배색 프리셋 칩을 누르거나 ⇄ 버튼으로 두 색을 맞바꿔 확인할 수도 있습니다. 색을 고르는 즉시 명도대비 비율이 계산되고, WCAG 2.1 AA/AAA 등급 통과 여부가 일반 텍스트와 큰 텍스트로 나뉘어 표시됩니다. 실시간으로 색상을 조절하면서 기준을 충족하는 조합을 빠르게 찾아낼 수 있습니다.
WCAG 등급별 기준과 실무 활용
WCAG 2.1은 A, AA, AAA 세 단계로 나뉩니다. 국내 '장애인차별금지법' 및 '한국형 웹 콘텐츠 접근성 지침 2.2(KWCAG 2.2)'는 AA 등급 이상을 권고하며, 공공기관 웹사이트는 이를 준수해야 합니다. 실무에서 가장 흔히 실패하는 조합은 흰 배경(#ffffff)에 연회색 텍스트(#999999)로, 이 경우 대비 비율이 2.85:1에 불과해 AA를 통과하지 못합니다. 텍스트를 #767676 이상의 어두운 회색으로 변경하면 4.54:1로 AA를 통과합니다. 버튼, 아이콘, 폼 레이블 등 UI 요소에도 같은 기준을 적용하면 전체 접근성 품질이 높아집니다.
자주 하는 실수와 팁
배경 이미지 위에 텍스트를 올릴 때는 이미지의 가장 밝은 부분과 텍스트 색상으로 대비를 계산해야 최악의 경우에도 가독성을 확보할 수 있습니다. 그라디언트 배경은 시작색과 끝색 양쪽 모두 검사하는 것이 원칙입니다. 색상만으로 정보를 구분하는 설계(빨강=오류, 초록=성공)는 색맹 사용자에게 접근 불가 상태가 되므로 아이콘이나 텍스트를 함께 써야 합니다. 브랜드 컬러를 바꿀 수 없는 상황이라면 텍스트에 흰색 또는 검은색 테두리(text-shadow)를 추가해 대비를 보완하는 방법도 활용됩니다.
자주 묻는 질문
AAA 등급은 꼭 맞춰야 하나요?
이미지 텍스트(로고 등)도 명도대비 기준이 적용되나요?
플레이스홀더 텍스트도 검사해야 하나요?
다크 모드와 라이트 모드를 모두 검사해야 하나요?
투명도(opacity)가 있는 색상은 어떻게 계산하나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
명도대비 검사기란
텍스트 색과 배경색을 입력하면 두 색의 명도 대비(contrast ratio)를 계산해 WCAG 웹 접근성 기준 통과 여부를 즉시 알려주는 도구입니다. 대비 값은 최소 1:1(같은 색)부터 최대 21:1(순수 검정과 순수 흰색)까지의 범위로 나오며, 값이 클수록 글자가 배경에서 뚜렷하게 읽힙니다. 저시력 사용자, 색약, 밝은 야외 화면 등 다양한 환경에서 글자가 읽히는지를 수치 하나로 판단할 수 있습니다.
사용법
글자색과 배경색을 색상 피커에서 각각 고르면 대비 값이 자동으로 계산됩니다. 결과에는 대비 비율과 함께 일반 텍스트, 큰 텍스트 각각에 대한 AA/AAA 등급 통과 여부가 표시됩니다. 두 색을 서로 바꿔도 대비 값은 동일하므로(대비는 순서와 무관) ⇄ 맞바꾸기 버튼으로 직접 확인해 볼 수 있습니다. 통과하지 못하면 글자색을 조금 더 어둡게(밝은 배경일 때) 또는 밝게 조정해 값을 다시 확인하세요.
계산 원리
먼저 각 색의 RGB 값을 0~1로 정규화한 뒤 sRGB 감마 보정을 되돌려 선형 값으로 바꾸고, 여기에 사람 눈의 민감도 가중치(R 0.2126, G 0.7152, B 0.0722)를 곱해 상대 휘도(L)를 구합니다. 초록에 가중치가 가장 큰 이유는 사람 눈이 초록빛에 가장 민감하기 때문입니다. 두 색의 휘도를 밝은 쪽 L1, 어두운 쪽 L2로 놓고 (L1 + 0.05) / (L2 + 0.05) 공식으로 대비 비율을 산출합니다. 그래서 단순히 밝기 차이가 아니라 초록 성분이 많은 색은 대비가 더 높게 나옵니다.
WCAG 기준표
| 텍스트 구분 | AA(최소) | AAA(강화) |
|---|---|---|
| 일반 텍스트 | 4.5:1 | 7:1 |
| 큰 텍스트(18pt 이상, 또는 14pt 이상 굵게) | 3:1 | 4.5:1 |
| UI 컴포넌트·그래픽 요소 | 3:1 | — |
여기서 큰 텍스트란 대략 24px(굵은 글씨는 약 18.66px) 이상을 뜻합니다. 국내 공공기관·공기업 웹사이트가 받는 웹 접근성 품질인증(WA)도 이 WCAG 대비 기준을 근거로 합니다.
활용 상황과 팁
본문 텍스트, 버튼 라벨, 입력창 안내문(placeholder), 그래프 범례처럼 읽혀야 하는 모든 요소에 적용하세요. 특히 연한 회색 글씨는 디자인상 세련돼 보여도 대비 미달인 경우가 많으니 반드시 검사가 필요합니다. 팁으로, 통과가 아슬아슬할 때는 글자색보다 글자 크기를 키우거나 굵게 처리하면 기준이 4.5:1에서 3:1로 완화되어 통과할 수 있습니다. 다만 이 검사는 단색 대 단색 기준이므로, 배경이 이미지·그라데이션이면 글자가 겹치는 실제 픽셀 색을 넣어 확인해야 합니다.
자주 묻는 질문
대비만 통과하면 색약 사용자도 다 읽나요?
대비 통과는 명도(밝기) 차이를 보장할 뿐 색상 구분까지 보장하지는 않습니다. 빨강·초록처럼 명도가 비슷하면서 색상만 다른 조합은 대비 값이 낮아 대체로 걸러지지만, 정보를 색으로만 전달하지 말고 아이콘·텍스트·패턴을 함께 쓰는 것이 안전합니다.
21:1은 어떤 경우에 나오나요?
순수 검정(#000000)과 순수 흰색(#FFFFFF) 조합에서만 나오는 최대값입니다. 실무에서 21:1을 굳이 맞출 필요는 없고, 완전 검정 배경에 완전 흰 글씨는 눈부심(할레이션)을 유발할 수 있어 오히려 살짝 낮춘 색을 쓰기도 합니다.
투명도(알파)가 있는 색도 검사되나요?
WCAG 대비 공식은 불투명한 두 색을 전제로 합니다. 반투명 글자나 배경이라면 아래 깔린 색과 합성된 최종 색을 먼저 구한 뒤 그 HEX 값으로 검사해야 정확합니다.
큰 텍스트 기준은 정확히 몇 px인가요?
WCAG 기준으로 18pt(약 24px) 이상이거나, 굵게 처리한 14pt(약 18.66px) 이상이면 큰 텍스트로 봅니다. 이 경우 AA 기준이 4.5:1에서 3:1로 완화됩니다.