색상 접근성 검사기

색상 접근성 검사기 소개

색상 접근성 검사기는 웹 페이지나 앱에서 사용하는 텍스트 색상과 배경색의 대비율을 WCAG(Web Content Accessibility Guidelines) 기준에 따라 확인할 수 있는 도구입니다.

디자이너, 퍼블리셔, 개발자, 기획자 등 누구나 이 도구를 통해 손쉽게 색상 대비를 점검하고, 색약·저시력 사용자를 포함한 더 많은 사람이 콘텐츠를 편안하게 읽을 수 있도록 도와줍니다.

주요 기능

1. 실시간 대비율 계산

텍스트 색상과 배경 색상을 입력하면 WCAG 2.1 기준에 따라 두 색상의 대비율을 계산해 “몇 대 몇 : 1” 형식으로 보여줍니다. 예를 들어, 4.5:1, 7:1처럼 한눈에 이해하기 쉽게 표시됩니다.

2. 일반 텍스트 / 큰 텍스트 구분

WCAG에서는 텍스트 크기에 따라 요구 대비율이 달라집니다. 이 도구는 일반 텍스트와 큰 텍스트(18pt+ 또는 14pt+ 굵게)를 구분하여, 각각 AA / AAA 등급을 통과하는지 별도로 보여줍니다.

3. WCAG AA / AAA 등급 배지 표시

계산된 대비율을 기준으로 다음 네 가지 항목에 대해 통과 여부를 배지 형태로 표시합니다.

• 일반 텍스트 AA (4.5:1 이상)
• 일반 텍스트 AAA (7:1 이상)
• 큰 텍스트 AA (3:1 이상)
• 큰 텍스트 AAA (4.5:1 이상)

각 배지는 “통과” 또는 “실패” 상태를 아이콘과 함께 보여 주어 현재 색상 조합의 접근성 수준을 직관적으로 확인할 수 있습니다.

4. 색상 선택기 & Hex 코드 입력 지원

브라우저 기본 색상 선택기와 Hex 코드 직접 입력을 모두 지원합니다.

• 색상 선택기에서 색을 선택하면 Hex 입력창이 자동으로 동기화됩니다.
• Hex 코드를 직접 입력하면 유효성 검사 후 색상 선택기의 값도 함께 변경됩니다.
• #RGB 형식(예: #fff)과 #RRGGBB 형식(예: #ffffff)을 모두 지원하며, 자동으로 6자리 표준 형식으로 정규화합니다.

5. 샘플 색상 빠른 확인

자주 사용하는 색상 조합을 빠르게 확인할 수 있도록 여러 가지 샘플 버튼이 제공됩니다. 예를 들어, 다음과 같은 조합을 한 번의 클릭으로 불러와 바로 대비를 확인할 수 있습니다.

• 흰색 바탕에 검은색 텍스트
• 검은색 바탕에 흰색 텍스트
• 흰색 바탕에 파란색 텍스트
• 파란색 바탕에 흰색 텍스트
• 흰색 바탕에 회색 텍스트
• 빨간색 바탕에 흰색 텍스트

6. 직관적인 미리보기 영역

선택한 텍스트 색상과 배경 색상은 우측 미리보기 박스에 즉시 반영됩니다.

• 일반 크기 텍스트 예시
• 큰 텍스트 예시(굵은 텍스트 포함)

실제 사용 환경과 가까운 형태로 텍스트를 확인할 수 있어, 숫자로만 확인할 때보다 가독성을 더 직관적으로 판단할 수 있습니다.

7. 다크 모드 지원

도구 자체 인터페이스는 라이트 모드와 다크 모드를 모두 지원합니다. 다음과 같은 기준으로 동작합니다.

• 우선순위: 사용자가 직접 선택한 모드 > 시스템 다크 모드 설정
• 선택한 테마는 로컬 스토리지에 저장되어 다음 접속 시에도 유지됩니다.
• 상단 우측 토글 버튼으로 언제든지 라이트/다크 모드를 전환할 수 있습니다.

8. 사용자 피드백 토스트 알림

색상 검사, 교환, 초기화, 샘플 로드 등 주요 동작 후에는 하단 토스트 알림으로 결과를 알려줍니다.

• 모든 등급 AAA 통과, AA 통과, 일부 등급만 통과 등 상황에 따라 다른 메시지를 제공합니다.
• 오류가 있을 경우(잘못된 Hex 형식 등) 명확한 안내 메시지를 보여줍니다.

사용 방법

1. 텍스트 색상 선택
   왼쪽 패널에서 “텍스트 색상”의 색상 선택기를 클릭하거나 Hex 코드를 입력합니다.
2. 배경 색상 선택
   “배경 색상”에도 동일한 방식으로 색상을 설정합니다.
3. 대비 확인 버튼 클릭
   “대비 확인” 버튼을 누르면 오른쪽 영역에 대비율과 WCAG 등급 통과 여부가 표시됩니다.
4. 필요 시 색상 교환
   텍스트/배경 색상을 서로 바꾸어 대비를 재확인하고 싶다면 “색상 교환” 버튼을 사용합니다.
5. 초기화
   기본값(검은 텍스트 / 흰 배경)으로 되돌리고 싶다면 “초기화” 버튼을 눌러 전체를 리셋합니다.

또한 텍스트 색상 및 배경 색상 Hex 입력 창에서 Enter 키를 누르면 곧바로 대비를 검사할 수 있어, 마우스를 사용하지 않고도 빠르게 작업할 수 있습니다.

WCAG 대비 기준 정리

이 도구는 WCAG 2.1의 텍스트 대비 가이드라인을 기준으로 합니다.

• 일반 텍스트 AA: 최소 4.5:1 이상
• 일반 텍스트 AAA: 최소 7:1 이상
• 큰 텍스트 AA: 최소 3:1 이상
• 큰 텍스트 AAA: 최소 4.5:1 이상

“큰 텍스트”란 일반적으로 다음에 해당하는 텍스트를 의미합니다.

• 18pt(약 24px) 이상의 일반 굵기 텍스트
• 14pt(약 18.66px) 이상의 굵은 텍스트

이 도구가 도움이 되는 경우

• 웹 사이트/앱 리디자인 과정에서 브랜드 컬러를 유지하면서도 접근성을 확보하고 싶은 경우
• 디자인 시스템이나 UI 키트에서 텍스트/배경 색상 토큰을 정의해야 하는 경우
• 디자이너와 개발자가 동일한 수치 기반으로 색상 접근성을 논의하고 싶은 경우
• 접근성 점검 리포트에 대비율과 WCAG 등급을 명시해야 하는 경우
• 색약·저시력 사용자를 고려한 안정적인 색상 조합을 찾고 싶은 경우

자주 묻는 질문