사용 방법
글자 색과 배경 색을 입력하면 명도 대비, 실시간 미리보기, WCAG 등급별 통과 여부를 보여 줘요. 통과하지 못하면 같은 색상으로 4.5:1에 이르는 가장 가까운 글자 색을 추천하고, 한 번 누르면 바로 적용돼요.
명도 대비 = (밝은 쪽 휘도 + 0.05) ÷ (어두운 쪽 휘도 + 0.05)
WCAG 기준
- 일반 글자: AA는 4.5:1 이상, AAA는 7:1 이상
- 큰 글자(24 px 또는 굵게 18.66 px): AA는 3:1 이상, AAA는 4.5:1 이상
- 버튼, 아이콘, 입력란 테두리: 주변과 3:1 이상
활용 팁
- 흰 배경 위 회색 글자는 기준에 못 미치는 경우가 많아요. placeholder와 캡션도 확인하세요.
- 대비가 좋으면 밖에서 휴대폰을 보는 사람을 비롯해 모두가 편하게 읽어요.
- 바꾸기 버튼으로 어두운 배경 위 밝은 글자도 확인해 보세요.
계산 기준과 출처
- 명도 대비 공식과 기준값은 WCAG 2.2 성공 기준 1.4.3, 1.4.6, 1.4.11(W3C)을 따름
최종 검토 2026년 10월 7일
자주 묻는 질문
명도 대비는 얼마나 필요한가요?
일반 글자는 WCAG AA에 4.5:1, AAA에 7:1이 필요해요. 큰 글자는 AA에 3:1, AAA에 4.5:1이에요.
큰 글자는 어느 정도인가요?
24 px 이상, 굵은 글자는 18.66 px 이상이에요.
기준에 못 미치면 어떻게 하나요?
추천 색을 쓰세요. 색상과 채도는 그대로 두고 명도만 바꿔 4.5:1에 이르는 색이에요.
버튼과 아이콘도 명도 대비가 중요한가요?
네. WCAG는 버튼, 아이콘, 입력란 테두리 같은 UI 요소와 주변 사이에 3:1 이상을 요구해요.
투명도도 결과에 영향을 주나요?
이 검사기는 불투명한 색으로 계산해요. 반투명 글자는 배경 위에서 실제로 보이는 색으로 확인하세요.