모든 처리는 브라우저 내부에서 실행됩니다 — 파일·입력은 서버로 전송되지 않습니다.
WCAG 2.1은 요구 대비비를 두 변수로 결정합니다. 텍스트의 크기와 달성 등급입니다. AA는 유럽 EAA·미국 Section 508·일본 JIS X 8341 등 다수 규제가 실질적으로 요구하는 수준입니다. AAA는 더 엄격한 이상으로, 순수 텍스트에서는 도달 가능하지만 UI 크롬에서는 닿기 어려운 경우가 잦습니다. UI 컴포넌트와 비텍스트 시각 지표는 AA 만으로 3 : 1을 요구하며 AAA 기준은 규격 자체가 의도적으로 비워 둡니다.
| 맥락 | 적용 상황 | AA 최소 | AAA 최소 |
|---|---|---|---|
| 본문 텍스트 | 18pt 미만 일반 굵기 또는 14pt 미만 굵은 글씨. 본문의 기본 설정. | 4.5 : 1 | 7 : 1 |
| 큰 텍스트 | 18pt 이상 일반 굵기 또는 14pt 이상 굵은 글씨. 제목·강조 문구. | 3 : 1 | 4.5 : 1 |
| UI 컴포넌트·그래픽 | 폼 테두리·포커스 링·차트 선 등 상태를 시각으로 전달하는 요소. | 3 : 1 | — |
WCAG 2.x의 대비는 두 색의 상대 휘도에서 계산됩니다. 상대 휘도는 밝기를 0~1 범위에서 지각적으로 근사한 값입니다. 각 색에 대해 sRGB 채널 값을 255로 나눈 뒤 0.03928 부근을 경계로 하는 구간 함수로 감마를 복호하고, R = 0.2126·G = 0.7152·B = 0.0722이라는 채널 가중치로 합산합니다. 가중치는 인간 눈의 감도에서 옵니다. 녹색이 가장 큰 이유는 녹색 감수 원추세포가 지각 밝기에 가장 크게 기여하기 때문입니다.
비는 (L1 + 0.05) / (L2 + 0.05)이며 L1은 휘도가 높은 쪽입니다. 0.05는 규격이 주변광의 화면 반사를 감안해 둔 상수입니다. 이게 없으면 순흑 배경에 임의의 비흑 전경을 두기만 해도 비가 무한대로 나옵니다. 출력 범위는 1 : 1(동일)부터 이상 디스플레이상의 순백 대 순흑인 약 21 : 1까지입니다. 위 도구가 표시하는 값은 이 사이의 한 점입니다.
유럽계에서는 남성의 약 8%, 여성의 약 0.5%가 어떤 형태의 색각 이상을 가집니다. 비율은 민족에 따라 달라집니다. 주요 유형과 영향:
| 유형 | 변화 | 빈도 |
|---|---|---|
| 제1색맹(적색맹) | L원추세포 결손. 빨강이 어둡게 보이고 빨강과 초록, 주황과 노랑이 헷갈림. | ~1% male |
| 제2색맹(녹색맹) | M원추세포 결손. 가장 흔한 유형. 정상 밝기에서 빨강과 초록이 혼동됨. | ~6% male |
| 제3색맹(청색맹) | S원추세포 결손. 매우 드묾. 파랑과 노랑이 혼동됨. | ~0.01% |
| 전색맹 | 원추세포가 기능하지 않아 명도만 지각하고 색상은 전혀 지각하지 못함. | ~0.003% |
높은 대비는 전반적으로 도움이 되지만 모든 문제를 해결하지는 못합니다. 휘도가 같은 두 색(등휘도)은 대비비가 1 : 1이 되어 전색맹 에는 전혀 구분되지 않습니다. 적록 계열에서는 휘도가 같은 빨강과 초록 조합이 거의 동일하게 보이는 경우가 있습니다. AA 충족은 필요 조건이지 충분 조건이 아닙니다. 색 선택과 조합은 별도 차원에서 중요합니다.
가장 효과적인 패턴은 "색 + 형태"입니다. 색만으로 정보를 부호화 하지 않습니다. "성공이면 초록, 오류면 빨강" 상태 배지에는 아이콘이나 단어를 함께 둡니다. 필수 입력은 빨강만으로 표시하지 말고 별표를 붙이고 aria-required로 기술합니다. 색상만으로 구분 되는 차트 라인에는 라벨·획 패턴·직접 주석을 더합니다. 이런 조치들은 흑백 출력·강한 햇빛·디스플레이 백라이트 열화 등 어느 상황에서도 모두에게 도움이 됩니다.
조작 요소에서는 텍스트 안쪽 대비만큼이나 포커스 링 대비도 중요합니다. 텍스트 대비가 훌륭해도 포커스 링이 1 : 1인 버튼은 키보드 사용자에게 망가진 상태입니다. 디자인 시스템 대부분이 프라이머리 버튼에서는 이를 지키지만 세컨더리·고스트 변형에서는 놓치는 일이 많습니다. 명시적으로 점검할 가치가 있습니다.
WCAG 2의 대비 공식은 지각 모델로는 부족하다는 비판을 오래 받아 왔습니다. 특히 흰 바탕 중간 회색 본문의 가독성을 과대 평가하고, 매우 밝은 배경의 부담을 과소 평가하는 점이 자주 지적됩니다. WCAG 3(2021년 이래 워킹 드래프트)은 APCA(Advanced Perceptual Contrast Algorithm)를 후속으로 제안하며, 대칭적인 비가 아니라 극성에 민감한 Lc 값을 출력합니다. 범위는 약 -108 ~ +106이고, 어두운색이 밝은색 위에 있으면 양수, 반대면 음수 입니다.
APCA는 아직 규범 표준이 아닙니다. 당분간은 WCAG 2.1 비 기반 AA·AAA가 다수 규제에서 운용되며 이 도구도 그 비를 계산합니다. WCAG 3가 확정되면 권장 수치는 Lc 값으로 표현되고(예: 본문에 Lc 75), 신·구 방식 병존 시기에는 디자이너가 양쪽 모두로 검증 해야 합니다. 동향을 추적하려면 WCAG 워킹 드래프트와 apcacontrast.com 참고 구현을 살펴 두세요.
전경색과 배경색(HEX 또는 RGB)을 고르면 WCAG 2.1의 상대 휘도 공식에 따라 명도 대비 비율이 즉시 계산됩니다. 결과는 1.0(대비 없음 — 같은 색 위 같은 색)에서 21.0(흰 바탕에 검정)까지의 단일 수치이며 5가지 임계 — 3:1(큰 텍스트 AA·UI 컴포넌트), 4.5:1(본문 AA·큰 텍스트 AAA), 7:1(본문 AAA) — 에 대한 합격·불합격 배지가 붙습니다. 두 색의 샘플 텍스트 라이브 미리보기로 수치와 함께 렌더링 결과를 확인할 수 있습니다.
핸드오프 전 디자인 리뷰, 흰 바탕이나 어두운 배경과 짝짓는 브랜드 색상 선정, 접근성 감사의 지적(전경색 대비 부족)을 디버깅, 모든 색 조합에 가독성 등급을 정하는 디자인 시스템 구축 등에 사용하세요. 캘리브레이션된 디스플레이에서 "문제없음"으로 보이는 디자인도 햇볕 든 카페의 노트북 화면에서는 거의 확실히 WCAG를 만족하지 못합니다 — 접근성 표준이 가정하는 상황이 바로 그것입니다. 본 도구는 WCAG 2.1 대비 공식을 브라우저 안에서 실행하며 어떤 것도 업로드하지 않습니다.
foreground: #06B6A4 background: #FFFFFF
Contrast: 2.51 : 1 Normal text AA (4.5): ✗ fail Large text AA (3.0): ✗ fail UI component (3.0): ✗ fail
일반적인 청록 브랜드 색상은 흰 바탕의 본문에서는 불합격합니다. 채도가 높아 "강한 색"으로 보이지만 휘도는 사실 높은 편(녹색이 많고 파랑도 조금 섞여 둘 다 밝음)이기 때문입니다. 디자이너가 "산뜻하다"고 느껴 청록을 자주 고르지만, 본문 용도에서는 AA를 만족하려면 `#055F58` 정도까지 어둡게 해야 합니다. 원래 청록은 아이콘·브랜드 마크처럼 대비 요건이 느슨한 강조 용도로 남기세요.
foreground: #FFFFFF background: #055F58
Contrast: 7.51 : 1 Normal text AA (4.5): ✓ pass Normal text AAA (7): ✓ pass UI component (3.0): ✓ pass
역조합 — 어두운 청록 배경 위 흰 글씨 — 은 AAA를 여유롭게 만족합니다. WCAG에서 밝은 바탕에 어두운 글씨와 어두운 바탕에 밝은 글씨는 *대칭*이라 어느 쪽을 전경으로 두든 비율은 같습니다. 그래서 히어로 섹션이나 라이트 배너용으로 보색 어두운 변형을 갖는 브랜드가 성립합니다.
foreground: #B0B0B0 background: #FFFFFF
Contrast: 2.30 : 1 Normal text AA (4.5): ✗ fail Large text AA (3.0): ✗ fail
흔한 패턴으로 흰 바탕에 옅은 회색 플레이스홀더가 있습니다. "부드럽고 친근한" UI처럼 *보이*지만 저시력 사용자, 저가 디스플레이, 밝은 주변광에서는 읽히지 않게 됩니다. WCAG 2.1 SC 1.4.3은 플레이스홀더에도 본문과 같은 4.5:1을 요구하며 다수의 사이트가 이를 만족하지 못합니다. `#666666`(4.6:1)이나 `#595959`(7:1, AAA)처럼 조금 더 어두운 회색을 사용하세요.
14pt(약 18.66px) 굵게 또는 18pt(약 24px) 보통 이상입니다. 완화된 3:1 비율이 적용되는 이유는 글리프가 크면 본질적으로 가독성이 높기 때문입니다(획이 굵고 안티에일리어싱 영향이 작음). 이는 CSS 픽셀에서 *렌더링된* 크기이지 디자인 픽셀이 아닙니다. 확대한 사용자는 이미 이 임계를 넘었습니다. WCAG 문서 간 미세한 차이가 있지만 가장 안전한 해석은 명세의 문구 "18pt 또는 14pt 굵게"입니다.
AA는 EU EAA, 미 Section 508, 영 PSBAR, 한 KWAA 등 다수 법역에서 실무적 하한입니다. AAA는 "그 이상을 노린다"는 기준이며 장애인 사용자를 명시적으로 대상으로 하는 콘텐츠(정부 접근성 포털, 의료 정보, 공공 서비스)용입니다. 운영 UI는 AA를 목표로 두고, 장문 독서 앱·접근성 특화 기능·사이트 전반에서 반복되는 패턴의 본문에 AAA를 적용하는 것이 현실적입니다. 모두를 AAA로 맞추려 하면 색감이 단조로워지기 쉽고 트레이드오프가 실제로 존재합니다.
WCAG 3은 드래프트 단계이며 2.x의 비율을 APCA(Accessible Perceptual Contrast Algorithm) — 지각적으로 조정된 공식 — 로 대체할 예정입니다. APCA의 점수는 색상 전반에 걸쳐 실제 가독성과 잘 상관됩니다. 2.x 공식은 파랑·검정 조합을 과대평가하고 옅은 노랑·흰색을 과소평가하는 점으로 악명이 높았습니다. WCAG 3은 2021년부터 "드래프트 중"인 상태이며 2026년 기준 공식 발표일이 정해지지 않았습니다. 각 법역의 법적 기준은 여전히 WCAG 2.1 또는 2.2입니다. 법적 검증에는 이 도구를, 미래 지향적 디자인 시스템 작업에는 전용 도구(apca-w3.com, apca-on-glasses 확장 등)로 APCA를 실험해 보세요.
직접 다루지 않습니다. 대비는 휘도를 재며, 색맹·색약 사용자는 휘도를 정상적으로 지각합니다. 색맹·색약에서 문제되는 것은 **색상만으로 정보를 전달하는 조합**입니다(휘도가 같은 빨강 에러·초록 성공 배지). WCAG SC 1.4.1("색 사용")이 이를 별도로 요구합니다. 본 도구는 이 관점을 판정하지 않습니다. 색맹 시뮬레이터(Chrome DevTools → Rendering → Emulate vision deficiencies, 또는 sim.colourblindawareness.org)와 함께 사용해 두 축 모두를 커버하세요.
WCAG 2.1은 각 색의 **상대 휘도**를 먼저 각 sRGB 채널을 감마 보정(감마 인코드 값에서 선형 광으로 변환)한 뒤 `L = 0.2126·R + 0.7152·G + 0.0722·B` 가중 합으로 구합니다(녹색 계수가 큰 이유는 인간 눈이 녹색에 가장 민감해서). **대비 비율**은 `(L_lighter + 0.05) / (L_darker + 0.05)`. `+ 0.05`는 경험적 상수로 화면에서의 환경광 반사 영향을 근사합니다. 비율은 항상 1.0 이상 21.0 이하이며 흰 바탕에 검정으로 21.0, 흰 바탕에 흰색으로 1.0, 같은 색끼리 1.0이 됩니다.
이유는 세 가지입니다. **공식이 휘도만 다룸** — 눈이 가독성에 사용하는 색상이나 채도 차이를 고려하지 않으므로 파랑·검정 조합이 WCAG를 통과해도 탁해 보일 수 있습니다. **APCA가 이를 해결합니다**(위 WCAG 3 질문 참조). **디스플레이 감마가 제각각** — 같은 HEX라도 휴대폰·노트북·벽걸이 오피스 모니터에서 다르게 보입니다. **주변색 효과** — 밝은 바탕에 둔 어두운 글씨는 주변이 밝을 때와 어두울 때 인상이 다릅니다. WCAG는 이 모든 것을 하나의 상수로 근사하므로 딱 들어맞지 않는 경우가 생깁니다. 비율은 엄격한 하한으로 두고 실제 문맥에서 시각 평가와 함께 사용하세요.
WCAG(Web Content Accessibility Guidelines, W3C)는 웹 접근성의 국제 표준입니다. WCAG 2.0(2008년)은 4가지 POUR 원칙(인식 가능·운용 가능·이해 가능·견고)과 AA·AAA 준수 등급을 도입했습니다. WCAG 2.1(2018년)은 모바일과 저시력 기준을 추가하고, WCAG 2.2(2023년 10월)는 포커스 표시·드래그 동작·접근 가능한 인증을 추가했습니다. 대비 요건(SC 1.4.3 최소 대비, SC 1.4.6 향상된 대비)은 약 50개의 성공 기준 중 하나에 불과하지만 순수하게 측정 가능하기에 가장 많이 인용됩니다.
**대비 비율 공식**은 3단계로 동작합니다. (1) 각 sRGB 채널을 선형화 — sRGB는 감마 인코드되어 있고(값 128은 선형 광의 약 21.6%이지 50%가 아님) 채널은 sRGB 전달 함수로 반전됩니다. (2) `0.2126·R + 0.7152·G + 0.0722·B` 가중치로 상대 휘도를 계산합니다. 가중치는 CIE 1931 관찰자 데이터에서 유도되며 인간의 추체 세포가 녹색에 가장 민감하다는 사실을 반영합니다. (3) 밝은 색을 위에 두고 `(L1 + 0.05) / (L2 + 0.05)`로 비율을 계산합니다. 상수 `0.05`는 화면 환경광 반사를 근사합니다. 출력은 1.0(대비 없음)부터 21.0(이론적 흰 바탕에 검정)에 들어갑니다.
접근성 작업을 둘러싼 3가지 인접 개념이 있습니다. **WCAG 3·APCA**(드래프트 진행 중)는 2.x의 비율을 지각적 대비 점수로 대체할 예정입니다. **색맹 안전성**은 별도 축입니다 — 대비는 휘도를 재고 색맹·색약 사용자는 휘도를 정상적으로 지각하므로 놓치는 것은 색상만으로 전달되는 정보(WCAG SC 1.4.1이 다룸)입니다. **포커스 가시성**(SC 2.4.7, 2.4.11)은 포커스 인디케이터 자체가 인접 배경에 대한 고유 대비를 갖도록 요구합니다. 포커스 상태를 단독으로만 확인하고 실제로 렌더링되는 주변과의 대비를 놓치기 쉬운 점에 주의하세요. 이들은 가시 출력 측면의 접근성을 다루며 보조 기술(스크린 리더·음성 조작·스위치 입력) 축은 별도로 검토해야 합니다.
HEX / RGB / HSL을 서로 변환하고 실시간으로 미리볼 수 있습니다.
선형·방사형 CSS 그라디언트를 시각적으로 생성합니다. 컬러 스톱 드래그, 각도 조정, background CSS 바로 복사를 지원합니다.
종횡비를 유지한 채 가로와 세로를 계산합니다. 16:9 / 4:3 / 21:9 / 1:1 프리셋과 CSS `aspect-ratio` 선언을 함께 제공합니다.
JSON을 정렬하고 검증합니다. 들여쓰기 출력, 압축 출력, 명확한 에러 위치 표시를 지원합니다.
다람쥐 헌 쳇바퀴에 타고파. The quick brown fox.
다람쥐 헌 쳇바퀴에 타고파. The quick brown fox.
본문 텍스트
AAA
큰 텍스트
AAA
UI 컴포넌트
AA
WCAG 2.1: AA는 4.5:1 (큰 텍스트 3:1), AAA는 7:1 (큰 텍스트 4.5:1). 큰 텍스트 = 18pt 이상 또는 14pt 이상 볼드.
