명도 대비 검사기
두 색의 WCAG 명도 대비 비율을 계산하고 일반·큰 텍스트 각각의 AA, AAA 통과 여부를 바로 보여 주며, 실시간 미리보기로 눈으로 확인할 수 있습니다.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
이 도구는 전부 브라우저 안에서 실행됩니다. 데이터는 기기를 떠나지 않으며 어떤 서버로도 업로드되지 않습니다.
사용 방법
- 1전경색에 hex 또는 rgb() 값을 입력하거나 색 선택기를 사용합니다.
- 2배경색에도 같은 방식으로 값을 넣습니다.
- 3비율과 AA / AAA 배지를 확인하거나 프리셋을 눌러 봅니다.
- 4미리보기 블록에서 실제 조합을 눈으로 판단합니다.
명도 대비 검사기
전경색과 배경색을 입력하세요 — #333이나 #1F2937 같은 hex, 또는 rgb()/rgba() — 소수 둘째 자리까지의 WCAG 대비 비율과 네 가지 핵심 기준(AA·AAA × 일반·큰 텍스트)의 통과/실패 배지가 즉시 나옵니다. 미리보기에서 실제 색으로 본문과 큰 텍스트 샘플을 확인할 수 있습니다.
계산은 WCAG 2.x 공식 상대 휘도 공식을 그대로 사용합니다 — W3C 검사기와 같은 식이므로 여기의 4.5는 어디서나 4.5입니다. 프리셋에는 4.54:1의 아슬아슬한 회색 조합이 있어 AA 기준선이 얼마나 빡빡한지 체감할 수 있습니다.
자주 묻는 질문
통과하려면 대비 비율이 얼마나 되어야 하나요?
WCAG 2.x 기준으로 일반 본문은 AA 4.5:1, AAA 7:1입니다. 큰 텍스트(24px 이상 또는 18.7px 이상 굵게)는 AA 3:1, AAA 4.5:1입니다. UI 구성 요소와 그래픽은 3:1이 필요합니다.
비율은 어떻게 계산되나요?
각 색을 sRGB에서 선형화한 뒤 상대 휘도 L = 0.2126·R + 0.7152·G + 0.0722·B로 합산하고, 비율은 (밝은 L + 0.05) / (어두운 L + 0.05)입니다. WCAG 2.x 명세의 공식 그대로이며, 알파가 1 미만인 rgba()는 계산 전에 흰색 위에 합성됩니다.
관련 도구
색상 변환기
hex, rgb(), hsl() 어느 형식이든 붙여 넣으면 세 형식 전부와 디자인 시스템에 바로 쓸 틴트·셰이드 행을 만들어 줍니다. 설치도 가입도 필요 없습니다.
전체 도구 →
색상 피커
스와치에서 색을 고르거나 EyeDropper API로 화면에서 바로 뽑습니다 — hex, RGB, HSL이 클릭 한 번에 복사됩니다. 설치도 가입도 필요 없습니다.
전체 도구 →
성적 계산기
가중치 방식과 점수 방식 성적 계산기: 과제를 추가하면 현재 성적과 등급이 실시간으로 보이고, 기말고사에서 몇 점이 필요한지까지 정확히 역산해 줍니다.
전체 도구 →
도구 삽입
한 줄로 사이트에 도구를 넣으세요. 방문자의 브라우저에서 실행됩니다.
<iframe src="https://zoyku.com/ko/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>