colorize
ColorKit
CK

색상 명도 대비 검사기

전경색과 배경색 조합의 명도 대비를 테스트하여 웹 접근성 지침(WCAG) 표준을 준수하는지 점검하세요.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

명도 대비 검사기의 기능

텍스트와 배경 간의 정확한 수학적 대비율을 브라우저에서 즉시 산출하여 모든 사용자가 쉽게 읽을 수 있는 웹 콘텐츠 접근성 지침(WCAG 2.2)을 보장합니다.

대상 사용자

UI/UX 디자이너, 프론트엔드 개발자, 웹 접근성 감리자 등 시각적 포용성을 보장하는 디지털 프로덕트를 만드는 모든 전문가를 위해 제작되었습니다.

WCAG AA 및 AAA 필수 기준

  • WCAG AA (일반 본문): 최소 4.5:1 이상의 대비율 필요.
  • WCAG AA (큰 텍스트): 18pt 이상 또는 14pt 볼드 시 최소 3.0:1 필요.
  • WCAG AAA (최고 등급): 일반 텍스트 기준 엄격한 7.0:1 요구.
지식 베이스 & FAQ

자주 묻는 질문 (FAQ)

자주 묻는 질문과 기술적 문제, 웹 표준에 대한 명확한 답변과 솔루션입니다.

WCAG 및 웹 접근성 표준에서 요구하는 텍스트 최소 명도 대비율은 얼마인가요?expand_more
WCAG 2.1 / 2.2 레벨 AA 기준(국내외 웹 접근성 법적 의무 준수 표준)에 따르면:
  • 일반 텍스트(18pt 미만 또는 14pt 볼드 미만): 배경 대비 최소 4.5:1의 명도 대비를 만족해야 합니다.
  • 큰 텍스트(18pt 이상 또는 14pt 볼드 이상): 최소 3.0:1 이상의 대비율이 요구됩니다.
  • UI 컴포넌트 및 그래픽 객체: 입력 폼 테두리, 포커스 링, 독립 아이콘 등은 최소 3.0:1을 충족해야 합니다.
WCAG AA와 AAA 적합 등급의 차이점은 무엇인가요?expand_more
WCAG AA는 전자상거래, 금융, 관공서, 기업 SaaS 웹사이트에 전 세계적으로 법적 의무화된 기준입니다(본문 4.5:1). 반면 WCAG AAA는 의료 포털, 고령자 전용 서비스 등 높은 시각 지원이 요구되는 사이트에 권장되는 최고 기준이며, 일반 텍스트 7.0:1, 제목 4.5:1의 강력한 대비율을 요구합니다.
입력창의 플레이스홀더 텍스트가 웹 접근성 심사에서 자주 탈락하는 이유는 무엇인가요?expand_more
브라우저 기본 플레이스홀더 색상(흰색 배경 위의 #9CA3AF 등)은 대비율이 약 2.0:1~2.5:1에 불과하여 AA 기준을 충족하지 못합니다. 권장 사항: 플레이스홀더에만 의존하지 말고 명확한 <label> 요소를 항상 제공하고, CSS로 플레이스홀더 대비를 적절히 스타일링하세요.
W3C 표준 공식은 상대 휘도(Relative Luminance)를 어떻게 계산하나요?expand_more
상대 휘도(L)는 0.0(가장 어두운 검정)부터 1.0(가장 밝은 흰색)까지의 인지 밝기입니다. 인간의 눈이 녹색 파장에 가장 민감하기 때문에, sRGB 감마를 선형화한 후 다음 가중치를 적용합니다: 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
최종 대비율은 (L1 + 0.05) / (L2 + 0.05)로 계산됩니다.
순수 노란색(#FFFF00)이나 시안색(#00FFFF) 배경 버튼에 흰색 글씨를 써도 되나요?expand_more
안 됩니다. 노란색과 시안색은 자체 휘도가 매우 높아서 흰색 텍스트와 조합 시 대비율이 1.07:1 ~ 1.25:1로 급감하여 야외 햇빛이나 저시력자에게 글자가 전혀 보이지 않습니다. 어두운 텍스트(#0F172A)와 조합하면 16.8:1의 높은 대비율을 얻어 AA와 AAA 기준을 모두 완벽히 통과합니다.