대비 검사기
대비 검사기는 글자색과 배경색 사이의 WCAG 2.1 명암비를 계산하고, 그 조합이 일반 텍스트와 큰 텍스트에서 AA와 AAA를 통과하는지 보여 줍니다.
The quick brown fox
Small text sample — 14px regular weight
이 도구 소개
대비 검사기는 글자색과 배경색 사이의 WCAG 2.1 명암비를 계산하고, 그 조합이 일반 텍스트와 큰 텍스트에서 AA와 AAA를 통과하는지 보여 줍니다.
사용 방법
- 글자색을 입력하거나 선택합니다.
- 배경색을 입력하거나 선택합니다(3자리 축약형을 포함한 HEX 값을 쓸 수 있습니다).
- 명암비와 일반 텍스트·큰 텍스트의 AA/AAA 결과를 확인합니다.
- 필요한 수준을 통과할 때까지 두 색 중 하나를 조정합니다.
알아두면 좋은 점
- WCAG 2.1 AA는 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 명암비를 요구합니다.
- WCAG 2.1 AAA는 일반 텍스트에 최소 7:1, 큰 텍스트에 4.5:1을 요구합니다.
- 큰 텍스트란 보통 굵기 18 pt(24 px) 이상 또는 굵게 14 pt(약 18.66 px) 이상인 텍스트를 말합니다.
- 명암비는 1:1(같은 색)부터 21:1(흰색 위의 검정)까지입니다.
- 명암비는 WCAG 공식에 따라 각 색의 상대 휘도로 계산합니다.
모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.
자주 묻는 질문
접근성을 위해 필요한 명암비는 얼마인가요?
WCAG 2.1 AA 수준에서는 일반 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1이 필요합니다. AAA 수준에서는 7:1과 4.5:1로 높아집니다.
초록 배경에 흰 글자는 접근성이 괜찮나요?
색조에 따라 다릅니다. 밝은 초록 중 상당수는 흰 글자로 AA를 통과하지 못하고, 어두운 초록은 대개 통과합니다. 정확한 HEX 값을 입력해 확인하세요.
WCAG에서 큰 텍스트는 어떤 기준인가요?
보통 굵기로 18포인트(24 px) 이상, 또는 굵게 14포인트(약 18.66 px) 이상인 텍스트입니다.
WCAG 대비 기준이 버튼과 아이콘에도 적용되나요?
WCAG 2.1 성공 기준 1.4.11은 사용자 인터페이스 구성 요소와 의미 있는 그래픽이 주변과 최소 3:1의 대비를 가질 것을 요구합니다.