명암비 계산기

텍스트 색상과 배경색 사이의 WCAG 명암비를 확인하고, 통과하는 접근성 수준을 확인한 후 기준을 충족하는 추천 색상을 확인합니다.

명암비 결과

명암비

두 가지 색상을 입력하세요.

큰 텍스트 샘플

대부분의 명암비 부적합 문제가 영향을 미치는 일반 본문 텍스트 샘플입니다.

AA, 일반 텍스트 (4.5:1): -
AA, 큰 텍스트 (3:1): -
AAA, 일반 텍스트 (7:1): -
AAA, 큰 텍스트 (4.5:1): -

AA 기준을 통과하는 추천 텍스트 색상

아래 색상은 현재 배경색에 대해 최소 4.5:1 이상의 명암비를 가집니다. 하나를 선택하여 텍스트 색상으로 사용해 보세요.

이용 방법

명암비는 전경색과 배경색 간의 휘도 차이로, WCAG 지침에 따라 (L1 + 0.05)를 (L2 + 0.05)로 나눈 값으로 계산됩니다. 여기서 L1은 더 밝은 색상의 상대 휘도이고 L2는 더 어두운 색상의 상대 휘도입니다. WCAG AA 기준은 일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1을 요구합니다.

두 가지 색상 입력 또는 선택
16진수 값을 입력하거나 색상 선택기를 사용하세요.
비율 및 수준 확인
각 WCAG 수준은 해당 비율에 대한 합격 또는 불합격 여부를 표시합니다.
추천 색상 시도
아래 색상 견본을 선택하면 현재 배경색으로 즉시 AA 기준을 충족할 수 있습니다.

WCAG 명암비 공식

비율 = (L1 + 0.05) ÷ (L2 + 0.05)

상대 휘도 L은 선형화된 sRGB에서 도출됩니다. 각 채널은 감마 보정된 0-255 값에서 sRGB 전달 함수를 사용하여 선형 광도로 변환된 다음, 인간의 발광 효율에 맞추기 위해 0.2126R + 0.7152G + 0.0722B로 가중치가 적용됩니다. 가능한 최대 비율은 순백색 위의 순흑색인 21:1입니다.

4.5:1 규칙 적용 대상

WCAG의 4.5:1 비율은 텍스트 및 텍스트 이미지에 구체적으로 적용됩니다. 장식용 이미지, 로고타입 및 텍스트 대체가 없는 순수 시각적 아이콘은 면제됩니다. 버튼, 양식 입력 테두리 및 포커스 표시기와 같은 비텍스트 UI 구성 요소는 WCAG 1.4.11에 따라 3:1만 필요로 합니다. 이는 단순한 도형보다 세밀한 문자 획이 가독성을 유지하기 위해 더 많은 대비가 필요하므로 더 낮은 기준이 적용된 것입니다.

다크 테마는 가독성이 있어 보일 수 있지만 기준을 충족하지 못할 수 있습니다

WCAG 알고리즘은 sRGB 선형화 휘도를 사용하며, 이는 인지되는 밝기와 선형 관계에 있지 않습니다. 다크 테마는 종종 거의 검은색 배경에 중간 회색 텍스트를 조합하는데, 이 경우 가독성이 있어 보이더라도 비율이 4.5:1 미만으로 떨어지는 경우가 많습니다. 예를 들어 #1A1A24 배경의 #999999는 약 3.6:1로 AA 기준을 충족하지 못하지만, 텍스트를 약 #ABABAB 또는 그보다 더 밝게 하면 임계값을 달성할 수 있습니다.

자주 묻는 질문

본문 텍스트에 대해 WCAG AA가 요구하는 명암비는 얼마인가요?

WCAG 2.1 레벨 AA는 18px 미만의 일반 굵기 텍스트 또는 14px 미만의 볼드 텍스트에 대해 최소 4.5:1의 명암비를 요구하며, 큰 텍스트(18px 이상의 일반 텍스트 또는 14px 이상의 볼드 텍스트)에는 3:1을 요구합니다. 레벨 AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 가능한 최대 비율은 순백(#FFFFFF) 배경의 순흑(#000000)인 21:1입니다.

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

공식은 (L1 + 0.05)를 (L2 + 0.05)로 나눈 값이며, 여기서 L1은 더 밝은 색의 상대 휘도이고 L2는 더 어두운 색의 상대 휘도입니다. 상대 휘도는 선형화된 sRGB 값에서 도출됩니다. 각 채널은 감마 보정된 0-255 값에서 sRGB 전송 함수를 사용하여 선형 광도로 변환된 후, 인간의 발광 효율에 맞추어 0.2126R + 0.7152G + 0.0722B로 가중치가 적용됩니다.

모든 UI 요소에 4.5:1 명암비가 필수인가요?

아닙니다. WCAG의 4.5:1 비율은 텍스트 및 텍스트 이미지에만 구체적으로 적용됩니다. 장식용 이미지, 로고타입, 그리고 텍스트 대체가 없는 순수 시각적 아이콘은 예외입니다. 비텍스트 UI 구성 요소(버튼, 폼 입력, 포커스 표시기)는 WCAG 1.4.11에 따라 3:1 명암비만 필요합니다. 더 엄격한 4.5:1 임계값이 존재하는 이유는 텍스트 가독성이 미세한 문자 획에 의존하기 때문입니다.

읽기 쉽게 보이는데도 다크 모드 디자인이 WCAG를 통과하지 못하는 이유는 무엇인가요?

WCAG 알고리즘은 sRGB 선형화 휘도를 사용하며, 이는 인지되는 밝기와 선형 관계가 아닙니다. 다크 테마는 종종 거의 검은색 배경에 중간 회색 텍스트를 조합하는데, 이때 인지되는 명암비는 충분해 보이지만 휘도 비율은 4.5:1 미만으로 떨어집니다. 예를 들어 #1A1A24 배경 위의 #999999는 약 3.6:1을 생성하여 AA 기준을 충족하지 못합니다. 동일한 배경에서 텍스트를 약 #ABABAB 이상으로 밝게 조정하면 임계값에 도달합니다.

색상 명암비 요구 사항이 폼 입력의 플레이스홀더 텍스트에도 적용되나요?

네. WCAG 1.4.3에 따르면 의미 있는 콘텐츠를 전달하는 플레이스홀더 텍스트는 4.5:1 비율을 충족해야 합니다. 많은 디자인에서 40% 회색과 같이 불투명도가 낮은 플레이스홀더 텍스트를 사용하는데, 이는 해당 기준을 충족하지 못합니다. 성공 기준 1.4.3은 플레이스홀더 텍스트를 무조건적으로 면제하지 않으며, 예외는 비활성 UI 구성 요소나 순수한 장식에만 적용되고 안내용 힌트 텍스트에는 적용되지 않습니다.