명도 대비 검사
글자가 잘 읽히는 색인지
글자색
배경색
다람쥐 헌 쳇바퀴에 타고파글자가 배경 위에서 이렇게 보입니다. The quick brown fox jumps over the lazy dog. 0123456789
대비율–
보통 글자 AA (4.5:1)–
큰 글자 AA (3:1)–
보통 글자 AAA (7:1)–
큰 글자 AAA (4.5:1)–
명도 대비 검사 소개
글자색과 배경색이 충분히 구분되는지 검사하는 도구입니다. 두 색의 명도 대비율을 계산해 웹 접근성 지침(WCAG)의 기준을 통과하는지 알려 줍니다. 연한 회색 글자나 밝은 색 버튼 위의 흰 글자처럼, 보기에는 예쁘지만 읽기 어려운 조합을 걸러낼 때 씁니다. 발표 자료의 글자가 뒷자리에서도 보일지 가늠할 때도 유용합니다.
사용법
- 글자색과 배경색을 고릅니다.
- 대비율과 기준별 통과 여부가 나옵니다.
- 미리보기에서 실제로 어떻게 보이는지 확인합니다.
자주 묻는 질문
- 대비율은 얼마 이상이어야 하나요?
- 웹 접근성 지침의 AA 기준은 보통 글자 4.5:1 이상, 큰 글자(약 24px 이상 또는 굵은 19px 이상) 3:1 이상입니다. 더 엄격한 AAA 기준은 각각 7:1, 4.5:1입니다. 국내 공공기관 웹사이트도 4.5:1을 기준으로 삼습니다.
- 대비율은 어떻게 계산하나요?
- 두 색의 상대 휘도(밝기)를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 계산합니다. 흰색과 검은색이 21:1로 가장 높고, 같은 색끼리는 1:1입니다.