Loading...
Loading...
WCAG 2.2 AA 및 AAA 대비 요구 사항에 대해 모든 텍스트 및 배경 색상 쌍을 테스트하며, 즉각적인 통과/실패 피드백과 실시간 미리보기를 제공합니다.
Higher ratios are more readable. 21:1 is pure black on white.
See your color pair on both body and heading sizes.
Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.
대비 검사기는 두 색상 간의 밝기 차이를 측정하고 이를 1:1 (동일)에서 21:1 (순수 검정색과 순수 흰색) 사이의 비율로 보고합니다. 접근성 가이드라인은 이 비율을 사용하여 저시력, 색맹 사용자 또는 밝은 햇빛 아래에서 화면을 보는 사용자가 텍스트를 읽을 수 있는지 여부를 결정합니다. 이 도구는 WCAG 2.2를 따릅니다. 이는 미국의 ADA, 유럽 접근성 법 및 대부분의 기업 디자인 시스템에서 참조하는 동일한 표준입니다. 두 가지 색상을 입력하면 다섯 가지 WCAG 기준에 대한 즉각적인 통과/실패 결과와 본문 및 제목 크기에서의 실시간 미리보기를 얻을 수 있습니다. 모든 것이 브라우저에서 실행됩니다 — 업로드, 추적, 계정이 필요 없습니다.
전경 (텍스트) 색상에 대한 헥스 코드를 붙여넣거나 색상 선택기를 사용하세요. 이 도구는 #03A와 같은 3자리 약어도 허용합니다.
배경에 대해서도 동일하게 하세요. 텍스트 색상만 알고 있다면 기본 테스트를 위해 배경을 흰색 (#FFFFFF)으로 두세요.
큰 비율 숫자는 입력할 때 업데이트됩니다. 3.0 미만의 비율은 일반 텍스트에 대한 가장 느슨한 WCAG 기준도 통과하지 못합니다.
다섯 개의 배지는 AA 일반, AA 큰, AAA 일반, AAA 큰 및 UI 구성 요소 기준에 대한 통과/실패를 보여줍니다. AA는 일반적인 법적 최소 기준이며, AAA는 주요 콘텐츠에 대한 향상된 목표입니다.
미리보기가 제목 및 본문 크기에서 올바르게 보이는지 확인한 후, 스타일시트를 위한 `color:` 및 `background-color:` 선언을 가져오기 위해 Copy CSS를 사용하세요.
각 채널 (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 (순수 검정색과 순수 흰색)까지 다양합니다.
| 쌍 | 비율 및 판결 |
|---|---|
#000000 on #FFFFFF | 21:1 — 모든 기준을 통과 정식 최대 대비. 장기 읽기 UI에 사용됩니다. |
#1A73E8 on #FFFFFF | 4.63:1 — AA 일반 통과, AAA 일반 실패 흰색 배경에 구글 블루. 본문 텍스트로는 법적이지만 AAA는 아닙니다. |
#808080 on #FFFFFF | 3.95:1 — AA 일반 실패, AA 큰 통과 흰색 배경에 중간 회색 — 제목에는 괜찮지만 단락에는 너무 밝습니다. |
마지막 업데이트