색상 대비 검사기

색상 대비 검사기란?

색상 대비 검사기는 디자이너, 개발자, 접근성 테스터를 위한 무료 온라인 WCAG·APCA 대비 검사 도구입니다. HEX(#rgb, #rrggbb, 알파 포함 8자리 #rrggbbaa), rgb()/rgba(), hsl()/hsla() 형식을 받아, 측정 전에 반투명 전경을 배경 위에 합성하고, WCAG 2.1 비율(1:1~21:1)과 APCA Lc(명도 대비) 점수를 함께 알려 줍니다. WCAG 2.1 AA(일반 4.5:1, 큰 글자 3:1)와 AAA(일반 7:1, 큰 글자 4.5:1)를 판정하고, 비텍스트 UI 컴포넌트·그래픽용 3:1 배지를 더하며, 명도만 AA 또는 AAA를 충족할 때까지 조정해 가장 가까운 통과 전경색을 제안합니다. 한 번 클릭으로 적용됩니다.

색상 대비 검사기 사용법

1. 전경(텍스트) 색을 HEX·rgb()·hsl()로 입력하거나(알파 포함 8자리 HEX 또는 rgba도 가능) 색상 선택기를 클릭해 시각적으로 고릅니다.
2. 배경색도 같은 방식으로 입력합니다. 대비를 측정하기 전에 반투명 전경은 배경 위에(배경은 흰색 위에) 합성됩니다.
3. 교체 버튼으로 언제든 전경색과 배경색을 서로 바꿉니다.
4. WCAG 2.1 대비비와 바로 옆에 표시되는 APCA Lc 점수를 확인합니다.
5. 일반·큰 텍스트의 AA·AAA 배지와 UI 컴포넌트·그래픽용 3:1 배지를 확인합니다.
6. 조합이 실패하면 가장 가까운 AA 또는 AAA 통과 색을 보고 '적용'을 눌러 전경색을 갱신합니다.

예시

전경 #595959, 배경 #ffffff

비율 7.00:1, APCA Lc 도 높음 — 일반과 큰 텍스트 모두 AA와 AAA 통과

전경 #00000080(50% 검정)을 #ffffff 위에

먼저 불투명 회색으로 합성한 뒤 WCAG 비율과 APCA Lc 계산

전경 #999999에 #ffffff — 2.85:1, AA 실패

가장 가까운 AA 색을 열고 '적용'을 누르면 같은 색상을 유지하며 4.5:1 도달

자주 묻는 질문

WCAG는 어느 정도의 대비비를 요구하나요?

WCAG 2.1 AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상, AAA는 7:1과 4.5:1이 필요합니다. 비텍스트 UI 컴포넌트와 그래픽 객체(SC 1.4.11)는 3:1이 필요합니다. 이 검사기는 이 각 기준에 통과/실패 배지를 표시합니다.

APCA Lc 점수가 무엇인가요?

APCA(접근성 지각 대비 알고리즘)는 WCAG 3에 제안된 대비 방식입니다. 대략 0~108의 명도 대비(Lc) 값을 내며 값이 클수록 대비가 강하고, 극성(밝은 바탕의 어두운 글자 vs 어두운 바탕의 밝은 글자)을 반영합니다. WCAG 2.1 비율 옆에 표시되며 단일 통과/실패가 아니라 자체 기준을 사용합니다.

가장 가까운 통과 색 제안은 어떻게 동작하나요?

전경의 색상과 채도는 유지하고 명도만 밝게 또는 어둡게 조정해 배경 대비 대비비가 AA(4.5:1) 또는 AAA(7:1)를 만족할 때까지 찾아, 한 번에 적용할 수 있게 합니다. 배경이 중간 톤이라 목표에 도달할 수 없으면 가능한 한 가장 가까운 색을 대신 보여 줍니다.

어떤 색상 형식을 입력할 수 있나요?

HEX(#rgb, #rrggbb, 알파 포함 #rgba와 8자리 #rrggbbaa), rgb()/rgba(), hsl()/hsla()를 지원하며 각 입력란에 네이티브 색상 선택기가 있습니다. 비율 계산 전에 반투명 전경은 배경 위에(배경은 먼저 흰색 위에) 합성됩니다. 색상 이름은 지원하지 않습니다.

제 색상이 서버로 전송되나요?

아니요. 파싱, 합성, 휘도, 비율, APCA 계산은 모두 JavaScript로 브라우저 안에서 실행됩니다——어떤 색상도 업로드되지 않고 서버로 전송되는 것이 없으므로 비공개로 작동하며, 페이지를 한 번 로드한 후에는 오프라인에서도 사용할 수 있습니다.