Toon Tone
한
ENEnglishESEspañol日日本語한한국어FRFrançaisDEDeutschRUРусскийPTPortuguês

무료 WCAG 2.2 디자인 도구

색상 대비 검사기 WCAG AA 및 AAA

색상 대비 검사기로 전경과 배경을 측정하고 텍스트와 UI 기준, 실제 미리 보기, 가까운 통과 색상, 팔레트 전체 조합을 확인하세요. 색상 데이터는 브라우저 밖으로 전송되지 않습니다.

2026년 7월 25일 업데이트

검사기 열기Toon Tone 플레이

색상 대비 검사기

이 색상 대비 검사기는 무엇을 검사하나요?

색상 대비 검사기는 두 HEX 색상의 WCAG 대비율을 계산합니다. 일반·큰 텍스트의 AA와 AAA, UI에 쓰이는 3:1 기준, 실시간 미리 보기, 팔레트 표를 따로 보여 줍니다. 색상 대비 검사기는 4.5:1 또는 7:1에 도달하는 가까운 HSB 전경도 찾습니다. 수치 통과가 전체 페이지 인증을 뜻하지는 않습니다.

한 비율을 실제 디자인 결정으로

색상 대비 검사기는 숫자, 시각적 맥락, 다음 수정 단계를 함께 제공합니다.

  • 다섯 결과를 명확히 구분

    색상 대비 검사기는 일반 텍스트 AA·AAA, 큰 텍스트 AA·AAA, UI 3:1을 따로 표시합니다. 어떤 기준을 적용했는지 혼동하지 않습니다.

  • 실제 UI에 가까운 미리 보기

    색상 대비 검사기는 제목, 본문, 버튼, 배지에 선택 색상을 적용합니다. 컴포넌트 라이브러리에 넣기 전에 문제를 발견할 수 있습니다.

  • 팔레트 전체 조합표

    2~8색을 추가하면 색상 대비 검사기가 모든 고유 조합을 측정합니다. 단일 색상 쌍 검사에서 놓치는 안전한 조합을 찾을 수 있습니다.

WCAG 2.2 · HEX · HSB

색상 대비 검사기 사용하기

두 HEX 색상을 입력하세요. 모든 계산은 브라우저에서 즉시 갱신됩니다.

대비율14.05:1

통과 · AA 일반 텍스트

AA 일반 텍스트4.5:1통과
AAA 일반 텍스트7:1통과
AA 큰 텍스트3:1통과
AAA 큰 텍스트4.5:1통과
UI 컴포넌트3:1통과
실시간 미리 보기

읽기 쉬운 UI 미리 보기

선택한 배경 위에서 전경을 텍스트, 테두리, 컨트롤에 적용한 예입니다.

가까운 통과 전경 찾기

가능하면 색조를 유지하고 HSB 채도와 밝기를 가장 적게 변경합니다.

모든 계산은 이 브라우저에만 남습니다.
:root {
  --accessible-foreground: #1F2937;
  --accessible-background: #F9FAFB;
}

.your-component {
  color: var(--accessible-foreground);
  background: var(--accessible-background);
}

팔레트 대비 매트릭스

2~8색을 추가하세요. 각 셀은 행 색상과 열 색상의 비율입니다.

모든 팔레트 색상 조합의 WCAG 대비율
색상1#1F29372#F9FAFB3#2563EB4#F59E0B
1#1F2937—14.05:1AA2.84:13:1 미만6.83:1AA
2#F9FAFB14.05:1AA—4.95:1AA2.06:13:1 미만
3#2563EB2.84:13:1 미만4.95:1AA—2.41:13:1 미만
4#F59E0B6.83:1AA2.06:13:1 미만2.41:13:1 미만—

WCAG 2.2 대비 기준

색상 대비 검사기는 텍스트 기준과 비텍스트 3:1 기준을 구분합니다.

색상 대비 검사기가 사용하는 WCAG 2.2 기준
용도수준최소 비율의미
일반 텍스트AA4.5:1WCAG 큰 텍스트 정의보다 작은 글자.
큰 텍스트AA3:1일반 약 24 CSS px, 굵게 약 18.5 CSS px 이상.
일반 텍스트AAA7:1작은 텍스트의 향상 기준.
큰 텍스트AAA4.5:1큰 텍스트의 향상 기준.
UI 및 그래픽AA3:1인접 색상과 구별해야 하는 필수 시각 정보.

3단계 대비 검토

색상 대비 검사기를 반복 가능한 검토 절차로 사용하세요.

1. 실제 배포 색상 검사

색상 대비 검사기에 실제 전경·배경 토큰을 붙여 넣으세요. 원본 HEX가 있다면 압축 스크린샷에서 추출하지 않습니다. 기본, 호버, 활성, 포커스, 오류, 선택, 비활성 상태는 인접 색상이 달라질 수 있으므로 각각 검사합니다.

2. 콘텐츠에 맞는 기준 선택

일반 AA 텍스트에는 4.5:1, AAA에는 7:1을 사용합니다. 실제 크기와 굵기가 정의를 충족할 때만 큰 텍스트 기준을 적용하세요. 필수 경계, 아이콘, 상태 표시는 비텍스트 3:1 기준으로 검토합니다.

3. 완성 컴포넌트 검증

색상 대비 검사기 통과 후 브라우저 확대, 두 테마, 실제 문구에서 확인하세요. 포커스 표시, 색 이외 단서, 모든 상태를 함께 검사합니다. 자동 계산은 비율을, 사람 검토는 맥락을 찾습니다.

색상 대비 검사기의 계산 방법

색상 대비 검사기는 각 sRGB 채널을 선형 값으로 변환한 뒤 WCAG 상대 휘도 가중치인 빨강 0.2126, 초록 0.7152, 파랑 0.0722를 적용합니다. 밝은 값을 L1, 어두운 값을 L2로 두고 (L1 + 0.05) / (L2 + 0.05)를 계산합니다. 같은 색은 1:1, 검정과 흰색은 21:1입니다.

전경과 배경 순서를 바꿔도 숫자는 같지만 구현 맥락은 달라집니다. 투명도, 그라데이션, 이미지, 혼합, 그림자는 두 단색과 다른 픽셀을 만듭니다. 투명 색상을 실제 배경에 먼저 합성한 뒤 최종 값을 색상 대비 검사기에 넣으세요.

통과 결과가 인증서가 아닌 이유

WCAG 적합성은 완전한 페이지와 과정에 적용됩니다. 색상 대비 검사기는 텍스트가 실제로 큰지, 아이콘이 필수 정보를 전달하는지, 색상이 유일한 단서인지 알 수 없습니다. 키보드, 이름, 역할, 포커스 순서, 문구 품질도 별도 검토가 필요합니다.

색상 대비 검사기를 접근성 검토 중 한 가지 테스트로 사용하세요. 컴포넌트, 상태, 토큰, 기준, 날짜, 결과를 기록하면 수정 이유가 남고 이후 테마 변경을 더 안전하게 재검사할 수 있습니다.

색상 대비 검사기 출시 체크리스트

결과를 출시 근거로 인정하기 전에 다음 항목을 확인하세요.

  1. 01

    색상 대비 검사기: 압축 스크린샷 대신 원본 HEX 값을 사용한다.

  2. 02

    색상 대비 검사기: 라이트와 다크 테마를 별도 시스템으로 검사한다.

  3. 03

    색상 대비 검사기: 기본, 호버, 포커스, 활성, 선택, 오류, 비활성을 검사한다.

  4. 04

    색상 대비 검사기: 예외가 없다면 일반 AA 텍스트에 4.5:1을 적용한다.

  5. 05

    색상 대비 검사기: 일반 AAA가 요구되면 7:1을 적용한다.

  6. 06

    색상 대비 검사기: 큰 텍스트로 분류하기 전 크기와 굵기를 확인한다.

  7. 07

    색상 대비 검사기: 필수 아이콘, 경계, 상태 표시를 3:1로 검토한다.

  8. 08

    색상 대비 검사기: 투명도를 합성한 최종 색상을 입력한다.

  9. 09

    색상 대비 검사기: 이미지와 그라데이션의 가장 약한 영역을 측정한다.

  10. 10

    색상 대비 검사기: 오류, 링크, 선택, 상태에 색 이외 단서를 제공한다.

  11. 11

    색상 대비 검사기: 포커스 표시를 주변 상태와 함께 검사한다.

  12. 12

    색상 대비 검사기: 확대 후에도 콘텐츠와 기능이 유지되는지 확인한다.

  13. 13

    색상 대비 검사기: 짧은 샘플 대신 실제 문구를 테스트한다.

  14. 14

    색상 대비 검사기: 컴포넌트, 상태, 토큰, 기준, 결과, 날짜를 기록한다.

  15. 15

    색상 대비 검사기: 표에서 승인 조합을 고르고 모든 조합을 강제하지 않는다.

  16. 16

    색상 대비 검사기: 공유 토큰이 바뀔 때마다 다시 검사한다.

  17. 17

    색상 대비 검사기: 지원한다면 강제 색상 모드도 검토한다.

  18. 18

    색상 대비 검사기: 수치와 함께 키보드, 스크린 리더, 시각 검토를 수행한다.

결과를 뒷받침하는 WCAG 1차 자료

색상 대비 검사기는 공개된 공식 계산식과 기준을 따르며 W3C 문서를 최종 근거로 사용합니다.

AA 텍스트 기준 원문: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

공식 출처

다음 색상 작업

컬러 셰이드 생성기HSB 색상 선택기이미지 색상 추출기만화 팔레트 생성기Delta E 계산기블로그Toon Tone 플레이

색상 대비 질문

좋은 색상 대비율은 얼마인가요?

색상 대비 검사기는 일반 텍스트 AA에 4.5:1, AAA에 7:1을 사용합니다. 큰 텍스트는 AA 3:1, AAA 4.5:1이며 필수 UI 정보는 일반적으로 3:1입니다.

3:1이면 WCAG AA를 통과하나요?

조건을 충족한 큰 텍스트와 비텍스트 정보에는 통과할 수 있지만 일반 AA 텍스트에는 부족합니다. 색상 대비 검사기는 잘못된 전체 통과를 막도록 결과를 분리합니다.

투명 색상도 검사할 수 있나요?

색상 대비 검사기는 단색 HEX를 받습니다. 투명 색상을 실제 배경에 먼저 합성하세요. 이미지와 그라데이션은 대비가 가장 낮은 부분을 측정합니다.

자동 조정은 어떻게 색상을 고르나요?

색상 대비 검사기는 가능한 한 색조를 유지하며 HSB 채도와 밝기를 탐색합니다. 목표 비율을 충족하는 가까운 전경을 제안하지만 실제 디자인에서 검토해야 합니다.

통과하면 페이지 전체가 접근 가능한가요?

아닙니다. 색상 대비 검사기는 선택한 색상의 수학적 관계만 확인합니다. 전체 접근성에는 구조, 키보드, 포커스, 레이블, 대체 콘텐츠와 완전한 과정 테스트가 필요합니다.