색상 대비 검사기 (WCAG)
전경·배경 명암비를 계산하고 WCAG AA/AAA를 판정
큰 텍스트 샘플 Aa
Large text sample Aa
일반 텍스트 샘플입니다. 이 문장으로 가독성을 확인하세요.
This is a normal text sample. Check readability with this sentence.
모든 계산은 브라우저에서만 처리되며 서버로 전송·저장되지 않습니다.All calculations run entirely in your browser — never uploaded or stored.
색상 대비 검사기란?
색상 대비 검사기는 전경색(텍스트)과 배경색 두 가지 색상의 명암비(contrast ratio)를 계산해 WCAG 2.1 접근성 기준을 통과하는지 즉시 확인하는 도구입니다. 색상 코드를 입력하거나 색상 선택기로 고르면 명암비와 실시간 미리보기가 바로 반영됩니다.
WCAG 기준 설명
- 일반 텍스트: AA 4.5:1 이상, AAA 7:1 이상
- 큰 텍스트(18pt 이상 또는 굵게 14pt 이상): AA 3:1 이상, AAA 4.5:1 이상
개인정보·처리 방식
모든 계산은 사용자의 브라우저 안에서만 이루어집니다. 입력한 색상값은 서버로 전송되거나 저장되지 않습니다.
대비율은 어떻게 계산되나요? — 상대 휘도의 원리
명암비 계산은 사람이 색을 인식하는 방식에 가까운 상대 휘도(relative luminance)를 먼저 구하는 데서 시작합니다. R·G·B 각 채널값(0~255)을 255로 나눈 뒤, 값이 0.03928 이하면 선형으로, 초과하면 감마 보정 공식 ((값+0.055)÷1.055)^2.4로 변환합니다. 이렇게 얻은 세 채널 값에 0.2126×R + 0.7152×G + 0.0722×B 가중치를 곱해 더하면 상대 휘도가 나오는데, 초록(G) 채널의 가중치가 압도적으로 큰 이유는 사람 눈의 원추세포가 초록색 파장 변화에 가장 민감하기 때문입니다. 두 색의 상대 휘도가 정해지면 (더 밝은 휘도+0.05)÷(더 어두운 휘도+0.05)로 명암비를 계산하며, 이 도구는 이 공식을 자바스크립트로 그대로 구현합니다.
회색 텍스트, 왜 특히 조심해야 할까 — 통과·실패 실례 검산
실무에서 접근성 기준에 가장 자주 걸리는 색은 의외로 극단적인 색이 아니라 중간 톤 회색 텍스트입니다. 눈으로 보기엔 충분히 진해 보여도 계산해보면 기준에 못 미치는 경우가 많습니다. 예를 들어 흰 배경(#ffffff) 위에 #999999 회색 텍스트를 올리면 명암비는 2.85:1로 일반 텍스트 AA 기준 4.5:1에 크게 못 미쳐 실패합니다. 같은 배경에 조금 더 어두운 #767676을 쓰면 명암비가 4.54:1로 올라 AA 기준을 근소하게 통과합니다. 위 도구에 두 조합을 직접 입력해 배지가 실패→통과로 바뀌는 것을 확인해 보세요. 이렇게 회색은 조금만 밝기를 조정해도 통과 여부가 뒤바뀌므로, 디자인 시안의 회색 텍스트는 감으로 판단하지 말고 항상 계산해서 확인하는 것이 안전합니다.
What is this tool?
The color contrast checker computes the contrast ratio between a foreground (text) color and a background color, and instantly checks whether it passes WCAG 2.1 accessibility thresholds. Type a hex code or pick a color, and the ratio and live preview update immediately.
WCAG thresholds
- Normal text: AA ≥ 4.5:1, AAA ≥ 7:1
- Large text (18pt+ or bold 14pt+): AA ≥ 3:1, AAA ≥ 4.5:1
Privacy & processing
Everything runs in your browser. Color values are never uploaded or stored.
How is the ratio calculated? — the relative luminance principle
Contrast calculation starts with relative luminance, a value closer to how humans perceive brightness. Each R·G·B channel (0–255) is divided by 255, then converted linearly if ≤0.03928 or via the gamma-correction formula ((value+0.055)÷1.055)^2.4 otherwise. The three results are combined with weights 0.2126×R + 0.7152×G + 0.0722×B — green dominates because human cone cells are most sensitive to green wavelength changes. Once both colors have a relative luminance, the ratio is (lighter+0.05)÷(darker+0.05), the exact formula this tool implements in JavaScript.
Why gray text needs extra care — a pass/fail worked example
The color that trips up accessibility checks most often in practice isn't an extreme color — it's mid-tone gray text. It can look dark enough by eye while still falling short when calculated. On a white background (#ffffff), #999999 gray text gives a ratio of 2.85:1, well under the 4.5:1 AA threshold for normal text — a fail. Darkening it slightly to #767676 on the same background raises the ratio to 4.54:1, narrowly clearing AA — a pass. Try both combinations in the tool above and watch the badge flip from fail to pass. Because a small brightness tweak can flip the result, gray text in a design mockup should always be calculated, never eyeballed.