웹 접근성을 위한 색상 대비와 WCAG 결과 읽기

글자색과 배경색의 대비비를 확인하고 일반 텍스트와 큰 텍스트의 WCAG AA·AAA 기준을 디자인에 적용하는 방법입니다.

색이 달라 보여도 충분히 읽히지 않을 수 있습니다

색상 대비는 두 색의 단순한 밝기 차이가 아니라 상대 휘도를 이용해 계산합니다. 브랜드 색상끼리 조합했더라도 작은 본문에서 읽기 어려울 수 있으므로 실제 전경색과 배경색을 함께 검사해야 합니다.

본문과 큰 글자의 기준은 다릅니다

WCAG 결과는 일반 텍스트, 큰 텍스트와 UI 요소에 따라 해석이 달라집니다. 굵기와 크기를 임의로 크게 보이게 하는 것만으로 문제를 해결하기보다 본문에서 충분한 대비를 확보하는 편이 안정적입니다.

색상만으로 의미를 전달하지 않습니다

성공을 초록, 실패를 빨강으로만 표시하면 일부 사용자가 상태를 구분하기 어렵습니다. 아이콘, 텍스트 레이블, 테두리와 패턴을 함께 사용하세요. 차트도 범례와 직접 레이블을 제공하는 것이 좋습니다.

검사 순서

1. 실제 CSS에서 계산된 전경·배경색을 확인합니다.
2. 대비 검사기로 비율을 확인합니다.
3. hover·disabled·placeholder 상태도 따로 검사합니다.
4. 모바일과 밝은 야외 환경에서 사람이 직접 읽어봅니다.

색상 대비 검사 · 색각 시뮬레이션 · 팔레트 생성

작성 및 검토: FreeTools 운영팀 · 마지막 검토 2026년 7월 31일 · 일반적인 사용 안내이며 중요한 판단은 원본과 공식 기준을 확인하세요.