웹 접근성 · 색상 도구
명도대비 검사기
글자색과 배경색을 선택하면 명도대비를 즉시 계산하고 WCAG 2.2 AA·AAA 기준 통과 여부를 한눈에 보여줍니다.
Color contrast
색상 설정
Live preview
실시간 미리보기
Readable design
읽기 편한 색상은 좋은 경험을 만듭니다.
본문과 버튼, 입력 요소의 색상 대비를 점검하면 더 많은 사용자가 콘텐츠를 편안하게 읽고 이용할 수 있습니다.
예시 링크WCAG 2.2 result
접근성 기준 결과
현재 색상 조합을 텍스트 크기와 용도별 기준으로 판정합니다.
Accessible suggestions
접근 가능한 색상 추천
배경색은 유지하고 글자색을 조정해 목표 대비율을 만족하는 가까운 색상을 추천합니다.
추천 색상을 누르면 바로 적용됩니다.
사용 안내
명도대비와 WCAG 기준 이해하기
명도대비는 전경색과 배경색의 상대적 밝기 차이를 1:1부터 21:1까지의 비율로 나타냅니다. 숫자가 클수록 두 색상을 구분하기 쉽습니다.
일반 텍스트 기준
WCAG 2.2의 최소 기준인 AA는 일반 텍스트 4.5:1 이상입니다. 더 높은 AAA는 7:1 이상이며, 작은 본문과 보조 설명처럼 오래 읽는 글에는 높은 대비가 유리합니다.
큰 텍스트 기준
24px 이상의 일반 글자 또는 약 18.7px 이상의 굵은 글자는 큰 텍스트로 봅니다. 큰 텍스트는 AA 3:1, AAA 4.5:1 이상의 대비를 사용합니다.
버튼과 입력 요소
사용자가 기능과 상태를 이해하는 데 필요한 버튼 경계, 입력창 테두리, 아이콘과 그래픽은 인접한 색상과 3:1 이상의 비텍스트 대비를 확보하는 것이 좋습니다.
대비율 계산 원리
sRGB 색상을 선형화해 상대 휘도를 구한 뒤 (밝은 휘도 + 0.05) ÷ (어두운 휘도 + 0.05)로 계산합니다. 같은 색은 1:1, 검정과 흰색은 21:1입니다.
색상만으로 구분하지 않기
오류나 성공 상태를 색상만으로 전달하지 말고 아이콘, 문구, 굵기 또는 밑줄을 함께 사용하세요. 대비가 좋아도 색각 특성에 따라 색상 차이를 알아보기 어려울 수 있습니다.
실제 화면에서도 확인
계산 결과는 단색 전경과 배경의 기준입니다. 사진 위 글자, 투명도, 그라데이션, 글꼴의 매우 가는 획은 실제 가독성을 떨어뜨릴 수 있으므로 다양한 화면에서 함께 확인하세요.
이 도구는 W3C WCAG 2.2 텍스트 대비(1.4.3)와 비텍스트 대비(1.4.11)를 기준으로 계산합니다.