색상 대비 검사기

불투명한 글자와 배경 색상의 대비율 및 WCAG AA·AAA 텍스트 기준을 확인하세요.

글자 색과 배경 색의 대비율을 계산하고 WCAG AA와 AAA 기준을 충족하는지 판정합니다.

사용 순서

글자 색상과 배경 색상을 HEX, RGB, HSL 또는 색상 이름으로 입력합니다.
대비율과 AA 일반, AA 큰 글자, AAA 일반, AAA 큰 글자 판정 결과를 확인합니다.
일반 크기와 큰 글자 미리보기로 실제 보이는 모양을 확인합니다.

예시

글자 #777777, 배경 #ffffff는 대비율 4.47입니다. AA 큰 글자 기준 3:1은 통과하지만 AA 일반 글자 기준 4.5:1은 통과하지 못합니다.

한계

불투명한 색만 계산합니다. 알파 값이 1보다 작은 색이나 투명도가 들어간 8자리 HEX는 오류로 처리됩니다. 입력 색은 8비트 채널 HEX로 맞춘 뒤 계산하므로 소수 단위 색 값을 넣으면 결과가 조금 달라질 수 있습니다. 이미지나 그라데이션 위의 글자는 계산하지 않습니다.

보안 주의

대비율이 기준을 넘어도 색각 이상이 있는 사용자에게는 두 색이 구분되지 않을 수 있습니다. 링크처럼 색으로만 구분하는 글자에는 밑줄이나 아이콘 같은 색 이외의 단서도 함께 두세요.

배경 지식

대비율은 두 색의 상대 휘도 차이를 1:1부터 21:1까지 나타낸 값입니다. 값이 클수록 두 색의 밝기 차이가 커서 글자가 잘 읽힙니다. 흰 배경에 검은 글자는 21:1이 되고, 두 색이 같으면 1:1이 됩니다. 대비율은 색 값만으로 정해지며 화면 밝기나 기기 종류는 반영되지 않습니다.

WCAG 2.x는 일반 크기 글자에 4.5:1 이상, 큰 글자에 3:1 이상을 AA 기준으로 정합니다. 큰 글자는 보통 24px 이상이거나 굵은 글꼴로 약 18.66px 이상인 글자를 뜻합니다. AAA 기준은 일반 글자 7:1, 큰 글자 4.5:1입니다. 같은 색이라도 글자 크기와 굵기에 따라 적용되는 기준이 달라지므로, 먼저 해당 글자가 큰 글자인지 판단해야 합니다.

디자인 시스템에서는 본문 색을 하나 정하고 배경마다 대비를 검사해 두는 방식이 흔합니다. 회색 계열 보조 글자는 흰 배경에서 대비가 빨리 떨어지므로, 연한 회색을 쓸 때 특히 확인이 필요합니다. 이 도구의 샘플 값 #777777도 AA 일반 글자 기준에는 미달합니다. 색을 정할 때 디자인 토큰 단계에서 대비 기준을 함께 정해 두면 나중에 색을 바꿔도 같은 기준을 유지할 수 있습니다.

자주 묻는 질문

대비율이 4.5:1에 조금 못 미치면 어떻게 하나요?

기준 미만이면 AA 일반 글자로는 통과하지 못합니다. 글자 색을 조금 더 어둡게 조정해 대비율을 다시 계산하는 것이 가장 간단하며, 같은 색상 계열에서 밝기만 바꾸면 디자인 느낌을 유지하기 쉽습니다.

버튼 글자도 이 기준으로 검사하면 되나요?

버튼의 글자 색과 버튼 배경 색으로 검사할 수 있습니다. 다만 비활성 상태의 컴포넌트는 WCAG 대비 기준의 적용 대상에서 빠지는 경우가 있으므로, 포커스 표시와 테두리 대비는 별도로 확인하세요.

큰 글자 기준은 언제 적용되나요?

24px 이상의 글자이거나, 굵은 글꼴로 약 18.66px 이상인 글자를 큰 글자로 봅니다. 기준에 해당하는지는 실제 CSS의 글꼴 크기와 굵기로 판단해야 하며, 큰 글자 기준은 일반 글자보다 완화된 값입니다.