색상 대비 체크기 사용법
- 글자색과 배경색을 색상 선택기로 고르거나 HEX 코드(예: #1a2b3c)를 직접 입력합니다.
- 명암 대비 비율이 "4.5 : 1"처럼 크게 표시됩니다. 값이 클수록 읽기 쉽습니다.
- 아래 칩에서 AA와 AAA 기준, 큰 글자와 UI 요소 기준의 통과 여부를 확인하고, 예시 글자로 실제 모습을 봅니다.
색상 대비 체크기의 원리
웹 접근성 지침(WCAG)은 두 색의 상대 휘도를 비교해 명암 대비 비율을 정의합니다. 먼저 각 색의 빨강, 초록, 파랑 값을 0에서 1 사이로 바꾸고 감마 보정을 푼 뒤 0.2126, 0.7152, 0.0722를 곱해 더하면 상대 휘도가 됩니다. 밝은 쪽 휘도에 0.05를 더한 값을 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 것이 대비 비율이며, 검은 글자와 흰 배경은 최댓값인 21 : 1입니다. 일반 글자는 AA 등급에서 4.5 : 1 이상, AAA 등급에서 7 : 1 이상이 필요하고, 큰 글자(18pt 이상 또는 굵은 14pt 이상)는 AA 3 : 1, AAA 4.5 : 1입니다. 버튼 테두리나 아이콘 같은 UI 요소는 3 : 1 이상을 권장합니다.
왜 대비가 중요한가요
대비가 낮은 글자는 시력이 좋은 사람에게도 야외나 밝은 화면에서 읽기 어렵고, 노안이나 저시력, 색각 이상이 있는 사용자에게는 거의 읽을 수 없습니다. 연한 회색 글자나 파스텔 배경 위의 흰 글자가 대표적인 문제입니다. 공공기관과 기업 웹사이트가 접근성 지침을 따르는 경우가 늘면서 디자이너와 개발자가 배포 전에 대비를 확인하는 일이 중요해졌습니다. 대비를 높이는 가장 쉬운 방법은 글자색을 더 어둡게 하거나 배경색을 더 밝게 하는 것입니다.
활용 팁
- 본문 글자는 AA 4.5 : 1 이상을 최소 기준으로 삼으세요.
- 색만으로 의미를 구분하지 말고 아이콘이나 글자를 함께 쓰세요.
- 다크모드와 라이트모드를 모두 검사해 보세요.
- 사진 위의 글자는 배경이 일정하지 않으니 반투명한 어두운 바탕을 깔아 주세요.
주의사항
이 검사기는 두 색의 비율만 계산합니다. 글꼴 굵기와 크기, 배경 이미지, 주변 색의 영향은 반영하지 않으며 법적 인증을 대신하지 않습니다. 중요한 서비스는 실제 사용자 테스트와 접근성 검사 도구를 함께 활용하세요.
자주 묻는 질문
AA와 AAA는 무엇이 다른가요?
둘 다 접근성 등급이며 AAA가 더 엄격합니다. 일반 글자는 AA가 4.5 : 1, AAA가 7 : 1 이상이어야 합니다.
큰 글자는 기준이 왜 낮은가요?
글자가 크고 굵으면 대비가 낮아도 알아보기 쉬워서 AA 3 : 1, AAA 4.5 : 1로 완화되어 있습니다.
HEX 코드는 3자리도 되나요?
네. #fff처럼 3자리로 입력하면 6자리로 바꿔서 계산합니다.