서버전송 없음 · 브라우저 처리

명암비 체커

두 색상의 명암비를 계산해 WCAG AA·AAA 등급을 판정해요.

글자색

배경색

이 글자가 잘 보이나요?

즐겨찾기하면 홈에서 바로 찾을 수 있어요

이럴 때 쓰세요

검정 글자 + 흰 배경 → 21:1, AAA 통과

회색 글자 #777 on #FFF → 4.48:1 (AA 미달)

브랜드 색이 접근성 기준을 넘는지 확인

이렇게 사용하세요

11단계글자색과 배경색을 고르세요

22단계WCAG AA·AAA 통과 여부가 바로 나와요

33단계통과할 때까지 밝기를 조절해 보세요

결과가 예상과 다를 때

AA인데도 읽기 힘들어요

AA는 최소 기준이에요. 본문에는 AAA를 권해요.

큰 글자는 기준이 다른가요

네. 18pt 이상 굵은 글자는 기준이 완화돼요.

자주 하는 실수

여섯 자리 형식으로 입력해야 정확히 계산됩니다. #FFF처럼 줄여 써도 되지만 자릿수가 어긋난 값은 잘못된 대비를 만듭니다. 두 자리씩 묶어 입력하고 화면에 나란히 비교해 보세요.
4.5 대 1은 본문 기준입니다. 24픽셀 이상 또는 굵은 글자 18.7픽셀 이상은 큰 글자로 보고 3 대 1만 넘으면 됩니다. 같은 색이라도 크기에 따라 통과 여부가 달라집니다.
투명도가 있는 색은 그대로 넣지 마세요. rgba나 8자리 표기의 알파 값은 계산에 반영되지 않습니다. 실제로 배경 위에 겹쳐 보이는 색을 먼저 정한 뒤 그 색으로 비교해야 합니다.
배경 이미지의 대비를 한 색으로 대표할 수 없습니다. 밝은 영역에서는 통과하고 어두운 영역에서는 실패할 수 있습니다. 이미지 위 글자는 가장 밝고 가장 어두운 픽셀을 기준으로 각각 확인하세요.

계산 근거

WCAG는 색을 sRGB 채널로 나누고, 낮은 값은 선형으로 높은 값은 2.4제곱 곡선으로 보정한 상대 휘도를 정의합니다(가중치 0.2126·0.7152·0.0722). 명암비는 (밝은 쪽 휘도+0.05)/(어두운 쪽 휘도+0.05)이며, 본문 AA 4.5, AAA 7, 큰 글자 AA 3이 기준입니다.

실제로 계산해 보면

검정 글자를 흰 배경에 쓰면 어느 정도인가요?

21 대 1로 AAA를 넉넉히 넘습니다. 순수 검정과 순수 흰색은 휘도 차이에서 나올 수 있는 최댓값이라 두 값이 정확히 맞아떨어집니다.

777777 같은 회색 글자는요?

4.48 대 1이라 AA에 0.02만큼 모자랍니다. 화면에서는 잘 보이지만 기준을 통과하지 못합니다. 한 자리만 진하게 바꾼 767676이면 4.54 대 1로 통과합니다.

흰 글자를 진한 파란 버튼에 넣으면요?

1D4ED8 배경에 흰 글자는 6.70 대 1로 AAA에는 0.3 부족하지만 AA는 통과합니다. 버튼 글자는 크기가 작은 경우가 많아 배경색을 더 진하게 잡는 편이 안전합니다.

더 궁금한 것

대비가 통과하면 접근성 문제가 다 해결된 건가요?

아니요. 대비는 읽히는 최소 조건 중 하나일 뿐입니다. 초점을 보이게 하는 표시, 손으로 누를 영역의 크기, 그림의 대체 설명, 낭독기 지원이 각각 별도 기준입니다. 대비는 그중 하나를 통과했다는 의미로만 읽으세요.

배경색을 바꿔 기준을 맞추면 항상 괜찮나요?

대부분은 괜찮지만 브랜드 색을 포기해야 할 수 있습니다. 글자 쪽 색을 조정해 대비를 확보하면 디자인 의도를 지키면서 기준을 맞출 수도 있습니다. 다만 이미지 배경은 앞의 이유로 한 값으로 판단할 수 없습니다.

회색 대신 다른 색으로 같은 대비를 만들 수 있나요?

가능합니다. 같은 휘도 차이를 갖는 색은 여러 개여서 디자인에 맞는 색을 고를 수 있습니다. 다만 배경과 글자의 방향을 바꾸면 대비 값이 달라지니, 색을 바꾼 뒤 반드시 다시 계산해 확인하세요.

알아둘 경계값

판정이 본문 기준 두 개뿐이라 큰 글자 기준 3.0은 직접 읽어야 해요. 3.0 이상이면 큰 글자 통과로 보세요.
3자리 단축 HEX는 자리 계산이 어긋나 결과가 깨져요. 6자리로 늘려 입력하세요.
표시값은 둘째 자리 반올림이라 4.50으로 보여도 실제 미달일 수 있어요. 흰 배경의 048858색은 4.499로 표시 4.5 판정 미달이에요.
미리보기 박스 색과 입력 HEX가 다르면 오타 자리예요. 계산 전에 박스 색이 의도와 같은지 보세요.
다크모드와 라이트모드 색쌍을 한 번만 검증하면 다른 모드에서 미달이 나와요. 두 모드를 각각 계산하세요.
종이 인쇄 대비는 화면 계산과 달라요. 인쇄물 접근성은 별도 기준으로 보세요.

결과를 믿기 전 확인 목록

입력이 6자리 HEX인지 자릿수를 세어 보세요.
3자리 입력은 6자리로 늘려 다시 계산하세요.
미리보기 박스 색이 의도한 색인지 눈으로 대조하세요.
4.5와 7.0 경계에 걸리면 한 단계 진하게 조정하세요.
큰 글자는 3.0 기준을 적용해 직접 판정하세요.
다크모드와 라이트모드 두 쌍을 각각 계산하세요.
이미지 위 글자는 가장 밝은 곳과 어두운 곳을 따로 재세요.
야간 모드나 색상 필터가 켜진 상태가 아닌지 확인하세요.
전경과 배경을 맞바꿔도 같은 값이 나오는지 대칭으로 검증하세요.

자주 묻는 질문

기준은?

본문 4.5:1(AA)·7:1(AAA), 큰 글자 3:1(AA)입니다.

AA와 AAA 차이는 뭔가요?

본문 기준 AA는 4.5:1, AAA는 7:1이에요. 공공기관·접근성 인증은 AA 이상을 요구해요.