WCAG 대조비 확인기 전경색과 배경색 사이의 WCAG 대조비를 확인합니다.

What Is 대조비 확인기?

WCAG 대비 비율 체커는 전경(문자)와 배경 색상의 대비 비율을 계산하여 웹 콘텐츠 접근성 지침(WCAG) 2.1에 따라 색상 조합의 접근성을 평가합니다. 이 도구는 발광도 기반 대비 비율을 계산하고 네 가지 WCAG 임계값과 비교합니다: 일반 텍스트(≥4.5:1)에 대한 AA, 큰 텍스트(≥3.0:1)에 대한 AA, 일반 텍스트(≥7.0:1)에 대한 AAA, 큰 텍스트(≥4.5:1)에 대한 AAA. 이러한 임계값을 통과하면 저시력 및 색각 이상 등 다양한 시력 장애를 가진 사용자가 텍스트를 읽을 수 있습니다. 도구는 다른 크기에서 실제로 어떻게 보이는지 보여주는 라이브 텍스트 미리보기와 각 WCAG 레벨에 대한 명확한 합격/불합격 표시기를 제공합니다. 이는 접근 가능한 디지털 경험을 만들고자 하는 모든 웹 개발자 또는 디자이너에게 필수적인 도구입니다.

Why Use 대조비 확인기?

• 즉각적인 WCAG AA와 AAA 준수 확인
• 다양한 크기로 표시되는 텍스트 미리보기로 실제 가독성을 확인합니다.
• 필요한 비율 임계값을 갖춘 명확한 통과/실패 지표
• 역방향 색상 조합 테스트를 위한 교체 버튼
• 정규 및 대형 텍스트에 대한 AA/AAA 4가지 준수 수준 테스트

Common Use Cases

웹 접근성

텍스트와 배경의 조합이 WCAG 2.1 요구 사항을 충족하는지 확인하여 ADA 및 AODA 준수를 보장합니다.

디자인 시스템 감사

접근성 준수 여부를 테스트하기 위해 디자인 시스템의 모든 색상 조합을 테스트합니다.

브랜드 색상 평가

브랜드 색상이 접근성 표준을 충족하는 텍스트 및 배경 조합으로 사용될 수 있는지 확인합니다.

법적 준수

디지털 콘텐츠가 WCAG 기준을 참조하는 접근성 법률을 준수하도록 합니다.

Technical Guide

대비 비율은 WCAG 2.1 상대 발광도 수식으로 계산됩니다. 먼저 각 색상 채널을 선형화합니다: sRGB ≤ 0.03928인 경우 linear = sRGB/12.92, 그렇지 않은 경우 linear = ((sRGB + 0.055)/1.055)^2.4입니다. 상대 발광도 L = 0.2126×R + 0.7152×G + 0.0722×B입니다. 대비 비율 = (L_lighter + 0.05) / (L_darker + 0.05)입니다. 이 비율은 1:1(대조가 없음, 동일한 색상)에서 21:1(흰색 배경에 검은색 문자)까지의 범위를 가집니다. WCAG 2.1에서는 네 가지 임계값을 정의합니다. 레벨 AA는 일반 텍스트(<18pt 또는 <14pt 볼드)에 대한 ≥4.5:1과 큰 텍스트(≥18pt 또는 ≥14pt 볼드)에 대한 ≥3:1을 요구합니다. 레벨 AAA는 일반 텍스트에 대한 ≥7:1과 큰 텍스트에 대한 ≥4.5:1을 요구합니다. 이러한 임계값은 시력에 대한 연구를 기반으로 하며 20/40의 시력을 가진 사용자 또는 중등도 저시력을 가진 사용자가 읽을 수 있도록 합니다.

Tips & Best Practices

• 1
  최소한 4.5:1의 대비율을 목표로 하는 것이 좋습니다. 이는 WCAG AA를 위한 최소값입니다.
• 2
  대형 텍스트(18px 이상 또는 14px 이상의 볼드체)의 경우 3:1의 낮은 요구 사항이 있습니다.
• 3
  AAA 준수(7:1)는 더 심각한 시각 장애가 있는 사용자의 가독성을 보장합니다
• 4
  교체 버튼을 사용하여 색상이 양방향에서 잘 작동하는지 테스트하세요
• 5
  다크 모드 디자인의 경우에도 동일한 대비율이 필요하므로 두 가지 모드를 모두 테스트하세요

Related Tools

HEX를 RGB로 변환기

라이브 미리보기 스와치와 함께 즉시 HEX 색상 코드를 RGB 값으로 변환합니다.

🎨 Color Tools

색상 선택기

HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.

🎨 Color Tools

색상 음영 생성기

任意 색상의 더 어두운 음영을 조정 가능한 단계 수로 생성합니다.

🎨 Color Tools

접근성 색상 팔레트 생성기

WCAG 대조 요구 사항을 충족하는 색상 팔레트를 생성합니다.

🎨 Color Tools

색각 이상 시뮬레이터

다양한 색각 이상 유형을 가진 사람들이 색상을 어떻게 인지하는지 시뮬레이트합니다.

🎨 Color Tools

Frequently Asked Questions

Q WCAG 대비율은 무엇인가?

두 색상 사이의 밝기 차이를 나타내는 수치(1:1에서 21:1)입니다. WCAG에서는 시각 장애가 있는 사람들의 텍스트 가독성을 보장하기 위해 최소한의 비율을 지정합니다.

Q AA와 AAA의 차이점은 무엇인가?

AA는 최소 접근성 표준(정규 텍스트에 대한 4.5:1)입니다. AAA는 향상된 접근성(정규 텍스트에 대한 7:1)입니다. 대부분의 규제에서는 AA를 요구하지만, AAA는 모범 사례입니다.

Q 대형 텍스트란 무엇인가?

WCAG에서는 정상적인 두께의 경우 18pt(24px) 이상 또는 볼드체의 경우 14pt(18.67px) 이상을 대형 텍스트로 정의합니다. 대형 텍스트에는 낮은 대비 요구 사항이 있습니다.

Q 색상만으로 접근성을 결정할 수 있나요?

아니요. 대비율은 하나의 요소입니다. 색상 외에도 정보를 전달하는 다른 방법(아이콘, 패턴, 레이블 등)을 사용하고 色覚 이상 시뮬레이션을 테스트해야 합니다.

About This Tool

대조비 확인기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.