웹 접근성 향상을 위한 명암비 테스트
전경색과 배경색 사이의 색상 대비를 실시간으로 측정하는 색상 대비 검사기예요. 16진수 Hex 코드를 입력하면 WCAG 2.1 AA 및 AAA 기준 통과 여부를 즉시 계산해요. 별도의 프로그램 설치나 가입 없이 브라우저에서 바로 사용할 수 있어요.
웹 접근성 명암비 테스트 사용 방법
색상 대비율을 확인하는 순서는 간단해요.
- 전경색(텍스트)과 배경색 입력란에 3자리 또는 6자리 Hex 코드를 직접 입력하세요.
- 견본을 탭하여 기기의 기본 색상 선택기로 색상을 정할 수도 있어요.
- 필요한 경우 색상 맞바꾸기 버튼을 눌러 텍스트색과 배경색을 서로 교체해 보세요.
색상을 변경하는 즉시 명암비가 바로 계산되어 실시간 미리보기와 WCAG 통과 여부가 업데이트돼요.
WCAG AA·AAA 기준 이해하기
웹 접근성 명암비 가이드라인인 WCAG 2.1은 일반 텍스트와 큰 텍스트에 대해 서로 다른 명암비 기준을 제시해요.
Level AA 기준을 충족하려면 일반 텍스트는 최소 4.5:1 이상, 큰 텍스트(18pt 이상 또는 14pt 굵은 글씨 이상)는 3.0:1 이상의 명암비를 확보해야 해요. 더 엄격한 Level AAA 기준은 일반 텍스트 7.0:1 이상, 큰 텍스트 4.5:1 이상을 요구해요.
Hex 코드를 붙여넣어 검사하기
디자인 도구나 CSS 파일에서 복사한 Hex 코드를 그대로 붙여넣을 수 있어요. 코드 앞의 # 기호나 불필요한 문자는 자동으로 무시되므로 손쉽게 검증할 수 있어요.
디자인을 확정하기 전에 텍스트와 배경의 명암비를 미리 확인하면, 낮은 대비로 인해 시각 장애인이나 저시력자, 밝은 햇빛 아래에서 모바일 기기를 사용하는 사용자가 겪을 수 있는 읽기 불편을 사전에 예방할 수 있어요.
브라우저에서만 처리되는 명암비 검사
이 검사기는 입력한 모든 색상 데이터를 사용자의 웹 브라우저 내부에서만 처리해요. 색상 정보를 서버로 전송하지 않으므로 빠른 속도로 결과를 확인할 수 있어요.
일반 텍스트와 큰 텍스트에 대한 4가지 접근성 요건(AA 일반 텍스트, AA 큰 텍스트, AAA 일반 텍스트, AAA 큰 텍스트)이 통과인지 실패인지 한눈에 표시되므로, 디자인 시스템에 적용할 색상 조합을 효율적으로 검증해 보세요.
자주 묻는 질문
WCAG AA 기준의 최소 명암비는 얼마인가요?
WCAG 2.1 AA 기준은 일반 텍스트의 경우 최소 4.5:1 이상, 큰 텍스트의 경우 최소 3.0:1 이상의 명암비를 요구해요.
텍스트 가독성을 위한 좋은 명암비는 몇인가요?
일반 본문 텍스트의 기본 기준은 4.5:1 이상이에요. 시각이 불편한 사용자까지 고려한 최상의 가독성을 위해서는 AAA 기준인 7.0:1 이상을 권장해요.
Hex 코드로 명암비를 검사할 수 있나요?
네, 가능해요. 전경색과 배경색 항목에 3자리 또는 6자리 Hex 코드를 입력하면 즉시 대비율과 접근성 통과 여부가 계산돼요.
이 색상 대비 검사기는 무료인가요?
네, 회원가입이나 이용 제한 없이 완전히 무료로 사용할 수 있어요. 모든 연산은 서버 전송 없이 브라우저에서 실행돼요.
큰 텍스트의 기준은 어떻게 되나요?
WCAG 기준에서 큰 텍스트는 보통 굵기 18pt(약 24px) 이상, 또는 굵은 글씨 14pt(약 18.66px) 이상 크기의 글자를 의미해요.
텍스트색과 배경색을 빠르게 바꾸려면 어떻게 하나요?
도구 화면에 있는 '색상 맞바꾸기' 버튼을 누르면 전경색과 배경색이 즉시 서로 교체돼요.
