웹 접근성 명도 대비 검사기 | WCAG 대비율 확인

색상 입력

검사 결과

사용 방법

전경색(텍스트 색상)과 배경색을 선택합니다.
실시간으로 명도 대비율과 WCAG 기준 통과 여부가 표시됩니다.
미리보기에서 실제 텍스트 가독성을 확인할 수 있습니다.

언제 사용하나요

웹 페이지나 앱 화면을 디자인할 때 텍스트가 배경 위에서 또렷하게 읽히는지 확인이 필요한 순간이 있습니다. 연한 회색 글씨를 흰 배경에 올리거나, 브랜드 색 버튼 위에 흰 글자를 얹는 경우가 대표적입니다. 이 도구는 전경색과 배경색을 입력하면 두 색의 명도 대비율을 계산해, 저시력 사용자나 밝은 야외 화면에서도 글자가 구분되는지 가늠하도록 돕습니다.

대비율과 WCAG 기준

대비율은 가장 밝은 색과 가장 어두운 색의 상대 휘도를 비교한 값으로, 1:1(차이 없음)부터 21:1(검정과 흰색)까지 나타납니다. WCAG 접근성 권고에서는 일반 텍스트가 AA 기준 4.5:1, AAA 기준 7:1 이상을 만족하도록 제안합니다. 큰 텍스트(18pt 또는 14pt 굵게 이상)는 기준이 완화되어 AA 3:1, AAA 4.5:1을 적용합니다. 같은 색 조합이라도 글자 크기와 굵기에 따라 통과 여부가 달라지는 이유입니다.

본문 회색 #767676 / 흰 배경 → 약 4.5:1, 작은 텍스트 AA 경계선
파란 버튼 #2563EB / 흰 글자 → 약 4.8:1, 버튼 라벨로 무난한 수준
연노랑 #FFE066 / 흰 배경 → 약 1.2:1, 텍스트로 쓰기 어려운 조합

결과 해석과 자주 틀리는 경우

표시된 비율이 기준값을 넘으면 해당 조합을 그대로 쓸 수 있고, 모자라면 글자를 더 어둡게 하거나 배경을 조정해 차이를 키웁니다. 디자인 작업에서 자주 어긋나는 부분은 다음과 같습니다.

회색 보조 텍스트(placeholder, 캡션)를 너무 연하게 두어 본문 기준을 밑도는 경우
호버·비활성 상태 버튼 색만 점검하고 기본 상태 라벨 대비를 빠뜨리는 경우
그라데이션 배경 위 텍스트에서 밝은 지점만 보고 어두운 끝 색을 놓치는 경우

계산 결과는 색상 값만을 기준으로 한 참고값입니다. 실제 화면에서는 글꼴, 안티앨리어싱, 주변 색의 영향이 더해지므로 최종 가독성은 실제 기기에서 함께 확인하는 편이 좋습니다.

자주 묻는 질문

WCAG 명도 대비 기준 AA와 AAA의 차이는 무엇인가요?: AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상의 대비율을 요구합니다. AAA는 더 엄격하여 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상이 필요합니다.
큰 텍스트의 기준은 무엇인가요?: WCAG 기준에서 큰 텍스트는 18pt(24px) 이상이거나 14pt(약 18.66px) 이상이면서 굵은(bold) 서체를 말합니다.
대비율은 어떻게 계산되나요?: 두 색의 상대 휘도를 각각 구한 뒤 (밝은 색 + 0.05) ÷ (어두운 색 + 0.05) 공식으로 계산합니다. 색의 밝기만 반영하므로 색상(Hue)이 달라도 밝기가 비슷하면 대비율은 낮게 나옵니다.
색약 사용자에게도 이 기준이 도움이 되나요?: 명도 대비는 색을 구분하기 어려운 사용자에게도 도움이 되지만, 빨강·초록처럼 색상으로만 정보를 구분하는 경우는 별도로 점검해야 합니다. 색 대비만으로 모든 색각 특성을 다루지는 못한다는 점을 참고하세요.
배경 이미지 위에 올린 텍스트는 어떻게 확인하나요?: 이미지에서 글자가 놓이는 영역의 대표 색을 골라 배경색으로 입력해 확인합니다. 영역마다 밝기가 다르면 가장 불리한(글자와 가까운) 색을 기준으로 점검하세요.
아이콘이나 그래프 색에도 대비 기준이 필요한가요?: 의미를 전달하는 아이콘·도형·경계선 등 비텍스트 요소에는 WCAG에서 3:1 기준을 권고합니다. 단순 장식 요소는 대상에서 제외됩니다.