본문으로 건너뛰기
patrache.tools

색상 대비 검사

색상 대비 검사 무료 온라인 도구. WCAG AA/AAA 기준 대비 비율 측정, 웹 접근성 등급 확인. 브라우저 처리, 설치 불필요.

전경색
배경색
21.00:1
대비 비율
일반 텍스트
AA (4.5:1)통과
AAA (7:1)통과
큰 텍스트
AA (3:1)통과
AAA (4.5:1)통과
미리보기

가나다라마바사 아자차카타파하 1234567890

가나다라마바사 아자차카타파하 1234567890

lock파일이 서버로 전송되지 않습니다
공유
임베드

내 사이트에 이 도구 임베드하기

두 색상 간 대비 비율을 검사하는 무료 온라인 도구입니다. WCAG 2. 1 접근성 기준(AA, AAA)을 충족하는지 자동으로 판정합니다. 브라우저에서 직접 처리되며 서버 전송이 없습니다. 웹 접근성 준수, UI 디자인 검증에 필수 도구입니다.

색상 대비 검사 어떻게 사용하나요?

  1. 전경색(텍스트)과 배경색을 입력합니다.
  2. 대비 비율과 WCAG 등급(AA/AAA)을 확인합니다.
  3. 필요 시 색상을 조정하여 기준을 충족시킵니다.

색상 대비 검사 자주 묻는 질문

WCAG AA와 AAA의 차이는 무엇인가요?

AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상의 대비를 요구합니다. AAA는 더 엄격하여 각각 7:1과 4.5:1을 요구합니다.

적합한 대비 비율이 아니면 어떻게 하나요?

색상을 더 밝거나 어둡게 조정하여 대비를 높이세요. 도구에서 실시간으로 결과를 확인할 수 있습니다.

큰 글씨는 대비 기준이 더 낮다고 하는데 어느 정도부터 큰 글씨인가요?

WCAG는 굵기가 보통인 글자는 18pt(약 24px) 이상, 굵은 글자(bold)는 14pt(약 18.7px) 이상을 큰 글씨로 봅니다. 이 조건을 만족하면 AA 기준이 4.5:1에서 3:1로 낮아집니다. 다만 이는 최소 기준이지 목표가 아닙니다. 본문 글자는 노트북 화면 밝기를 낮추거나 햇빛 아래에서도 읽혀야 하므로, 가능하면 7:1에 가깝게 잡아 두는 편이 안전합니다.

반투명한 배경이나 사진 위의 글자는 대비를 어떻게 확인하나요?

대비 계산은 단색 두 개를 전제로 하므로, 사진처럼 배경이 계속 변하는 경우에는 가장 밝은 지점과 가장 어두운 지점을 각각 스포이드로 집어 두 번 확인해야 합니다. 둘 다 통과하지 않으면 실제로는 일부 구간에서 글자가 묻힙니다. 실무에서는 사진 위에 반투명 검정 레이어를 덮거나 글자에 그림자를 넣기보다, 아예 단색 띠를 깔고 그 위에 글자를 얹는 편이 가장 확실합니다.

색상 대비 검사 잘 활용하는 방법은?

  • 본문은 4.5:1 이상, 18pt 이상 큰 글씨나 굵은 14pt는 3:1 이상이면 AA 기준을 충족합니다.
  • 국내 공공 웹사이트는 한국형 웹 접근성 지침(KWCAG)을 따르며, 대비 기준은 WCAG와 같습니다.
  • 아이콘이나 버튼 테두리 같은 비텍스트 요소도 3:1 대비가 필요합니다.

Powered by Patrache Studio Tools

광고 차단을 해제해 주세요

이 도구를 이용하려면 이 사이트의 광고 차단을 해제해 주세요. 광고 수익으로 무료 서비스를 운영합니다.

광고 차단기 아이콘을 눌러 이 사이트의 차단을 끈 뒤 다시 확인해 주세요.