🎨
WCAG 색상 대비 검사기

전경색과 배경색을 입력하면 WCAG 2.2 기준 대비율, AA/AAA 통과 여부, 큰 텍스트·UI 요소 기준, 추천 대체 색상을 확인할 수 있는 색상 대비 검사기입니다.

전경색과 배경색을 입력하면 WCAG 기준 색상 대비율을 계산하고, 일반 텍스트·큰 텍스트·UI 요소별 AA/AAA 통과 여부를 확인할 수 있습니다. 통과하지 못한 경우 현재 색상에서 최대한 덜 바꾸는 추천 색상도 함께 보여줍니다.

색상 대비 검사 결과

주의

큰 텍스트 또는 UI 요소에만 제한적으로 사용

대비율

4.10:1

일반 본문 텍스트에는 부족할 수 있습니다. 큰 제목, 굵은 텍스트, 아이콘, 버튼 경계 등 사용처를 제한하세요.

색상 미리보기

접근성 좋은 버튼과 본문 텍스트 예시

버튼 예시

전경색
`#1677ff`
배경색
`#ffffff`
전경 상대휘도
0.2058
배경 상대휘도
1.0000

선택한 검사 대상 기준

AA 미통과

검사 대상
일반 텍스트
필요한 AA 대비율
4.50:1
현재 대비율
4.10:1
판정
선택한 용도에 사용하기에는 대비가 부족합니다. 아래 추천 색상을 검토하세요.

WCAG 기준별 통과 여부

항목	기준	레벨	필요 대비	결과	설명

일반 텍스트	WCAG 1.4.3	AA	4.50:1	미통과	본문, 설명 문구, 작은 버튼 텍스트 등 일반 크기 텍스트 기준
큰 텍스트	WCAG 1.4.3	AA	3.00:1	통과	약 18pt 이상 또는 굵은 14pt 이상 텍스트 기준
일반 텍스트	WCAG 1.4.6	AAA	7.00:1	미통과	더 높은 접근성을 목표로 하는 일반 텍스트 기준
큰 텍스트	WCAG 1.4.6	AAA	4.50:1	미통과	큰 텍스트에서 강화된 접근성을 목표로 하는 기준
UI 요소·그래픽	WCAG 1.4.11	AA	3.00:1	통과	버튼 경계, 입력창 테두리, 아이콘, 그래프 식별 요소 기준

WCAG란?

WCAG는 Web Content Accessibility Guidelines의 약자로, 웹사이트와 앱을 더 많은 사람이 불편 없이 사용할 수 있도록 만든 웹 접근성 가이드라인입니다. 색상 대비, 키보드 사용, 이미지 대체 텍스트, 제목 구조, 입력폼 라벨처럼 사용자가 정보를 인식하고 조작하는 데 필요한 기준을 제공합니다.

그중 색상 대비는 글자, 버튼, 아이콘, 입력창 테두리 등이 배경과 충분히 구분되는지 확인하는 기준입니다. 색상 대비가 낮으면 시력이 낮은 사용자뿐 아니라 모바일 화면, 야외 환경, 어두운 모니터, 작은 글씨를 보는 일반 사용자도 내용을 읽기 어려울 수 있습니다.

WCAG 색상 대비 검사기는 언제 사용하나요?

WCAG 색상 대비 검사기는 텍스트 색상과 배경색을 입력해 현재 색상 조합이 접근성 기준에 맞는지 확인하는 도구입니다. 웹페이지를 만들거나 디자인을 검수할 때, 아래와 같은 상황에서 사용하면 좋습니다.

버튼 안의 텍스트가 배경색 위에서 잘 보이는지 확인할 때
본문, 설명 문구, 안내 문구, 에러 메시지의 글자색을 정할 때
브랜드 컬러를 웹사이트 배경색이나 강조색으로 사용해도 되는지 확인할 때
입력창 테두리, 아이콘, 그래프 선, 포커스 표시가 배경과 구분되는지 점검할 때
디자인 시스템의 색상 토큰을 만들기 전에 접근성 기준을 빠르게 검토할 때

검사 결과는 어떻게 보면 되나요?

이 검사기는 입력한 전경색과 배경색의 대비율을 계산하고, 일반 텍스트, 큰 텍스트, UI 요소 기준으로 통과 여부를 보여줍니다. 결과를 볼 때는 단순히 통과만 확인하기보다, 실제로 어디에 사용할 색상인지 먼저 정하는 것이 중요합니다.

본문·작은 안내 문구에 사용할 색상이라면 일반 텍스트 AA 4.5:1 이상을 우선 확인하세요.
큰 제목·굵은 타이틀에 사용할 색상이라면 큰 텍스트 AA 3:1 이상을 확인하세요.
버튼 테두리·입력창 경계·아이콘·그래프처럼 글자가 아닌 요소라면 UI 요소 3:1 이상을 확인하세요.
접근성을 더 높이고 싶다면 일반 텍스트는 AAA 7:1 이상, 큰 텍스트는 AAA 4.5:1 이상을 목표로 할 수 있습니다.

WCAG 색상 대비율 계산 방식

WCAG 색상 대비율은 두 색상의 밝기 차이를 수치로 나타낸 값입니다. 가장 낮은 대비는 1:1, 검은색과 흰색의 최대 대비는 21:1입니다.

대비율 = (더 밝은 색의 상대휘도 + 0.05) ÷ (더 어두운 색의 상대휘도 + 0.05)

이 계산기는 HEX 색상을 기준으로 상대휘도를 계산한 뒤 대비율을 보여줍니다. 예를 들어 같은 파란색이라도 흰 배경 위에서는 충분히 보일 수 있지만, 연한 회색 배경 위에서는 대비가 부족할 수 있습니다.

색상 대비가 부족하면 어떻게 개선하나요?

검사 결과가 기준을 통과하지 못했다면 색을 완전히 바꾸기보다, 먼저 전경색을 더 진하게 하거나 배경색을 더 밝게 조정해보는 것이 좋습니다. 이 검사기는 현재 색상 조합에서 기준을 통과할 수 있는 추천 대체 색상도 함께 보여줍니다.

본문 텍스트가 잘 안 보이면 글자색을 더 진하게 조정하세요.
버튼 배경색이 너무 밝다면 흰 글자 대신 더 어두운 글자색을 검토하세요.
브랜드 컬러가 너무 연하다면 본문보다는 아이콘, 라벨, 테두리 같은 보조 요소에 사용하는 것이 좋습니다.
비활성 버튼처럼 연한 색을 써야 하는 경우에도 사용자가 상태를 이해할 수 있도록 텍스트나 아이콘 설명을 함께 제공하세요.
이미지나 그라데이션 위 텍스트는 화면에서 가장 밝거나 복잡한 부분을 기준으로 다시 검사하세요.

버튼과 입력창도 색상 대비를 확인해야 하나요?

네. 웹 접근성에서 색상 대비는 본문 텍스트만의 문제가 아닙니다. 사용자가 클릭하거나 입력하거나 현재 위치를 파악해야 하는 요소도 배경과 충분히 구분되어야 합니다.

예를 들어 버튼 안의 텍스트는 잘 보여도 버튼 테두리가 배경과 거의 구분되지 않으면 사용자는 버튼이 어디에 있는지 알아보기 어렵습니다. 입력창 테두리, 체크박스, 라디오 버튼, 포커스 링, 아이콘, 차트의 선이나 막대도 실제 기능을 이해하는 데 필요하다면 색상 대비를 함께 확인하는 것이 좋습니다.

실무에서 자주 놓치는 색상 대비 항목

회색 안내 문구: placeholder, 도움말, 보조 설명이 너무 연하면 읽기 어렵습니다.
에러 메시지: 빨간색을 사용해도 배경과 대비가 낮으면 중요한 안내를 놓칠 수 있습니다.
비활성 상태: disabled 버튼이나 입력창도 상태를 알아볼 수 있을 정도의 구분이 필요합니다.
포커스 표시: 키보드 사용자가 현재 위치를 확인할 수 있도록 포커스 링 대비를 확인하세요.
다크 모드: 라이트 모드에서 통과한 색상이 다크 모드에서도 통과하는 것은 아니므로 별도 검사해야 합니다.

이 검사기의 장점

이 WCAG 색상 대비 검사기는 단순히 대비율만 보여주는 것이 아니라, 사용 목적에 따라 일반 텍스트, 큰 텍스트, UI 요소를 나누어 판정합니다. 그래서 색상 조합이 실제 화면에서 어디에 사용 가능한지 더 쉽게 판단할 수 있습니다.

또한 기준을 통과하지 못한 경우, 현재 색상 조합을 크게 해치지 않는 범위에서 전경색 추천과 배경색 추천을 함께 제공합니다. 브랜드 색상을 최대한 유지하면서 접근성을 개선해야 하는 디자이너, 퍼블리셔, 프론트엔드 개발자에게 유용합니다.

자주 묻는 질문

Q. WCAG AA와 AAA 중 어느 기준을 보면 되나요?
A. 대부분의 웹사이트는 먼저 AA 기준을 목표로 보면 됩니다. 공공, 금융, 교육, 의료처럼 접근성이 특히 중요한 화면은 AAA에 가까운 대비를 함께 검토하는 것이 좋습니다.
Q. 3:1만 넘으면 괜찮나요?
A. 큰 텍스트나 UI 요소에는 3:1 기준이 사용될 수 있지만, 본문이나 작은 안내 문구라면 4.5:1 이상을 목표로 하는 것이 안전합니다.
Q. 버튼은 텍스트 대비만 보면 되나요?
A. 아닙니다. 버튼 텍스트뿐 아니라 버튼 배경, 테두리, hover 상태, focus 상태도 함께 확인하는 것이 좋습니다.
Q. 추천 색상을 그대로 사용해도 되나요?
A. 추천 색상은 기준 대비율을 맞추기 위한 참고값입니다. 실제 적용 전에는 디자인 화면, 버튼 상태, 다크 모드, 모바일 화면에서도 다시 확인하는 것이 좋습니다.
Q. 색상 대비만 맞추면 웹 접근성이 해결되나요?
A. 아닙니다. 색상 대비는 중요한 접근성 요소이지만, 키보드 이동, 대체 텍스트, 제목 구조, 폼 라벨, 오류 안내, 포커스 표시도 함께 확인해야 합니다.