대비 검사기
전경색과 배경색의 WCAG 대비 적합성을 테스트하고 실제 텍스트를 미리 보며 접근 가능한 Pantone 옵션을 비교하세요.
전경색
배경색
대비율
일반 텍스트
WCAG AA 4.5:1큰 텍스트
WCAG AA 3:1UI 컴포넌트
WCAG AA 3:1실시간 미리보기
본문 가독성을 확인하기 위한 일반 텍스트 예시입니다.
큰 텍스트 예시
접근 가능한 Pantone 제안
이 색상 조합은 선택한 대비 목표를 이미 충족합니다.
더 많은 도구
대비 검사기 사용 방법
- 전경과 배경에 HEX 색상을 입력하거나 Pantone 색상을 선택하세요.
- 일반 텍스트, 큰 텍스트, UI 컴포넌트에 대한 대비율과 WCAG AA 또는 AAA 통과 결과를 확인하세요.
- 실시간 미리보기, 색상 바꾸기, CSS 복사 또는 접근 가능한 Pantone 제안을 활용하세요.
대비 검사기 활용 사례
- 브랜드 색상 조합을 디지털 레이아웃에 적용하기 전에 검증하세요.
- 버튼, 폼, 내비게이션 등 UI 컴포넌트의 대비가 읽기 쉬운지 확인하세요.
- 인쇄 색상을 화면용으로 적용하기 전에 Pantone 기반 팔레트를 비교하세요.
- 접근성 검토와 디자인 전달을 위해 WCAG 대비 결과를 문서화하세요.
WCAG, UI, Pantone 워크플로를 위한 색상 대비 검사기
텍스트 색상, 배경색, 버튼 상태 또는 브랜드 팔레트를 웹사이트, 앱, 프레젠테이션, 디자인 시스템에 적용하기 전에 읽기 쉬운지 확인해야 할 때 이 대비 검사기를 사용하세요.
WCAG 대비 결과를 올바르게 읽기
이 도구는 두 색상의 상대 휘도를 계산하고 WCAG에서 사용하는 대비율을 반환합니다. 일반 본문 텍스트는 보통 AA에 4.5:1, AAA에 7:1이 필요하며, 큰 텍스트와 핵심 UI 컴포넌트는 더 낮은 기준을 적용합니다.
Pantone 색상과 디지털 접근성 연결하기
Pantone 색상은 브랜드와 인쇄 작업에서 자주 선택되지만, 화면상의 대응 색상도 접근성 검사가 필요합니다. Pantone 이름이나 HEX 값으로 검색하고 조합을 미리 본 뒤, 디자인 또는 개발팀에 전달하기 전에 접근 가능한 대안을 비교하세요.
디자이너와 개발자를 위한 실무 흐름
디자인 파일의 정확한 HEX 값으로 시작해 전경과 배경 방향을 모두 테스트하고, CSS나 보고서를 복사한 뒤 통과한 색상 조합을 Pantone 팔레트 문서와 함께 보관하세요.
대비 검사기 FAQ
이 대비 검사기는 무엇을 측정하나요?
전경색과 배경색 사이의 휘도 대비율을 측정한 뒤 결과를 WCAG 기준값과 비교합니다.
WCAG AA와 AAA 대비 요구 사항은 무엇인가요?
WCAG AA는 일반 텍스트에 최소 4.5:1, 큰 텍스트 또는 UI 컴포넌트에 3:1을 요구합니다. WCAG AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다.
Pantone 색상도 웹 접근성을 확인할 수 있나요?
네. Pantone 참조 색상을 화면용 색상값으로 변환한 뒤 디지털 대비를 확인할 수 있습니다. 최종 색상은 실제로 표시될 매체에서 항상 검증하세요.
대비 관련 안내
대비 결과는 디지털 색상값으로 계산되며 접근성 계획을 위한 것입니다. 실제 인쇄물, 재료, 조명, 디스플레이 보정에 따라 인지되는 대비가 달라질 수 있습니다.