도구 가이드
글자와 배경의 밝기 차이가 충분하지 않으면 읽기 어렵습니다. 특히 저시력 사용자나 밝은 야외에서 화면을 보는 상황에서는 더 심해집니다. 웹 접근성 지침 WCAG는 이 차이를 대비율로 수치화해 최소 기준을 정하고 있습니다.
일반 크기 본문은 AA 기준으로 4.5:1 이상, 강화 기준인 AAA는 7:1 이상이 필요합니다. 큰 글자(굵은 18.66px 또는 24px 이상)는 기준이 완화되어 AA 3:1, AAA 4.5:1입니다.
이 도구는 두 색의 대비율을 계산하고 각 기준의 통과 여부를 판정합니다. 공공기관 웹사이트나 접근성 심사를 준비하는 서비스에서 특히 필요한 확인입니다.
사용 방법
- 텍스트 색상을 입력합니다.
- 배경 색상을 입력합니다.
- 계산된 대비율을 확인합니다.
- AA·AAA 기준 통과 여부를 확인하고 필요하면 색을 조정합니다.
이럴 때 유용해요
- 웹사이트 본문 색상이 접근성 기준을 만족하는지 확인할 때
- 브랜드 색을 배경으로 쓸 때 어떤 글자색이 적합한지 고를 때
- 공공기관 웹 접근성 심사를 준비할 때
- 다크 모드 색상 조합을 검증할 때
사용 팁
- 회색 글자는 세련돼 보이지만 대비율이 낮아 기준에 미달하기 쉽습니다. 본문에는 충분히 진한 색을 쓰세요.
- 버튼이나 아이콘 같은 UI 요소는 3:1 이상이 요구됩니다. 텍스트만 확인하고 넘어가지 마세요.
- 대비가 부족하면 색상을 바꾸기보다 명도를 조정하는 편이 브랜드 색을 유지하면서 기준을 맞추기 쉽습니다.