색상 대비 검사기
전경색과 배경색 간 WCAG 색상 대비 비율을 검사합니다.
이 도구에 대해
Color Contrast Checker는 두 색상 간의 명암비를 계산하고 해당 조합이 WCAG 2.0 AA 및 AAA 준수 기준을 충족하는지 여부를 보여주는 무료 온라인 WCAG 접근성 도구입니다. 16진수 값을 입력하거나 시각적 색상 선택기를 사용하여 일반 텍스트 및 큰 텍스트 기준 모두에 대한 합격/불합격 결과를 즉시 확인할 수 있습니다.
명암비는 다양한 파장에 대한 인간의 시각적 인식을 모델링한 WCAG 2.0 상대 휘도 공식을 사용하여 계산됩니다. 계산 결과는 실시간 텍스트 미리보기와 함께 표시되므로, 해당 색상 조합이 실제로 어떻게 보일지 정확히 확인할 수 있습니다. WCAG AA(일반 텍스트의 경우 4.5:1)는 전 세계 대부분의 접근성 규정에서 요구하는 표준입니다.
‘Color Contrast Checker’는 웹 디자이너, 프론트엔드 개발자, UI/UX 팀은 물론 WCAG 준수 제품을 개발하는 모든 이에게 필수적인 도구입니다. 특히 디자인 토큰 정의, 브랜드 색상 선정, 접근성 감사 단계에서 그 가치를 발휘하며, 시력이 약하거나 색각 이상이 있는 사용자도 쉽게 식별할 수 있는 색상 조합을 팀이 선택할 수 있도록 돕습니다.
가나다
다람쥐 헌 쳇바퀴에 타고파
0123456789 !@#$%^&*()
대비 비율
최고 수준
모든 텍스트 크기와 사용자에게 접근 가능
WCAG AA
WCAG AAA
사용 방법
- 1
Enter the foreground (text) color and the background color as HEX values or use the color pickers.
- 2
View the calculated contrast ratio and whether it passes WCAG AA and AAA standards.
- 3
Adjust colors until the desired accessibility level is achieved.
- 4
‘바꾸기’ 버튼을 사용하여 전경색과 배경색을 바꿔서 반전된 조합을 확인해 보세요.
- 5
디자인 시스템이나 스타일 가이드에 접근성 기준에 부합하는 색상 조합을 기록해 두어 일관성 있게 적용할 수 있도록 하세요.
기능
WCAG 2.0 Compliant
Calculates contrast ratios using the official WCAG 2.0 relative luminance formula.
AA & AAA Pass/Fail
Shows pass or fail for both WCAG AA (4.5:1) and AAA (7:1) levels for normal and large text.
Color Picker Support
Use the visual color picker or enter HEX values to set foreground and background colors.
Live Preview
See a live text preview rendered with your chosen colors to visualize the actual contrast.
일반적인 사용 사례
- ›디자인 시스템의 텍스트와 배경색 조합이 WCAG AA 기준을 충족하는지 확인하십시오.
- ›개발에 앞서 버튼, 링크 및 UI 요소의 색상이 접근성 기준을 충족하는지 확인하십시오.
- ›디자인 검토 과정에서 기존 웹사이트의 색상 팔레트를 점검하여 접근성 문제를 확인하십시오.
- ›모든 사용자가 내용을 명확하게 읽을 수 있도록 WCAG AA 기준을 충족하는 접근성 고려된 브랜드 색상을 선택하십시오.
자주 묻는 질문
WCAG 대비 요구사항은?
AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1이 필요합니다. AAA는 일반 7:1, 큰 텍스트 4.5:1이 필요합니다.
대비 비율은 어떻게 계산되나요?
WCAG 2.0 상대 휘도 공식을 사용하여 인간의 색상 인식을 고려해 계산합니다.
WCAG에서 '큰 글자'란 무엇을 의미하나요?
큰 글씨는 일반 굵기의 경우 18pt(24px) 이상, 굵은 글씨의 경우 14pt(18.67px) 이상으로 정의됩니다. 큰 글씨는 대비가 낮아도 읽기 쉬우므로 대비 기준치가 더 낮습니다.
WCAG AA 준수를 위한 최소 명암비는 얼마입니까?
일반 크기의 본문 텍스트는 4.5:1, 큰 텍스트(18pt 이상 일반체, 14pt 이상 굵은체)는 3:1의 대비 비율을 적용해야 합니다. WCAG AA는 WCAG 2.1, ADA, EN 301 549를 포함한 대부분의 접근성 규정에서 요구하는 표준입니다.
WCAG AA 등급을 충족한다고 해서 내 디자인이 접근성이 보장되는 것일까요?
명암비는 여러 요소 중 하나일 뿐입니다. 접근성 디자인에는 글자 크기, 줄 간격, 명확한 라벨링, 키보드 탐색 기능 등도 포함됩니다. AA 등급의 명암비 기준을 충족하는 것은 접근성을 보장하기 위한 필수 조건이지만, 그것만으로는 충분하지 않습니다.