색상 대비 검사기

색상 대비 검사란?

색상 대비 검사기는 웹 콘텐츠 접근성 지침(WCAG 2.1)에 따라 전경색(텍스트)과 배경색 사이의 대비율을 측정하는 도구입니다. 적절한 색상 대비를 유지해야 시각 장애인, 색각 이상자, 고령자는 물론 밝은 햇빛 아래에서 모바일 기기를 사용하는 일반 사용자도 콘텐츠를 읽을 수 있습니다. 이 도구는 두 색상의 상대 휘도를 계산하여 대비율을 산출하고, WCAG AA 및 AAA 등급 기준으로 통과 여부를 판정합니다.

시작하기

1. 전경색(텍스트 색상)을 색상 선택기로 고르거나, HEX 코드를 직접 입력합니다.
2. 배경색도 같은 방식으로 설정합니다.
3. 미리보기 영역에서 실제 텍스트 표시를 확인합니다.
4. 대비율 수치와 AA/AAA 등급 판정 결과를 확인합니다.
5. 기준을 만족하지 않으면 색상을 조정하거나, 하단의 추천 조합을 클릭하여 적용합니다.
6. 교체 버튼으로 전경색과 배경색을 바꿔서 반전된 조합도 테스트해 봅니다.

WCAG 등급 기준

• AA 일반 텍스트 - 최소 4.5:1 대비율이 필요합니다. 웹 접근성의 기본 기준입니다.
• AA 큰 텍스트 - 최소 3:1 대비율이 필요합니다 (18pt 이상 또는 14pt 굵게).
• AAA 일반 텍스트 - 최소 7:1 대비율이 필요합니다. 강화된 접근성 기준입니다.
• AAA 큰 텍스트 - 최소 4.5:1 대비율이 필요합니다.

기능 소개

• 실시간 대비율 계산 - 색상을 변경하면 즉시 대비율과 등급 판정 결과가 업데이트됩니다.
• WCAG AA/AAA 등급 표시 - 일반 텍스트와 큰 텍스트에 대해 각각 AA, AAA 통과 여부를 보여줍니다.
• 실시간 미리보기 - 선택한 전경색과 배경색 조합으로 실제 텍스트가 어떻게 보이는지 확인합니다.
• 색상 교체 - 전경색과 배경색을 원클릭으로 서로 바꿔볼 수 있습니다.
• 추천 색상 조합 - 접근성 기준을 만족하는 검증된 색상 조합을 제안합니다.
• HEX 코드 직접 입력 - 색상 선택기 외에 HEX 코드를 직접 타이핑하여 정확한 색상을 지정합니다.

주의할 점

• 순수 회색(#767676)은 흰색 배경에서 AA 기준을 간신히 통과합니다. 좀 더 어두운 회색을 사용하면 안전합니다.
• 밝은 색상 위의 흰색 텍스트는 대부분 접근성 기준을 충족하지 못합니다. 어두운 색상 배경을 사용하세요.
• 대비율 검사 외에도 실제 다양한 환경(밝은 곳, 어두운 곳)에서의 가독성 테스트를 병행하는 것이 좋습니다.
• 플레이스홀더 텍스트도 접근성 기준을 충족하는 것이 권장됩니다.

활용 팁

• 웹사이트 디자인 검수 - 본문 텍스트, 버튼, 링크 등의 색상이 접근성 기준을 충족하는지 확인합니다.
• 브랜드 가이드라인 검증 - 브랜드 색상이 웹에서 사용될 때 접근성을 유지하는지 점검합니다.
• 다크 모드 테스트 - 라이트/다크 모드 전환 시 두 테마 모두에서 충분한 대비를 유지하는지 확인합니다.
• 법적 요구사항 준수 - 공공기관, 정부 웹사이트 등에서 요구하는 웹 접근성 기준을 충족합니다.

자주 하는 질문