색상 대비 검사기란?
색상 대비 검사기는 글자색(전경색)과 배경색의 명도 대비율을 WCAG(웹 콘텐츠 접근성 지침) 공식으로 계산해, 일반 텍스트와 큰 텍스트 각각에 대해 AA·AAA 통과 여부를 즉시 판정해 주는 무료 온라인 도구입니다. 대비가 충분하지 않은 색 조합은 저시력자·색약 사용자뿐 아니라 햇빛 아래에서 화면을 보는 일반 사용자에게도 글자를 읽기 어렵게 만듭니다.
기존 색상 코드 변환기의 보조적인 명암비 표시와 달리, 이 도구는 웹접근성 인증과 디자인 검수 수요를 정조준했습니다. 일반/큰 텍스트별 합격·불합격 뱃지, 적록색약 등 색약 시뮬레이션, 실제 글자 샘플 미리보기, 그리고 기준 미달 시 가장 가까운 통과 색상 자동 추천까지 한 화면에서 제공합니다. 가입이나 설치 없이 브라우저에서 바로 사용할 수 있습니다.
주요 기능
실시간 대비율 계산
HEX·RGB 입력이나 컬러 피커로 색을 고르면 WCAG 상대 휘도 공식 기반 대비율(예: 4.5:1)이 즉시 표시됩니다.
AA·AAA 통과 판정
일반 텍스트·큰 텍스트·비텍스트 UI 요소 각각에 대해 통과·실패를 색과 아이콘이 함께 표시되는 뱃지로 한눈에 보여줍니다.
색약 시뮬레이션 & 미리보기
적색맹·녹색맹·청색맹 관점으로 색을 변환해 보여주고, 실제 글자 샘플 미리보기로 가독성을 눈으로 확인합니다.
통과 색상 자동 추천
기준 미달 시 색감을 유지한 채 명도만 조정해 AA·AAA를 만족하는 가장 가까운 글자색을 추천하고 원클릭으로 적용합니다.
사용 방법
- 글자색 입력 — 전경색(글자색)을 HEX 코드로 입력하거나 컬러 피커로 선택합니다.
- 배경색 입력 — 배경색을 HEX 코드로 입력하거나 컬러 피커로 선택합니다.
rgb(...)표기도 인식됩니다. - 대비율과 등급 확인 — 실시간 계산된 대비율과 일반/큰 텍스트별 AA·AAA 통과·실패 뱃지를 확인합니다.
- 미리보기·색약 점검 — 샘플 문장 미리보기로 가독성을 확인하고, 색약 시뮬레이션으로 색각이상 사용자 관점을 점검합니다.
- 통과 색상 적용 — 기준 미달 시 추천된 통과 색상을 적용하거나 HEX 코드를 복사하고, 공유 링크로 결과를 전달합니다.
이럴 때 활용하세요
웹·앱 접근성 검수
디자인 시안의 텍스트·버튼·링크 색이 WCAG AA·AAA를 만족하는지 출시 전에 확인합니다.
디자인 시스템 색상 정의
브랜드 컬러를 배경별로 조합할 때 어떤 글자색이 가독성 기준을 통과하는지 빠르게 검증합니다.
공공·금융 서비스 인증 대비
웹접근성 인증(KWCAG·WCAG)을 준비하며 페이지별 명도대비를 항목별로 점검합니다.
마케팅·콘텐츠 가독성 개선
배너·썸네일·슬라이드의 글자가 배경에 묻히지 않도록 대비를 높여 클릭률과 가독성을 끌어올립니다.
자주 묻는 질문
WCAG 대비율은 어떻게 계산되나요?
각 색의 sRGB 채널 값을 선형화한 뒤 가중치(R 0.2126·G 0.7152·B 0.0722)를 적용해 상대 휘도를 구하고, (밝은 색 휘도 + 0.05) / (어두운 색 휘도 + 0.05) 공식으로 대비율을 계산합니다. 결과는 최소 1:1에서 최대 21:1 사이로 나오며, 이 도구는 WCAG 2.1 공식을 그대로 구현했습니다.
AA와 AAA는 무엇이 다른가요?
WCAG 적합성 등급으로, AA는 권장 최소 기준, AAA는 더 엄격한 강화 기준입니다. 일반 텍스트는 AA 4.5:1·AAA 7:1, 큰 텍스트(18pt 또는 14pt 굵게 이상)는 AA 3:1·AAA 4.5:1을 요구합니다. 대부분의 웹사이트·앱은 AA를 목표로 하며, 공공기관이나 고대비가 필요한 서비스는 AAA를 지향합니다.
'큰 텍스트' 기준은 정확히 무엇인가요?
WCAG에서 큰 텍스트는 약 18pt(24px) 이상의 일반 굵기, 또는 14pt(약 18.66px) 이상의 굵은(bold) 글씨를 말합니다. 큰 텍스트는 형태 인식이 쉬워 더 낮은 대비율(AA 3:1)만으로도 가독성이 확보됩니다. 본문처럼 작은 글씨는 일반 텍스트 기준을 적용하세요.
색약 시뮬레이션은 정확한가요?
적색맹·녹색맹·청색맹 각각에 대해 널리 쓰이는 LMS 변환 행렬을 적용한 근사 시뮬레이션입니다. 개인별 색각 차이를 완벽히 재현하지는 못하지만, 색만으로 정보를 구분했을 때 특정 사용자에게 구분이 어려워지는지 점검하는 데 충분히 유용합니다. 색에만 의존하지 말고 아이콘·밑줄·라벨을 병행하세요.
통과 색상 추천은 어떻게 만들어지나요?
글자색의 색상(Hue)과 채도(Saturation)는 최대한 유지한 채 명도(Lightness)만 위아래로 조정하며, 현재 배경색과의 대비율이 목표 기준(AA 4.5:1, AAA 7:1)을 처음 충족하는 가장 가까운 명도를 찾아 추천합니다. 원래 색감을 크게 해치지 않으면서 접근성 기준을 만족하도록 설계되었습니다.
입력한 색상이 서버로 전송되나요?
아니요. 모든 대비율 계산·시뮬레이션·색상 추천은 100% 브라우저 안에서 처리되며 서버로 전송되지 않습니다. 최근 사용한 색상은 편의를 위해 브라우저 localStorage에만 저장되고, 공유 링크는 색상 코드를 URL 쿼리에 담는 방식이라 직접 복사한 경우에만 외부로 전달됩니다.
개인정보 안내
입력한 색상과 모든 대비율 계산·시뮬레이션·추천은 100% 사용자의 브라우저 안에서만 처리되며 서버로 전송되지 않습니다. 최근 사용한 색상은 편의를 위해 브라우저 localStorage에만 저장되고 언제든 브라우저 데이터 삭제로 지울 수 있으며, 공유 링크는 직접 복사해 전달한 경우에만 색상 정보가 외부로 나갑니다.