대비 검사기

WCAG 2.1 가이드라인에 따라 색상 대비율을 즉시 확인하세요. 텍스트가 읽기 쉽고 디자인이 모든 사람에게 접근 가능한지 확인하세요. 무료이며 사용하기 쉽습니다.

명암 검사기는 WCAG 접근성 표준에 따라 텍스트와 배경색 간의 명암 비율을 평가합니다. AA 및 AAA 수준의 합격/불합격을 표시하고, 실시간 미리보기를 제공합니다. 모든 계산은 브라우저에서 로컬로 이루어집니다.

색상이 WCAG 접근성 표준을 충족하는지 확인

AA 및 AAA 합격/불합격 표시기가 있는 실시간 명암 비율 계산. 실시간 텍스트 미리보기, 즉시 HEX 입력, 복사 가능한 값 — 모두 브라우저에서 처리됩니다.

WCAG 2.1 준수

실시간 미리보기

무료 무제한

사용 방법

1
색상 입력
텍스트 및 배경색의 HEX 코드를 입력하세요.
2
미리보기 보기
실시간으로 텍스트가 어떻게 보이는지 확인하세요.
3
비율 확인
계산된 대비율을 검토하세요.
4
규정 준수 확인
WCAG AA/AAA 표준을 통과하는지 확인하세요.

접근성이 중요한 이유

더 넓은 잠재고객에게 도달

색각 이상이 있는 사람들(남성의 약 12명 중 1명, 여성의 200명 중 1명)과 저시력자들이 콘텐츠를 사용할 수 있도록 만드세요.

모두를 위한 경험 향상

좋은 대비는 특히 어두운 화면이나 밝은 햇빛 아래에서 모든 사람의 가독성을 향상시킵니다.

색상 명암과 접근성 이해하기

WCAG 명암 요구사항 설명

W3C가 발표한 웹 콘텐츠 접근성 가이드라인(WCAG) 2.1은 시각 장애가 있는 사람도 텍스트를 읽을 수 있도록 최소 명암 비율을 정의합니다. 가이드라인은 세 가지 적합성 수준을 지정합니다: A(최소), AA(표준), AAA(강화). AA 수준의 경우 일반 텍스트(18pt 미만 또는 14pt 굵게 미만)는 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게 이상)는 3:1이 요구됩니다. AAA 수준의 경우 요구 사항이 더 엄격합니다: 일반 텍스트 7:1, 큰 텍스트 4.5:1.

명암 비율은 두 색상의 상대 휘도를 사용하여 계산됩니다. 상대 휘도는 선형화된 RGB 채널의 가중 합입니다: L = 0.2126*R + 0.7152*G + 0.0722*B. 여기서 R, G, B는 감마 보정된 값입니다. 명암 비율은 (L1 + 0.05) / (L2 + 0.05)이며, L1은 더 밝은 색상, L2는 더 어두운 색상입니다. 0.05 오프셋은 화면의 주변광 플레어를 설명합니다.

이러한 요구 사항은 임의가 아닙니다. 인간 시각에 대한 광범위한 연구를 기반으로 합니다. 남성의 약 8%, 여성의 0.5%가某种 형태의 색각 이상(색맹)을 가지고 있습니다. 낮은 명암은 이러한 사용자뿐만 아니라 밝은 햇빛, 저품질 디스플레이 또는 비스듬한 각도에서 화면을 보는 모든 사람에게 영향을 미칩니다. WCAG AA 명암 요구 사항을 충족하면 장애가 있는 사용자뿐만 아니라 모든 사람의 가독성이 향상됩니다. 많은 관할권(EU, 미국 ADA)에서 WCAG 준수는 공개 웹사이트의 법적 요구 사항입니다.

일반적인 명암 실수와 수정 방법

가장 일반적인 명암 실수는 흰색 배경에 밝은 회색 텍스트를 사용하는 것입니다. 일반적인 디자인 트렌드는 보조 정보에 #999 또는 #AAA 회색 텍스트를 사용하지만, 이러한 색상은 각각 2.85:1과 2.32:1의 명암 비율을 가집니다. 4.5:1 최솟값보다 훨씬 낮습니다. 흰색 배경의 보조 텍스트에는 #767676(4.54:1) 이상을 사용하세요. 또 다른 일반적인 문제는 시각적으로는 좋아 보이지만 명암 검사에 실패하는 브랜드 색상을 사용하는 것입니다. 브랜드의 밝은 파랑(#00BFFF)은 흰색 배경에서 2.32:1의 비율로 WCAG AA에 실패합니다. 텍스트 사용을 위해 브랜드 색상을 어둡게 하거나 비텍스트 요소(테두리, 배경, 아이콘)에만 사용하세요.

큰 텍스트(제목, 버튼)의 경우 3:1 요구 사항이 더 관대하지만 남용하지 마세요. 3:1을 간신히 통과하는 큰 텍스트는 여전히 많은 사용자에게 읽기 어렵습니다. 텍스트 크기에 관계없이 가능하면 항상 4.5:1을 목표로 하세요. 색상 배경을 사용할 때 텍스트 색상과 호버 또는 포커스 상태에서 나타날 수 있는 모든 텍스트를 테스트하세요. CSS 사용자 정의 속성(변수)을 사용하면 일관된 명암을 유지하기 쉽습니다. 명암 테스트를 거친 색상 쌍으로 팔레트를 정의하고 디자인 시스템 전체에 재사용하세요.

WCAG 등급 이해하기

레벨 AA (표준)

일반 텍스트는 4.5:1, 큰 텍스트는 3:1이 필요합니다. 대부분의 웹사이트의 표준 목표입니다.

레벨 AAA (강화)

일반 텍스트는 7:1, 큰 텍스트는 4.5:1이 필요합니다. 심각한 시력 손실이 있는 사용자를 위한 향상된 접근성입니다.

다른 대비 검사기와 어떻게 비교되나요?

인기 WCAG 명암 검사 도구의 나란히 비교입니다.

기능	NovaTools	WebAIM	Contrast-Ratio.com
WCAG 2.1 AA + AAA	두 수준 모두
입력 시 실시간 미리보기	즉시	제출
HEX + RGB 입력	모두	HEX 전용	HEX 전용
색상 선택기 통합	EyeDropper
큰 텍스트 임계값	18pt / 14pt bold
프라이버시(서버 없음)	100% 로컬

당사 명암 검사기는 정확한 W3C 휘도 공식을 사용하며 브라우저 내에서 완전히 실행됩니다. 색상 값이 서버로 전송되지 않아 기밀 디자인 작업에 안전합니다.

자주 묻는 질문

색상 대비란 무엇이며 왜 중요한가요?

색상 대비는 전경색과 배경색 간의 밝기 차이입니다. 높은 대비는 시각 장애가 있는 사람들이 콘텐츠를 효과적으로 인식할 수 있도록 보장합니다.

로고도 이 표준을 충족해야 하나요?

아니요, WCAG 가이드라인은 로고나 브랜드 이름의 일부인 텍스트 및 순전히 장식용인 텍스트에 대한 예외를 제공합니다.

낮은 대비율을 어떻게 수정할 수 있나요?

밝기 차이를 늘리세요. 밝은 색을 더 밝게 하거나 어두운 색을 더 어둡게 만드세요. 실시간 미리보기를 사용하여 실험해 보세요.

낮은 명암 비율을 어떻게 수정할 수 있나요?

Increase the difference in luminance between the text and background. The most effective approach is to make the light color lighter or the dark color darker. For example, if your text is `#666666` on a white background (contrast ratio 5.7:1, passes AA), but you want to use a lighter gray for aesthetic reasons, you can darken the background instead. Our tool's live preview lets you experiment with different HEX values and see the contrast ratio update in real time. A general rule: pure black on pure white gives the maximum contrast ratio of 21:1. Any deviation from black/white reduces the ratio.

명암 비율은 어떻게 계산되나요?

The contrast ratio is calculated using the WCAG 2.1 formula, which uses relative luminance values. First, the relative luminance (L) of each color is calculated using a formula that accounts for the non-linear response of the human eye to different color channels (a gamma correction of approximately 2.2). Then the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The +0.05 accounts for ambient light flare. The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Our tool performs this calculation instantly as you type.

WCAG 2.1과 WCAG 2.2의 차이는 무엇인가요?

WCAG 2.2, published in October 2023, adds a few new success criteria but does not change the contrast requirements from WCAG 2.1. The contrast ratios (4.5:1 for normal text, 3:1 for large text at Level AA) remain the same. WCAG 2.2 does add a requirement for 'focus visible' (2.4.11) which means focus indicators must have at least 3:1 contrast against adjacent colors. Our tool checks against the WCAG 2.1 contrast criteria, which are identical to WCAG 2.2 for contrast purposes. If you pass WCAG 2.1 contrast, you also pass WCAG 2.2 contrast.

이 도구는 색맹 접근성도 검사하나요?

This tool specifically checks luminance contrast, which is the WCAG requirement. Color blindness (more accurately, color vision deficiency) is a separate concern — it affects the ability to distinguish between colors, not brightness. However, meeting WCAG contrast requirements significantly helps users with color vision deficiency, because higher luminance contrast makes it easier to distinguish text from background regardless of hue. For full color blindness accessibility, never rely on color alone to convey information — always provide a text label, icon, or pattern as well.

제 색상 데이터가 서버로 전송되나요?

No. All contrast calculations happen entirely in your browser using JavaScript. The HEX values you enter are processed locally by the browser's JavaScript engine — they are never transmitted to our servers, stored in a database, or shared with third parties. The tool does not use cookies, local storage, or session storage to persist your color choices. There are no analytics scripts tracking which colors you test. This makes the tool safe to use for proprietary brand colors, confidential design systems, or client work where color choices should not be exposed to third parties.

귀하의 프라이버시가 저희의 최우선 사항입니다

이 도구는 완전히 브라우저 내에서 실행됩니다. 파일은 서버로 업로드, 저장, 분석되지 않습니다.

파일을 업로드, 저장, 분석하지 않습니다.
처리하는 모든 것은 장치에 남습니다.
서버 측 처리, 클라우드 저장소, 분석이 없습니다.

인터넷 연결이 끊겨도 파일은 안전합니다.

이것도 좋아하실 수 있습니다

이 주제 둘러보기

이 카테고리의 모든 도구색상 도구 이 주제의 가이드디자인 및 접근성

색상 선택기

이미지나 화면에서 색상을 선택합니다.

팔레트 생성기

아름다운 색상 팔레트를 만듭니다.

HEX ↔ RGB ↔ HSL 변환기

HEX, RGB, HSL 형식 간에 색상을 변환하세요. 실시간 미리보기, 빠른 프리셋, CSS용 값 복사. 100% 클라이언트 측 실행, 업로드 없음.