색상 대비 검사기
텍스트와 배경 색상을 넣으면 명암 대비 비율을 계산하고, WCAG 접근성 기준(AA/AAA) 충족 여부를 바로 보여드려요.
color contrast checker, WCAG contrast ratio, accessibility checker, text background contrast색상 대비 검사
미리보기
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
사용법
텍스트 색상과 배경 색상을 색상 선택기나 HEX 코드로 입력하세요.
미리보기 영역에서 실제 대비를 눈으로 확인하고, 대비 비율 숫자를 확인하세요.
WCAG AA/AAA 기준(일반 텍스트, 큰 텍스트)을 각각 통과하는지 확인하세요.
자주 묻는 질문
Q1. 입력한 색상이 서버에 저장되나요?
아니요. 모든 계산은 브라우저 안에서만 이루어지며 서버로 전송되거나 저장되지 않습니다.
Q2. 대비 비율은 어떻게 계산되나요?
W3C가 정의한 WCAG 2.1 상대 휘도(relative luminance) 공식을 사용해 두 색상의 밝기 차이를 계산합니다. 값은 1:1(대비 없음)부터 최대 21:1(검정-흰색)까지 나올 수 있어요.
Q3. AA와 AAA는 어떤 차이가 있나요?
AA는 웹 접근성의 최소 권장 기준이고, AAA는 더 엄격한 기준이에요. 일반 텍스트는 AA 4.5:1, AAA 7:1 이상을, 18pt 이상의 큰 텍스트는 AA 3:1, AAA 4.5:1 이상을 충족해야 합니다.
Q4. 왜 대비 기준을 지켜야 하나요?
저시력자나 색약이 있는 사용자도 텍스트를 읽을 수 있게 하기 위해서예요. 대비가 낮으면 일반 사용자도 밝은 화면이나 눈부심이 있는 환경에서 텍스트를 읽기 어려워질 수 있어요.
Q5. 버튼이나 아이콘 같은 비텍스트 요소에도 같은 기준이 적용되나요?
아니요. UI 컴포넌트나 그래픽 객체는 WCAG에서 별도로 3:1 기준을 두고 있어요. 이 도구는 텍스트와 배경 사이의 대비를 기준으로 계산합니다.
댓글
첫 번째 댓글을 남겨보세요!
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.