이 도구가 하는 일
색상 대비 검사기는 웹 콘텐츠 접근성 지침(WCAG 2.x)에 따라 글자색이 배경색 위에서 잘 읽히는지 알려 줍니다. 글자와 배경에 HEX, rgb(), hsl(), 색 이름, 반투명 색상 등 어떤 CSS 색상이든 입력하면 대비율, AA와 AAA 기준별 통과 여부, 실시간 미리보기가 표시됩니다. 통과하지 못하면 색조를 유지한 채 가장 가까운 통과 글자색과 배경색을 제안합니다. 모든 계산은 브라우저에서 이루어집니다.
사용 방법
- 글자색과 배경색을 입력하거나 고릅니다. 바꾸기로 두 색을 맞바꿀 수 있습니다.
- 대비율과 일반 텍스트, 큰 텍스트, UI 구성 요소의 통과/실패 목록을 확인합니다.
- 실패한 수준이 있으면 가장 가까운 통과 색상을 보세요. 제안마다 새 색상, 대비율, 복사 버튼이 있고 적용으로 바로 반영할 수 있습니다.
- APCA를 켜면 WCAG 3 초안의 명도 대비(Lc)도 볼 수 있습니다.
반투명 색상은 검사 전에 합성됩니다. 글자는 배경 위에, 배경은 흰색 위에 겹칩니다.
예시
#767676 on #ffffff → 4.54:1 passes AA normal text
#777777 on #ffffff → 4.47:1 fails AA normal text, passes AA large text
#000000 on #ffffff → 21:1 the maximum대비율 계산 방법
각 색의 상대 휘도는 sRGB 채널에서 계산합니다(선형화한 뒤 빨강 21%, 초록 72%, 파랑 7%로 가중). 대비율은 (밝은 쪽 + 0.05) / (어두운 쪽 + 0.05)이며, 같은 색의 1:1부터 흰 바탕의 검은 글자 21:1까지입니다. 색조가 아니라 밝기만 중요합니다. 순수한 빨강과 초록은 화려해 보이지만 약 1.3:1에 불과합니다.
제안은 색의 명도(HSL의 L)만 바꾸며, 어둡게 하거나 밝게 하는 방향 중 변화가 더 작은 쪽을 고릅니다. 어떤 명도로도 도달할 수 없는 경우도 있습니다. 중간 회색 배경에서는 어떤 글자색도 7:1에 이르지 못합니다.
자주 묻는 질문
› 대비율은 얼마나 필요하나요?
WCAG 2.x AA 수준은 일반 텍스트에 최소 4.5:1, 큰 텍스트와 입력 필드 테두리·아이콘·포커스 링 같은 UI 구성 요소에 최소 3:1을 요구합니다. AAA 수준은 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. 대부분의 법률과 정책은 AA 수준을 기준으로 합니다.
› 큰 텍스트는 어떤 기준인가요?
보통 굵기로 24px(18pt) 이상이거나 굵게 18.66px(14pt) 이상인 텍스트입니다. 그보다 작으면 일반 텍스트로, 더 높은 대비율이 필요합니다.
› 왜 4.49:1은 실패인가요?
WCAG 기준값은 정확합니다. 4.499는 4.5를 충족하지 못합니다. 그래서 이 검사기는 표시하는 대비율을 반올림하지 않고 버리며, 통과 여부는 정확한 값으로 판단합니다.
› APCA는 무엇인가요?
APCA(Accessible Perceptual Contrast Algorithm)는 WCAG 3 초안에서 제안된 대비 계산 방식입니다. 어느 색이 글자인지에 따라 달라지는 명도 대비 값 Lc를 주며 다크 모드에 더 잘 맞습니다. 아직 법적 표준이 아니므로 여기서는 참고용으로만 표시합니다.