색상 대비 검사기
색상 조합을 WCAG 접근성 기준으로 검증하세요 — 실시간 미리보기와 자동 수정 제안 제공.
💡 텍스트 색상과 배경 색상을 선택하세요. 대비율과 WCAG AA/AAA 판정이 실시간으로 업데이트됩니다. 불합격이면 제안된 색상을 클릭해 즉시 수정할 수 있습니다.
색조와 채도는 유지하고 기준을 통과할 때까지 명도만 조정한 색상입니다. 클릭하면 적용됩니다.
이것은 16px의 일반 본문 텍스트입니다. 긴 문단에서도 편안하게 읽혀야 합니다 — 웹 콘텐츠 대부분이 이 크기입니다.
큰 제목 텍스트
색상 대비 검사기란?
색상 대비 검사기는 두 색상(일반적으로 텍스트와 배경) 간의 휘도 차이를 측정하여 1:1(동일한 색)부터 21:1(흰 바탕에 검정)까지의 비율로 표현합니다. 이 비율은 저시력, 색각 이상이 있는 사용자나 밝은 햇빛 아래에서 화면을 보는 사람에게 해당 조합이 읽기 쉬운지를 결정합니다. 웹 콘텐츠 접근성 지침(WCAG)은 웹사이트가 접근성을 갖추기 위해 충족해야 하는 최소 비율을 정의하며, 미국의 ADA, 유럽 접근성법, 한국의 웹 접근성 인증(WA 인증) 등 여러 국가에서 법률·제도의 일부입니다.
WCAG AA와 AAA의 차이는?
WCAG는 대비에 대해 두 가지 준수 수준을 정의합니다. AA 수준은 대부분의 법률과 감사에서 요구하는 표준으로, 일반 텍스트는 4.5:1 이상, 큰 텍스트(24px 이상, 굵은 글씨는 18.5px 이상)와 UI 구성 요소는 3:1 이상을 요구합니다. AAA 수준은 더 엄격하여 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구하며, 시각 장애가 더 심한 사용자를 위한 콘텐츠에 권장됩니다. 대부분의 프로젝트는 AA를 기본으로 하고 법률 문서나 의료 정보 같은 중요 콘텐츠에 AAA를 적용합니다.
대비율은 어떻게 계산되나요?
WCAG 공식은 먼저 각 색상을 상대 휘도로 변환합니다. 상대 휘도는 인지되는 밝기의 척도로, 사람의 눈이 녹색에 가장 민감하기 때문에 빨강이나 파랑보다 녹색에 더 큰 가중치를 둡니다. 각 RGB 채널에 감마 보정을 적용한 후 0.2126×R + 0.7152×G + 0.0722×B로 합산합니다. 대비율은 (L1 + 0.05) / (L2 + 0.05)이며, L1은 더 밝은 색의 휘도입니다. 이 도구는 정확한 공식을 브라우저 안에서 실행합니다 — 데이터가 기기 밖으로 전송되지 않습니다.
접근성 있는 색상 디자인 팁
- 색상에만 의존하지 마세요 — 오류 같은 상태에는 아이콘, 밑줄, 라벨을 함께 사용하세요
- 라이트·다크 테마 모두 테스트하세요 — 한쪽에서 합격한 팔레트가 다른 쪽에서 불합격하는 경우가 많습니다
- 흰 바탕의 회색 텍스트는 #767676 이하로 어두워야 AA에 합격합니다
- 호버, 포커스, 비활성 상태도 확인하세요 — UI 구성 요소로서 3:1을 충족해야 합니다
- 이 도구의 수정 제안을 사용하면 브랜드 색조를 유지하면서 명도만 조정할 수 있습니다