명도 대비 검사
배경색과 글자색의 대비비를 계산해 웹 접근성 기준(WCAG AA·AAA)을 통과하는지 알려줍니다. 실제 글자를 얹은 미리보기로 눈으로도 확인할 수 있습니다.
🎨 계산은 전부 브라우저 안에서 끝납니다. 저장도 전송도 없습니다.
큰 제목은 이렇게 보입니다
본문 크기 글자는 이 정도로 읽힙니다.
작은 글씨(캡션)는 이만큼 작아집니다 — 대비가 부족하면 여기서 먼저 티가 납니다.
대비비
3.68 : 1
큰 글씨에만 쓸 수 있습니다
미달
AA 본문
4.5:1
통과
AA 큰 글씨
3:1
미달
AAA 본문
7:1
미달
AAA 큰 글씨
4.5:1
기준이 뜻하는 것
- · AA 4.5:1 — 웹 접근성의 기본선입니다. 본문은 여기를 넘겨야 합니다.
- · 3:1 — 18pt(굵으면 14pt) 이상이면 기준이 낮아집니다.
- · AAA 7:1 — 더 엄격한 기준으로, 공공 사이트에서 요구하기도 합니다.
- 대비는 색이 아니라 밝기 차이로 정해집니다. 그래서 노랑 위 흰 글씨는 색이 달라도 안 읽힙니다.
이 도구로 할 수 있는 것
- 대비비 계산(1~21)
- AA·AAA 통과 여부 표시
- 큰 글씨 기준 별도 판정
- 통과할 때까지 밝기 자동 조절
자주 묻는 질문
Q. 대비비 4.5:1은 무슨 뜻인가요?
두 색의 밝기 차이를 나타내는 값으로, 1:1이면 같은 밝기이고 흰색과 검은색이 21:1로 최대입니다. 웹 접근성 기준(WCAG AA)은 본문 글자에 4.5:1 이상을 요구합니다.
Q. 큰 글씨는 기준이 다른가요?
네. 18pt 이상(굵은 글씨는 14pt 이상)은 3:1만 넘으면 됩니다. 글자가 크면 획이 굵어 낮은 대비에서도 읽히기 때문입니다.
Q. 브랜드 색을 못 바꾸는데 기준에 걸립니다.
색상은 그대로 두고 밝기만 조절하는 버튼을 쓰세요. 같은 계열을 유지하면서 기준을 넘기는 가장 가까운 밝기를 찾아 줍니다. 그래도 안 되면 글자를 키우거나 배경을 바꾸는 편이 낫습니다.
다른 색상 도구
화면마다 색 표현이 조금씩 달라, 같은 값도 기기에 따라 다르게 보일 수 있습니다.