색상 대비 검사기 (WCAG)

전경색 (텍스트) Foreground (text)

배경색 Background

21.00:1

큰 텍스트 샘플 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 이상

참고: sRGB 상대 휘도 공식을 사용해 계산하며, 명암비는 1:1(대비 없음)부터 21:1(흑백 최대 대비)까지의 값을 가집니다.

개인정보·처리 방식

모든 계산은 사용자의 브라우저 안에서만 이루어집니다. 입력한 색상값은 서버로 전송되거나 저장되지 않습니다.

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

Note: Calculated using the sRGB relative luminance formula; ratios range from 1:1 (no contrast) to 21:1 (max black/white contrast).

Privacy & processing

Everything runs in your browser. Color values are never uploaded or stored.

자주 묻는 질문

WCAG 명암비는 어떻게 계산되나요?

먼저 각 색상의 sRGB 채널값을 상대 휘도(relative luminance)로 변환한 뒤, 두 색상 중 더 밝은 휘도에 0.05를 더한 값을 더 어두운 휘도에 0.05를 더한 값으로 나눕니다. 결과는 1:1(대비 없음)부터 21:1(흑백 최대 대비) 사이의 값입니다.

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

AA는 최소 접근성 기준으로 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상을 요구합니다. AAA는 더 엄격한 기준으로 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상을 요구합니다. 공공기관·법적 요구사항이 있는 경우 AA 이상을 권장합니다.

큰 텍스트 기준은 어떻게 정의되나요?

WCAG에서 큰 텍스트는 18pt(24px) 이상, 또는 굵게(bold) 처리된 14pt(약 18.66px) 이상의 텍스트를 의미합니다. 큰 텍스트는 작은 텍스트보다 완화된 명암비 기준이 적용됩니다.

입력한 색상이 서버로 전송되나요?

아니요. 모든 계산은 브라우저 안에서 자바스크립트로 즉시 처리되며, 색상값은 서버로 전송되거나 저장되지 않습니다.

FAQ

How is the WCAG contrast ratio calculated?

Each color's sRGB channel values are converted to relative luminance, then the lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. The result ranges from 1:1 (no contrast) to 21:1 (max black/white contrast).

What's the difference between AA and AAA?

AA is the minimum accessibility standard, requiring 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA or higher is recommended for public or legally regulated sites.

How is "large text" defined?

WCAG defines large text as 18pt (24px) or larger, or bold text at 14pt (about 18.66px) or larger. Large text gets a relaxed contrast threshold compared to normal text.

Are entered colors sent to a server?

No. All calculations run instantly in your browser via JavaScript; color values are never transmitted or stored.

색상 대비 검사기 (WCAG)

Color Contrast Checker (WCAG)

자주 묻는 질문

FAQ

함께 보면 좋은 도구

Related tools