대비 검사기 작동 방식
이 도구는 두 색상 간의 WCAG 대비 비율을 계산하고, 해당 조합이 일반 텍스트, 큰 텍스트, 텍스트가 아닌 UI 구성 요소에 대해 AA 또는 AAA 수준을 충족하는지 보여줍니다. 모든 계산은 브라우저에서 로컬로 이루어지며, 입력한 색상은 업로드되지 않습니다.
WCAG 대비 검사기
두 색상을 입력하거나 고르면 WCAG 대비 비율이 즉시 나타납니다, 일반 텍스트와 큰 텍스트에 대한 AA/AAA 통과 배지와 함께.
대비 검사기 단계별 사용 방법
- 전경(텍스트) 색상을 입력하거나 선택하세요.
- 배경 색상을 입력하거나 선택하세요.
- 일반 텍스트, 큰 텍스트, 텍스트가 아닌 UI 구성 요소에 대한 대비 비율과 AA/AAA 배지를 확인하세요.
- 색상 바꾸기를 사용해 반대 방향으로도 조합을 확인하세요.
자주 사용되는 사례
- 버튼 컴포넌트를 출시하기 전에 브랜드 주 색상을 흰색이나 검정색과 대비해 확인하기.
- 밝은 카드 배경 위의 톤 다운된 회색 본문 텍스트가 여전히 AA 기준을 통과하는지 확인하기.
- 단락 안의 링크 색상이 일반 텍스트 기준인 4.5:1에 도달하는지 확인하기.
- 굵기가 가벼운 큰 제목이 완화된 큰 텍스트 기준인 3:1을 여전히 통과하는지 테스트하기.
자주 묻는 질문
이 도구가 제 색상을 서버로 전송하나요?
아니요, 계산은 전적으로 브라우저에서 JavaScript로 이루어지며 입력한 내용은 업로드되지 않습니다.
AA 또는 AAA를 충족하려면 어떤 대비 비율이 필요한가요?
WCAG 2.x는 일반 텍스트의 경우 AA 4.5:1, AAA 7:1, 큰 텍스트의 경우 AA 3:1, AAA 4.5:1을 요구합니다.
큰 텍스트란 무엇인가요?
일반 굵기로 최소 24px(18pt), 굵게는 약 18.7px(14pt) 이상을 의미하며, 그보다 작으면 일반 텍스트 기준이 적용됩니다.
전경과 배경을 바꿔도 왜 비율이 변하지 않나요?
비율 공식은 대칭적이어서 어떤 색이 텍스트에 쓰이는지가 아니라 더 밝은 휘도와 더 어두운 휘도만 비교합니다. 그래도 색상 바꾸기는 유용한데, 예를 들어 밝은 칩 위의 어두운 텍스트와 어두운 칩 위의 밝은 텍스트처럼 역할을 뒤바꿔도 이 조합이 통하는지 알려주기 때문입니다.
AA를 통과하면 제 디자인이 접근성을 갖췄다고 보장되나요?
아닙니다. 대비는 여러 WCAG 성공 기준 중 하나일 뿐입니다. 색각 이상이 있는 사람을 위한 색상 선택, 포커스 가시성, 텍스트 크기 조정, 키보드 탐색은 별도로 확인해야 하는 항목이며, 이 사이트의 색맹 시뮬레이터가 그중 하나를 다룹니다.
이것은 W3C나 WebAIM의 공식 도구인가요?
아닙니다. 공개된 WCAG 2.x 대비 공식을 독자적으로 구현한 것이며, W3C나 다른 접근성 기관과 관련이 없습니다.