실험 2 · WCAG 2.2 표준 도구

WCAG 2.2 명도 대비 정밀 계산 및 색상 교정

텍스트와 배경 색상의 16진수(Hex) 코드를 기반으로 W3C 공식 상대 휘도(Relative Luminance)를 산출하고, 일반 텍스트 4.5:1 및 대형 텍스트 3.0:1 기준 부합 여부를 반올림 오차 없이 판정합니다.

WCAG 2.2 명도 대비 정밀 검사 및 수정 색상 도출기

sRGB 선형화 상대 휘도 공식에 기반하여 반올림 전 원값으로 판정하고, 미달 시 합격 대체 색상을 자동 계산합니다.

정밀 명도 대비율 (Contrast Ratio)
2.85:1

수식: (Lmax + 0.05) / (Lmin + 0.05) | 반올림 전: 2.84903

일반 텍스트 (WCAG AA ≥ 4.5:1)미달 (FAIL)
대형 텍스트 (WCAG AA ≥ 3.0:1)미달 (FAIL)
UI 컴포넌트/그래픽 (WCAG AA ≥ 3.0:1)미달 (FAIL)
가독성 테스트 샘플 문장입니다. (18pt 대형 텍스트)
본문 크기(16px / 1rem) 미리보기: 가독성 테스트 샘플 문장입니다. 명도비가 낮으면 조명이 강한 야외 환경이나 저시력 사용자가 글자를 판독하기 어렵습니다.
💡 WCAG AA 합격 권장 대체 색상 제안:#767676(대비율: 4.54:1)
/* 현재 색상: WCAG AA 일반 텍스트 4.5:1 미달 — 개선 필요 */
.element-contrast-checked {
  color: #999999;
  background-color: #FFFFFF;
  /* 계산된 대비율: 2.85:1 */
}

명도 대비 수학 공식 및 W3C 접근성 표준 해설

웹 접근성 지침에서 시각적 명도 대비(Color Contrast)는 저시력자, 고령자, 그리고 강한 조명 아래에서 모바일 기기를 사용하는 일반 사용자 모두에게 텍스트의 판독 가능성을 평가하는 기준 지표입니다. 국제 표준 W3C WCAG 2.2 명세에 정의된 광학적 수학 공식을 통해 검증합니다.

💡 명도 대비 기준과 체감 가독성의 구분: WCAG 2.2 명도 대비 공식(4.5:1 이상)을 수학적으로 충족한다고 해서 모든 사용자에게 완벽한 시각적 편안함이 보장되는 것은 아닙니다. 명도비는 두 색상 간의 상대 휘도(Luminance) 차이를 나타내는 최소한의 식별성 지표이며, 글꼴의 굵기(Weight), 글자 크기, 주변 조명, 디스플레이 색영역, 그리고 난독증이나 눈부심 민감도와 같은 사용자별 특성에 따라 실제 읽기 편안함은 크게 달라질 수 있습니다.

1. sRGB 감마 역보정(Linearization) 공식

컴퓨터 모니터와 스마트폰 디스플레이는 사람 눈의 비선형적 밝기 인지 특성을 보정하기 위해 감마 2.2 압축이 적용된 sRGB 색공간을 사용합니다. 따라서 8비트 RGB 값(0~255)을 단순 선형 비례로 계산할 수 없으며, 다음의 공식에 따라 선형화(Linearization) 처리를 거쳐야 합니다:

c = C_sRGB / 255;
if (c <= 0.04045) { C_linear = c / 12.92; }
else { C_linear = Math.pow((c + 0.055) / 1.055, 2.4); }

2. 상대 휘도(Relative Luminance, L) 산출

선형화된 세 채널(R, G, B)의 값에 인간 망막의 세 가지 원추세포(Cone Cells)가 각 파장별 빛에 반응하는 가중치 비율을 곱하여 상대 휘도를 계산합니다:

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear;

이 수식에서 알 수 있듯이, 인간의 눈은 녹색(Green, 0.7152)의 밝기 변화에 가장 민감하고 청색(Blue, 0.0722)에는 상대적으로 둔감합니다. 완전한 검정색(#000000)의 휘도는 0.0이며, 완전한 흰색(#FFFFFF)의 휘도는 1.0이 됩니다.

3. 명도비(Contrast Ratio) 계산 및 경계값 판정 규칙

두 색상의 휘도 중 더 밝은 값을 L_max, 더 어두운 값을 L_min이라 할 때, 최종 명도비는 주변 산란광 오프셋인 0.05를 분모·분자에 더해 계산합니다:

Ratio = (L_max + 0.05) / (L_min + 0.05);

이로 인해 나올 수 있는 최고 대비율은 검정과 흰색의 21:1이며, 최저 대비율은 동일 색상 간의 1:1입니다. WCAG 2.2 성공 기준 1.4.3(Contrast Minimum)에 따른 일반 텍스트의 AA 요구치는 4.5:1 이상이며, AAA 강화 기준은 7.0:1 이상입니다.

🔗 본 실험과 연계된 실무 사례 연구:

명도 대비 판정 자주 묻는 질문 (FAQ)

Q. 명도비 계산에서 4.499:1은 왜 불합격(FAIL) 처리되나요?

A. 화면 표시를 위해 반올림한 4.50:1만으로는 합격을 결정할 수 없습니다. 계산된 원래 대비율이 4.5 이상인지 판정합니다. 예를 들어 원값 4.499:1은 기준에 미달합니다.

Q. 대형 텍스트(Large Scale Text)의 정확한 정의와 기준은 무엇인가요?

A. WCAG 기준에서 대형 텍스트는 일반 굵기 기준 18pt(약 24 CSSpx) 이상, 또는 굵은 글씨(Bold) 기준 14pt(약 18.66 CSSpx) 이상인 텍스트를 의미합니다. 대형 텍스트는 시각적 크기가 크기 때문에 완화된 기준인 3.0:1 이상의 명도비를 충족하면 AA를 통과합니다.

Q. 알파 투명도(RGBA) 채널이 적용된 색상은 왜 직접 계산을 지원하지 않나요?

A. 알파 투명도는 하위에 놓인 부모 요소의 배경색뿐 아니라 브라우저 렌더링 합성 모드(Compositing mode)와 서브픽셀 앤티앨리어싱에 따라 픽셀 레벨에서 최종 색상이 달라집니다. 본 도구는 공식의 무결성과 재현성을 위해 sRGB 6자리 헥스 코드 간의 확정적 수식 계산만 지원하며, 불확실한 근사치를 제공하지 않습니다.