Contrast Checker: WCAG 색상 대비율 도구

Contrast Checker란?

Contrast Checker는 전경색과 배경색 사이의 휘도 기반 대비율을 계산하여 해당 색상 조합이 WCAG 2.1 접근성 기준을 충족하는지 판단합니다. 네 가지 적합 임계값을 모두 테스트합니다: 일반 텍스트의 AA와 AAA, 큰 텍스트의 AA와 AAA. 라이브 텍스트 미리보기를 통해 독자가 실제로 경험하는 내용을 정확히 확인할 수 있습니다. 접근성 감사자, UI 디자이너, 프론트엔드 개발자들이 프로덕션에서 대비 실패를 방지하기 위해 새로운 색상 조합을 출시하기 전에 사용합니다. 모든 것이 브라우저에서 실행됩니다 — 서버 호출 없음, 로그인 없음.

주요 기능

• WCAG 2.1 대비율 계산 — 공식 WCAG 도구와 일치하는 결과를 위해 표준 상대 휘도 공식(0.03928 선형화 임계값과 (L1 + 0.05) / (L2 + 0.05) 비율 공식)을 사용합니다.
• AA 및 AAA 적합성 확인 — 네 가지 적합 배지가 실시간으로 업데이트됩니다: 일반 AA(≥ 4.5:1), 일반 AAA(≥ 7:1), 큰 AA(≥ 3:1), 큰 AAA(≥ 4.5:1). 체크마크가 있는 녹색 배지는 통과, X가 있는 빨간 배지는 실패를 의미합니다.
• 일반 및 큰 텍스트 임계값 — WCAG 2.1 성공 기준 1.4.3에 따라 일반 텍스트와 큰 텍스트(18pt 또는 14pt 볼드로 정의)에 별도의 임계값을 적용합니다.
• 샘플 텍스트와 함께 실시간 미리보기 — 미리보기 카드는 선택한 색상으로 제목, 본문 단락, 소형 텍스트, 버튼을 렌더링하여 가독성을 한눈에 평가할 수 있습니다.
• 대비율을 클립보드에 복사 — 비율 표시 옆의 복사 아이콘을 클릭하면 비율 문자열(예: 4.53:1)을 클립보드에 기록하고 히스토리에 검사 내역을 저장합니다.
• 로드 후 오프라인에서 작동 — 모든 비율 계산이 외부 API 호출 없이 JavaScript로 구현되어 있습니다.

Contrast Checker 사용 방법

1단계: 전경색 설정

Contrast Checker로 이동합니다. 도구는 전경색으로 검정(#000000), 배경색으로 흰색(#FFFFFF)으로 열립니다 — 네 가지 WCAG 레벨을 모두 통과하는 21:1 비율입니다.

전경색(텍스트 색상)을 설정하는 방법:

• 색상 견본(색칠된 정사각형)을 클릭하여 네이티브 브라우저 색상 선택기 열기
• 견본 옆 텍스트 입력란에 직접 16진수 코드 입력(예: #1E293B)

견본과 텍스트 입력란은 동기화된 상태를 유지합니다. 입력란 아래의 미리보기 견본은 자동 대비 레이블 텍스트와 함께 색상을 표시합니다.

2단계: 배경색 설정

색상 입력 카드의 오른쪽에 있는 동일한 컨트롤을 사용하여 배경색을 설정합니다. 도구는 3열 레이아웃을 사용합니다: 왼쪽에 전경색, 가운데에 스왑 버튼, 오른쪽에 배경색.

3단계: 대비율과 적합 배지 확인

대비율 카드가 입력란 아래에 나타나며 다음을 표시합니다:

• 큰 픽셀아트 타입으로 계산된 비율(예: 7.23:1)
• 비율 문자열을 복사하는 복사 아이콘
• 네 가지 적합 배지: 일반 AA(≥ 4.5:1), 일반 AAA(≥ 7:1), 큰 AA(≥ 3:1), 큰 AAA(≥ 4.5:1)

체크마크 아이콘이 있는 녹색 배지는 해당 조합이 그 레벨을 통과함을 나타냅니다. X가 있는 빨간 배지는 실패를 나타냅니다. 모든 본문 텍스트에서 최소한 일반 AA를 목표로 하세요.

4단계: 라이브 미리보기 확인

미리보기 카드로 스크롤합니다. 선택한 색상을 사용하여 네 가지 요소를 렌더링합니다:

• 큰 제목(text-2xl)
• 본문 텍스트(text-base)
• 소형 텍스트(text-sm)
• 색상이 바뀐 버튼(전경색이 배경색이 되고 그 반대도 마찬가지)

이 미리보기를 통해 코드를 작성하기 전에 색상이 읽기 좋은지 확인할 수 있습니다.

5단계: 색상 교체 또는 접근 가능한 팔레트 제안 시도

두 색상 입력란 사이의 스왑 버튼(이중 화살표 아이콘)을 클릭하여 전경색과 배경색을 즉시 반전합니다. 밝은 배경에 어두운 색과 어두운 배경에 밝은 색 두 가지 변형을 테스트하는 데 유용합니다.

페이지 하단의 접근 가능한 색상 쌍 패널로 스크롤합니다. 대비율과 함께 20가지 색상 조합을 표시합니다. 임의의 쌍을 클릭하면 해당 두 색상이 도구에 로드됩니다. 대부분의 쌍은 체크마크로 표시된 AA(4.5:1)를 통과합니다. 일부 쌍은 큰 AA(3:1)만 통과하며 X로 표시됩니다 — 이는 제목과 큰 UI 요소에는 적합하지만 일반 본문 텍스트에는 적합하지 않습니다.

실용적인 예시

버튼 레이블을 배경색에 대해 확인하기

디자인에서 #3B82F6 파란 버튼에 #FFFFFF 흰 텍스트를 사용합니다. #FFFFFF를 전경색으로, #3B82F6를 배경색으로 입력합니다. 도구는 약 3.7:1을 계산합니다. 일반 AA 배지가 실패합니다(4.5:1 필요). 하지만 큰 AA는 통과합니다. 파란색을 더 어둡게 해야 합니다 — #1D4ED8을 시도해 보세요. 약 6.7:1을 생성하고 일반 AA를 통과합니다.

다크 모드 텍스트 색상 검증

다크 모드 디자인에서 #0F172A(slate-900) 배경에 #94A3B8(slate-400) 텍스트를 사용합니다. 이 값들을 입력합니다. 비율은 약 6.96:1로 나와 일반 AA, 큰 AA, 큰 AAA를 통과합니다. 일반 AAA(7:1 필요)를 아슬아슬하게 놓칩니다. AA 레벨에서 본문 텍스트에 이 조합을 자신 있게 사용할 수 있습니다.

브랜드 색상을 텍스트 색상으로 테스트

브랜드 오렌지는 #F97316입니다. 흰색 #FFFFFF 배경의 링크 색상으로 사용하고 싶습니다. 비율은 약 2.8:1 — 일반 AA 실패입니다. 미리보기를 통해 일부 사용자에게는 읽기 좋아 보이지만 접근성 감사에서 실패할 것임을 확인할 수 있습니다. AA를 통과하려면 #C2410C(≈ 5.2:1)와 같은 더 어두운 색조로 전환하세요.

팁과 모범 사례

전경색-배경색과 배경색-전경색 모두 테스트하세요. 스왑 버튼으로 한 번의 클릭으로 역할을 반전할 수 있습니다. 일부 UI 패턴(버튼, 강조 표시된 선택)은 전경색을 작은 영역 배경으로 사용합니다.

접근 가능한 색상 쌍 패널은 소수점 한 자리로 비율을 표시합니다. 이 실제 계산된 비율이 각 사전 설정 견본 카드에 표시됩니다. 임의의 견본을 클릭하여 두 색상을 로드합니다 — 빠르게 작동하는 팔레트가 필요할 때 시작점으로 사용하세요.

큰 텍스트 임계값은 18pt(24px) 또는 14pt 볼드(약 18.67px 볼드)에 적용됩니다. 도구는 제목이 더 관대한 임계값을 가진다는 것을 상기시키기 위해 큰 AA와 큰 AAA 결과를 표시합니다. 일반 AA에 실패하는 조합도 큰 제목에만 사용할 경우에는 유효할 수 있습니다.

URL로 결과를 공유합니다. 현재 전경색과 배경색이 페이지 URL에 인코딩됩니다. 색상을 입력한 후 주소 표시줄 URL을 복사하여 동료에게 특정 대비 검사를 보내거나 디자인 검토 문서에 포함하세요.

공통 색상 쌍을 프리셋으로 저장합니다. 서포터 계정은 전경색과 배경색 16진수 값을 모두 명명된 프리셋으로 저장할 수 있습니다. 동일한 브랜드 색상 조합을 반복적으로 확인하는 팀에 유용합니다.

일반적인 문제와 해결 방법

입력에 관계없이 비율이 1:1로 표시됩니다. 이는 일반적으로 두 색상 필드에 동일한 값이 있음을 의미합니다. 전경색과 배경색에 서로 다른 색상을 입력했는지 확인하세요. 두 필드에 동일한 16진수를 붙여넣었다면 하나를 변경해야 합니다.

적합 배지가 실패라고 하지만 색상이 괜찮다고 생각했습니다. WCAG 공식은 시각적으로 보이는 것보다 더 엄격합니다. #555555 배경에 #333333 텍스트와 같은 검정-어두운 회색 조합은 약 1.7:1만 생성하여 AA를 크게 하회합니다. 시각적 판단 대신 도구의 결과를 사용하세요.

히스토리 복원이 색상을 다시 로드하지 않습니다. 히스토리 복원 기능은 FG: #XXXXXX / BG: #XXXXXX 형식의 항목을 파싱합니다. 이 도구 외부에서 기록된 항목(또는 손상된 데이터)은 올바르게 파싱되지 않을 수 있습니다. 그런 경우 색상을 수동으로 다시 입력하세요.

대비율 복사 버튼에 반응이 없습니다. Clipboard API는 HTTPS 또는 localhost가 필요합니다. 일반 HTTP에서는 클립보드 쓰기가 실패합니다. 도구는 그 경우 오류 토스트를 표시합니다. 비율 표시 텍스트를 오른쪽 클릭하고 브라우저의 기본 복사 옵션을 대체 수단으로 사용하세요.

미리보기 카드에 예상치 못한 텍스트 색상이 표시됩니다. 미리보기는 배경색 위에 전경색으로 제목과 본문 텍스트를 렌더링합니다. 미리보기의 버튼은 역방향 조합을 보여주기 위해 두 색상을 의도적으로 바꿉니다.

개인정보 보호 및 보안

Contrast Checker는 모든 계산을 브라우저 내에서 로컬로 수행합니다. 상대 휘도 공식과 대비율 계산이 장치의 JavaScript에서 실행됩니다. 어떤 색상 값도 서버에 전송되지 않습니다. 도구는 계정이 필요 없고, 추적 쿠키를 설정하지 않으며, 어떤 색상 조합을 테스트했는지 기록하지 않습니다. 페이지가 로드된 후 완전히 오프라인으로 작동하므로 기밀 디자인 시스템이나 미공개 브랜드 가이드라인에서 색상을 평가하는 데 안전합니다.

자주 묻는 질문

Contrast Checker는 무료인가요?

예. 네 가지 적합 배지, 실시간 미리보기, 스왑 버튼, 접근 가능한 팔레트 패널을 포함한 전체 WCAG 대비 확인 기능이 계정 없이 완전히 무료입니다. 프리셋, 히스토리 추적, 도구 메모와 같은 서포터 기능은 Ko-fi 서포터 구독으로 이용 가능합니다.

Contrast Checker는 오프라인에서 작동하나요?

예. 페이지가 로드되면 모든 대비 계산, 미리보기 렌더링, 적합 배지 업데이트가 네트워크 접근 없이 작동합니다. 상대 휘도 공식과 WCAG 임계값 비교는 브라우저에서 실행되는 순수한 JavaScript입니다.

Contrast Checker에서 내 데이터는 안전한가요?

예. 어떤 색상 데이터도 서버에 전송되지 않습니다. 도구는 대비 검사 중에 네트워크 요청을 하지 않습니다. 전경색과 배경색은 브라우저 메모리에만 존재하며, 공유 기능을 사용하는 경우 복사하기로 선택한 URL에 인코딩됩니다.

이 도구는 어떤 WCAG 버전을 따르나요?

도구는 WCAG 2.1 성공 기준 1.4.3(대비 — 최소)과 1.4.6(대비 — 향상)을 구현합니다. AA 레벨은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 비율이 필요합니다. AAA 레벨은 일반 텍스트에 7:1, 큰 텍스트에 4.5:1이 필요합니다. 이러한 임계값은 적합 배지에 표시된 값과 일치합니다(일반 AA ≥ 4.5:1, 일반 AAA ≥ 7:1, 큰 AA ≥ 3:1, 큰 AAA ≥ 4.5:1).

WCAG에서 "큰 텍스트"는 무엇인가요?

WCAG는 큰 텍스트를 일반 굵기에서 최소 18포인트(약 24px), 또는 볼드 굵기에서 최소 14포인트(약 18.67px)의 텍스트로 정의합니다. 도구는 세 번째와 네 번째 적합 배지를 "큰 AA"와 "큰 AAA"로 레이블을 지정합니다. 미리보기는 text-2xl에서 제목을 렌더링하며, 이는 일반적으로 큰 텍스트 범위에 해당합니다.

대비율은 어떻게 계산되나요?

도구는 WCAG 공식을 사용하여 각 16진수 색상을 상대 휘도로 변환합니다: 각 RGB 채널이 선형화됩니다(255로 나누고 sRGB 감마 보정 적용: s <= 0.03928이면 s / 12.92, 그렇지 않으면 ((s + 0.055) / 1.055) ^ 2.4). 휘도는 0.2126 R + 0.7152 G + 0.0722 * B입니다. 대비율은 (L_밝은 것 + 0.05) / (L_어두운 것 + 0.05)입니다.

16진수 코드 이외의 색상을 테스트할 수 있나요?

색상 입력란은 텍스트로 입력된 16진수 코드(# 유무 모두)를 허용합니다. 기본 색상 선택기 견본을 사용할 수도 있습니다. RGB 또는 HSL 값이 있는 경우 Color Picker를 사용하여 먼저 16진수로 변환한 다음 여기에 붙여넣으세요.

가능한 가장 높은 대비율은 얼마인가요?

최대 대비율은 21:1로, 순수한 검정(#000000)과 순수한 흰색(#FFFFFF) 사이의 비율입니다. 도구는 기본적으로 이 두 색상으로 열려 달성 가능한 최대 비율을 보여줍니다.

텍스트 이외의 UI 요소에도 사용할 수 있나요?

WCAG 2.1은 성공 기준 1.4.11에서 비텍스트 대비도 다루며, UI 구성 요소와 그래픽 객체에 3:1 비율이 필요합니다. 도구의 큰 AA 배지(≥ 3:1)는 이 임계값에 해당하며, 미리보기가 텍스트를 렌더링하더라도 아이콘 색상, 포커스 표시기, 양식 컨트롤 테두리를 평가하는 데 사용할 수 있습니다.

팀과 대비 검사를 어떻게 공유하나요?

전경색과 배경색을 입력하면 페이지 URL에 두 값이 인코딩됩니다. 주소 표시줄 URL을 복사하여 직접 공유합니다. 링크를 여는 수신자는 "공유에서 로드됨" 알림과 함께 동일한 색상이 미리 로드된 것을 볼 수 있습니다. 페이지 하단의 공유 버튼을 사용하여 Twitter, LinkedIn 또는 Reddit에 게시할 수도 있습니다.

관련 도구

• Color Picker — 여기서 테스트하기 전에 화면이나 기존 디자인에서 정확한 16진수 값을 샘플링합니다.
• Color Converter — 대비 검사기에 입력하기 전에 색상을 RGB, HSL 또는 CMYK에서 16진수로 변환합니다.
• 곧 출시 예정: Palette Generator — 전체 팔레트를 생성한 다음 Contrast Checker에서 각 조합을 확인하여 접근성 적합성을 보장합니다.

지금 Contrast Checker를 사용해 보세요: Glyph Widgets Contrast Checker