색상 & 디자인

색상 대비 검사기

WCAG 2.2 AA 및 AAA 대비 요구 사항에 대해 모든 텍스트 및 배경 색상 쌍을 테스트하며, 즉각적인 통과/실패 피드백과 실시간 미리보기를 제공합니다.

텍스트 색상

16진수

#1A73E8

RGB

26, 115, 232

HSL

214°, 82%, 51%

배경 색상

16진수

#FFFFFF

RGB

255, 255, 255

HSL

0°, 0%, 100%

대비 비율

4.51: 1

WCAG 준수

비율이 높을수록 가독성이 높습니다. 21:1은 순수한 검은색과 흰색입니다.

AA · 일반 텍스트 (4.5:1)통과
AA · 큰 텍스트 (3:1)통과
AAA · 일반 텍스트 (7:1)실패
AAA · 큰 텍스트 (4.5:1)통과
UI 구성 요소 및 그래픽 (3:1)통과

실시간 미리보기

본문 및 제목 크기에서 색상 쌍을 확인하세요.

빠른 갈색 여우가 게으른 개를 뛰어넘습니다.

16픽셀의 일반 본문 텍스트. WCAG 2.2는 전경 텍스트와 즉각적인 배경 간의 대비를 측정합니다. 이 미리보기는 사용자가 위에 입력한 조합을 정확히 보여줍니다.

대비 검사기는 무엇인가요?

대비 검사기는 두 색상 간의 밝기 차이를 측정하고 이를 1:1 (동일)에서 21:1 (순수 검정색과 순수 흰색) 사이의 비율로 보고합니다. 접근성 가이드라인은 이 비율을 사용하여 저시력, 색맹 사용자 또는 밝은 햇빛 아래에서 화면을 보는 사용자가 텍스트를 읽을 수 있는지 여부를 결정합니다. 이 도구는 WCAG 2.2를 따릅니다. 이는 미국의 ADA, 유럽 접근성 법 및 대부분의 기업 디자인 시스템에서 참조하는 동일한 표준입니다. 두 가지 색상을 입력하면 다섯 가지 WCAG 기준에 대한 즉각적인 통과/실패 결과와 본문 및 제목 크기에서의 실시간 미리보기를 얻을 수 있습니다. 모든 것이 브라우저에서 실행됩니다 — 업로드, 추적, 계정이 필요 없습니다.

색상 대비를 확인하는 방법

1
텍스트 색상 입력
전경 (텍스트) 색상에 대한 헥스 코드를 붙여넣거나 색상 선택기를 사용하세요. 이 도구는 #03A와 같은 3자리 약어도 허용합니다.
2
배경 색상 입력
배경에 대해서도 동일하게 하세요. 텍스트 색상만 알고 있다면 기본 테스트를 위해 배경을 흰색 (#FFFFFF)으로 두세요.
3
비율 읽기
큰 비율 숫자는 입력할 때 업데이트됩니다. 3.0 미만의 비율은 일반 텍스트에 대한 가장 느슨한 WCAG 기준도 통과하지 못합니다.
4
WCAG 배지 확인
다섯 개의 배지는 AA 일반, AA 큰, AAA 일반, AAA 큰 및 UI 구성 요소 기준에 대한 통과/실패를 보여줍니다. AA는 일반적인 법적 최소 기준이며, AAA는 주요 콘텐츠에 대한 향상된 목표입니다.
5
미리보기 및 복사
미리보기가 제목 및 본문 크기에서 올바르게 보이는지 확인한 후, 스타일시트를 위한 `color:` 및 `background-color:` 선언을 가져오기 위해 Copy CSS를 사용하세요.

WCAG 대비 공식

각 채널 (R, G, B를 0–1로 스케일링):
  c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
 
상대 밝기:
  L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear
 
대비 비율:
  ratio = (L_light + 0.05) / (L_dark + 0.05)
  여기서 L_light = max(L1, L2) 및 L_dark = min(L1, L2)

이 공식은 WCAG 2.x에서 가져온 것으로, 밝기를 계산하기 전에 각 sRGB 채널에 감마 보정 곡선을 적용합니다. 가중치 (0.2126, 0.7152, 0.0722)는 빨강, 초록, 파랑 빛에 대한 인간의 원추 세포 감도를 반영합니다. 두 항에 0.05를 추가하면 한 색상이 완벽한 검정일 때 0으로 나누는 것을 방지합니다. 비율은 1:1 (동일한 색상)에서 21:1 (순수 검정색과 순수 흰색)까지 다양합니다.

참조: WCAG 2.2 — 대비 (최소) 1.4.3

예시

쌍	비율 및 판결
#000000 on #FFFFFF	21:1 — 모든 기준을 통과 정식 최대 대비. 장기 읽기 UI에 사용됩니다.
#1A73E8 on #FFFFFF	4.63:1 — AA 일반 통과, AAA 일반 실패 흰색 배경에 구글 블루. 본문 텍스트로는 법적이지만 AAA는 아닙니다.
#808080 on #FFFFFF	3.95:1 — AA 일반 실패, AA 큰 통과 흰색 배경에 중간 회색 — 제목에는 괜찮지만 단락에는 너무 밝습니다.

일반적인 사용 사례

WCAG AA 준수를 위해 마케팅 페이지 또는 랜딩 페이지 감사
구성 요소에 배포하기 전에 새로운 디자인 시스템 팔레트 검증
어두운 표면에서 텍스트가 읽을 수 있도록 어두운 모드 변형 테스트
브랜드 색상이 흰색 또는 사진 오버레이에 대해 충분한 대비를 가지는지 확인
실패한 Lighthouse 또는 axe-core 접근성 감사 디버깅
PR 리뷰 전에 제안된 텍스트 색상을 기준 배경과 비교
색상 채우기 위에 대비를 통과하는 버튼 레이블 색상 선택

자주 묻는 질문

내 색상 데이터가 서버로 전송되나요?

아니요. 모든 대비 계산은 브라우저에서 발생합니다. 입력한 내용은 업로드되거나 기록되거나 저장되지 않습니다.

AA와 AAA의 차이는 무엇인가요?

AA는 대부분의 접근성 법률(미국의 ADA, 유럽의 EAA)에서 요구하는 기본 WCAG 준수 수준입니다. AAA는 정부 및 중요한 콘텐츠 사이트에 권장되는 향상된 목표입니다. AA 일반 텍스트는 4.5:1, AAA 일반 텍스트는 7:1이 필요합니다.

WCAG에서 '큰 텍스트'는 무엇으로 간주되나요?

WCAG는 '큰'을 18pt(일반적으로 24 CSS 픽셀) 일반 또는 14pt(19 CSS 픽셀) 굵은 텍스트 이상으로 정의합니다. 그보다 작은 것은 '일반 텍스트'로 간주되며 AA에 대해 더 엄격한 4.5:1 기준을 적용받습니다.

비율 공식에 0.05가 나타나는 이유는 무엇인가요?

스크린 표면에서 반사된 주변 빛을 모델링하는 플레어 상수입니다. 이것이 없으면 순수한 검정색에 대한 어떤 색상도 무한 비율을 생성하게 되어 수학과 현실 모두를 깨뜨립니다 — 실제 디스플레이는 항상 일부 기본 빛을 방출합니다.

이 도구는 글꼴 렌더링이나 안티 앨리어싱을 고려하나요?

아니요 — 이는 명목 색상 값에서 작동하는 공식 WCAG 공식을 따릅니다. 실제로 안티 앨리어싱은 인식된 대비를 약간 조정할 수 있지만, WCAG 비율은 보조 기술 감사자와 법적 검토자가 사용하는 것입니다.

대비를 위해 WCAG 대신 APCA를 사용해야 하나요?

APCA(WCAG 3.0에 제안된 알고리즘)는 특히 어두운 배경에 밝은 텍스트에 대해 더 인지적으로 정확하지만, WCAG 2.2는 여전히 현재 법적 기준이며 대부분의 감사에서 보고되는 메트릭입니다. 준수를 위해 WCAG 2.2를 사용하고, 디자인 시스템 연구를 위해 APCA를 실험해 보세요.

아이콘과 UI 구성 요소는 어떤 대비 비율을 가져야 하나요?

WCAG 1.4.11은 UI 구성 요소의 시각적 경계와 인접 색상 간의 3:1 비율, 그리고 콘텐츠 이해에 필요한 그래픽의 부분 간의 3:1 비율을 요구합니다. 이 도구의 다섯 번째 배지는 그 기준을 구체적으로 보고합니다.

내 색상이 '괜찮아 보이는데' 왜 실패했나요?

WCAG는 가장 보기 힘든 경우에 맞춰 조정됩니다 — 저시력 사용자, 밝은 주변 빛, 저렴한 디스플레이. 어두운 사무실에서 괜찮아 보이는 조합이 야외에서 20/40 시력을 가진 사용자에게는 읽을 수 없을 수 있습니다. 눈이 아닌 비율을 믿으세요.

마지막 업데이트 2026-04-21

대비 검사기는 무엇인가요?

색상 대비를 확인하는 방법

텍스트 색상 입력

전경 (텍스트) 색상에 대한 헥스 코드를 붙여넣거나 색상 선택기를 사용하세요. 이 도구는 #03A와 같은 3자리 약어도 허용합니다.

배경 색상 입력

배경에 대해서도 동일하게 하세요. 텍스트 색상만 알고 있다면 기본 테스트를 위해 배경을 흰색 (#FFFFFF)으로 두세요.

비율 읽기

큰 비율 숫자는 입력할 때 업데이트됩니다. 3.0 미만의 비율은 일반 텍스트에 대한 가장 느슨한 WCAG 기준도 통과하지 못합니다.

WCAG 배지 확인

다섯 개의 배지는 AA 일반, AA 큰, AAA 일반, AAA 큰 및 UI 구성 요소 기준에 대한 통과/실패를 보여줍니다. AA는 일반적인 법적 최소 기준이며, AAA는 주요 콘텐츠에 대한 향상된 목표입니다.

미리보기 및 복사

미리보기가 제목 및 본문 크기에서 올바르게 보이는지 확인한 후, 스타일시트를 위한 `color:` 및 `background-color:` 선언을 가져오기 위해 Copy CSS를 사용하세요.

WCAG 대비 공식

각 채널 (R, G, B를 0–1로 스케일링):
  c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
 
상대 밝기:
  L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear
 
대비 비율:
  ratio = (L_light + 0.05) / (L_dark + 0.05)
  여기서 L_light = max(L1, L2) 및 L_dark = min(L1, L2)

예시

쌍	비율 및 판결
#000000 on #FFFFFF	21:1 — 모든 기준을 통과 정식 최대 대비. 장기 읽기 UI에 사용됩니다.
#1A73E8 on #FFFFFF	4.63:1 — AA 일반 통과, AAA 일반 실패 흰색 배경에 구글 블루. 본문 텍스트로는 법적이지만 AAA는 아닙니다.
#808080 on #FFFFFF	3.95:1 — AA 일반 실패, AA 큰 통과 흰색 배경에 중간 회색 — 제목에는 괜찮지만 단락에는 너무 밝습니다.

일반적인 사용 사례

WCAG AA 준수를 위해 마케팅 페이지 또는 랜딩 페이지 감사

구성 요소에 배포하기 전에 새로운 디자인 시스템 팔레트 검증

어두운 표면에서 텍스트가 읽을 수 있도록 어두운 모드 변형 테스트

브랜드 색상이 흰색 또는 사진 오버레이에 대해 충분한 대비를 가지는지 확인

실패한 Lighthouse 또는 axe-core 접근성 감사 디버깅

PR 리뷰 전에 제안된 텍스트 색상을 기준 배경과 비교

색상 채우기 위에 대비를 통과하는 버튼 레이블 색상 선택

자주 묻는 질문

내 색상 데이터가 서버로 전송되나요?

아니요. 모든 대비 계산은 브라우저에서 발생합니다. 입력한 내용은 업로드되거나 기록되거나 저장되지 않습니다.

AA와 AAA의 차이는 무엇인가요?

WCAG에서 '큰 텍스트'는 무엇으로 간주되나요?

비율 공식에 0.05가 나타나는 이유는 무엇인가요?

이 도구는 글꼴 렌더링이나 안티 앨리어싱을 고려하나요?

대비를 위해 WCAG 대신 APCA를 사용해야 하나요?

아이콘과 UI 구성 요소는 어떤 대비 비율을 가져야 하나요?

내 색상이 '괜찮아 보이는데' 왜 실패했나요?

색상 대비 검사기

WCAG 준수

실시간 미리보기

빠른 갈색 여우가 게으른 개를 뛰어넘습니다.

대비 검사기는 무엇인가요?

색상 대비를 확인하는 방법

WCAG 대비 공식

예시

일반적인 사용 사례

관련 도구

자주 묻는 질문

색상 대비 검사기

WCAG 준수

실시간 미리보기

빠른 갈색 여우가 게으른 개를 뛰어넘습니다.

대비 검사기는 무엇인가요?

색상 대비를 확인하는 방법

WCAG 대비 공식

예시

일반적인 사용 사례

관련 도구

자주 묻는 질문