색상 접근성 검사기

전경색과 배경색(16진수 코드)을 입력하여 대비율과 WCAG 준수 여부를 확인하세요.

색상 입력

전경색

배경색

텍스트 미리보기

이것은 크고 굵은 텍스트입니다.

이것은 일반 크기의 텍스트입니다.

대비율

21.00:1

대비율

일반 텍스트 (AA)

AAA

큰 텍스트 (AA)

18pt+ or 14pt+ bold

AAA

UI 구성요소 (AA)

Buttons, form controls, etc.

WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

색상 접근성 검사기 사용 방법

1
두 가지 색상 입력
전경(텍스트) 색상과 배경 색상을 hex 코드로 입력하세요. 예: #1a1a1a 와 #ffffff.
2
대비 확인
Check Accessibility를 클릭해 두 색상 간의 대비 비율을 계산하세요.
3
WCAG 결과 검토
일반 텍스트, 큰 텍스트, UI 구성 요소 수준에서 AA와 AAA에 대한 통과 또는 실패 배지를 확인하고 실시간 미리보기를 살펴보세요.

4
필요에 따라 조정
색상을 서로 바꾸거나 hex 값을 미세 조정해 프로젝트에 필요한 WCAG 수준을 충족할 때까지 맞추세요.

자주 묻는 질문

대비 비율이란 무엇이고 어느 정도가 좋은가요?

대비 비율은 텍스트와 배경 간의 휘도 차이를 1:1부터 21:1까지 측정합니다. WCAG는 AA 수준에서 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1을, 더 엄격한 AAA 수준에서는 각각 7:1과 4.5:1을 요구합니다.

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

AA는 대부분의 웹사이트와 법적 요건이 목표로 삼는 표준 수준이고, AAA는 최대 가독성을 위한 강화 수준입니다. 검사기는 둘 모두에 대해 통과 또는 실패를 보여 주어 필요에 맞는 기준을 선택할 수 있습니다.

왜 일반 텍스트는 실패하는데 큰 텍스트는 통과하나요?

대략 18pt 또는 14pt 굵게 이상으로 정의되는 큰 텍스트는 읽기 쉬우므로 WCAG가 더 낮은 대비 기준을 허용합니다. 따라서 같은 색상 조합이 큰 텍스트 규칙은 만족하면서 일반 텍스트 요건은 충족하지 못할 수 있습니다.

어떤 색상 형식을 입력해야 하나요?

색상을 #RRGGBB 또는 축약형 #RGB 형태의 hex 코드로 입력하세요. 도구가 입력값을 검증하고 일반 텍스트와 큰 텍스트의 실시간 미리보기를 보여 주어 실제 결과를 확인할 수 있습니다.

이 검사기는 무료이고 내 색상을 어딘가로 전송하나요?

가입 없이 완전히 무료이며, 대비 계산이 브라우저 안에서 전부 이루어지므로 테스트한 색상이 서버로 전송되지 않습니다.

색상 접근성 검사기

색상 접근성 검사기 사용 방법

자주 묻는 질문

관련 도구