명도 대비 · WCAG 1.4.3

디자인 심미성을 이유로 남용되는 저대비 회색 캡션과 정보 소외

흰색 배경의 #999999 캡션은 계산상 명도비 2.85:1로 WCAG 2.2 AA 일반 텍스트 기준 4.5:1에 미달합니다. #595959는 7.00:1입니다.

기준: WCAG 1.4.3 (Contrast Minimum)기준: WCAG 1.4.6 (Contrast Enhanced)

1. 문제 정의 및 발생 메커니즘

시각적 위계를 만들기 위해 보조 문구에 연한 회색을 쓰면 대비 기준에 미달할 수 있습니다. 흰색(#FFFFFF) 배경에서 #999999의 대비율은 2.85:1, #AAAAAA는 2.32:1입니다. 주변 조명과 개인의 시각 조건에 따라 읽기 어려움은 달라지므로, 공식 계산값과 실제 사용 환경을 함께 확인해야 합니다.

실험에 사용된 창작 한국어 샘플 텍스트:

“※ 본 할인 혜택은 회원 가입 후 최초 1회에 한하여 적용되며, 타 제휴 카드 및 쿠폰과 중복 할인이 불가합니다. (유효기간: 발급일로부터 30일)”

실험 재현 환경 및 조건

대상 뷰포트: 데스크톱 및 모바일 전 기기
적용 UI 엘리먼트: <span class="caption"> 안내 문구 및 힌트 텍스트
문제를 유발하는 기존 CSS 속성: color: #999999; background-color: #FFFFFF; font-size: 13px

⚠️ 결함 상태 실시간 재현 (Before Sandbox)의도적 결함 격리

아래 상자는 결함 조건이 적용된 실제 렌더링 결과이며, 사이트 본체의 UI와 격리되어 있습니다.

※ 본 할인 혜택은 회원 가입 후 최초 1회에 한하여 적용되며, 타 제휴 카드 및 쿠폰과 중복 할인이 불가합니다. (유효기간: 발급일로부터 30일)

2. 측정 결과와 확인 범위

개선 전 결함 측정치 (Before)

전경색 #999999 / 배경색 #FFFFFF = 명도비 2.85:1 (WCAG AA 일반 텍스트 기준 미달)

수정 후 개선 측정치 (After)

전경색 #595959 / 배경색 #FFFFFF = 명도비 7.00:1 (WCAG AAA 충족, PASS)

측정 환경: sRGB 상대 휘도 선형화 공식 정밀 계산

확인 기록: 공식 sRGB 상대 휘도 계산 결과: #999999는 2.849028:1, #595959는 7.004729:1, #64748B는 4.758843:1입니다. 표시값은 소수 둘째 자리까지 반올림합니다.

3. 웹 접근성 기반 엔지니어링 해결책

흰색 배경에서 #999999는 2.85:1로 일반 텍스트의 AA 기준 4.5:1에 미달합니다. #64748B는 4.76:1로 AA를 통과하고, 이 사례의 개선 CSS가 선택한 #595959는 7.00:1로 AAA 기준에도 도달합니다. 색상만 바꾸면 끝나는 것이 아니라 실제 배경색과 사용 상태에서 대비율을 다시 계산해야 합니다.

✓ 개선된 컴포넌트 렌더링 결과 (After Preview)

※ 본 할인 혜택은 회원 가입 후 최초 1회에 한하여 적용되며, 타 제휴 카드 및 쿠폰과 중복 할인이 불가합니다. (유효기간: 발급일로부터 30일)

적용 가능한 CSS 예시

/* WCAG AA/AAA 충족 안전 캡션 CSS */
.caption-accessible {
  color: #595959; /* 배경 #FFFFFF 기준 7.0:1 명도 대비 */
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

⚖️ 기술적 트레이드오프 및 한계점 고지

캡션 색상이 어두워지면 본문과 캡션 사이의 색상 대비가 줄어들 수 있습니다. 이 경우 색상만으로 위계를 표현하려 하지 말고, 글자 크기(16px vs 13px), 굵기(Medium vs Regular), 여백(margin-top: 6px) 등 형태적 차이를 복합적으로 활용해야 합니다.

본 사례 관련 실무 FAQ

Q. #767676 색상은 AA를 통과하나요?

A. 흰색 배경 기준 #767676의 명도비는 약 4.54:1로 AA 일반 텍스트 기준(4.5:1)을 간신히 충족합니다. 다만 디스플레이 색영역이나 시야각에 따라 미달할 수 있으므로 안전하게 #707070 또는 #6B7280 이상을 권장합니다.

Q. 비활성화(Disabled) 버튼의 텍스트도 4.5:1을 지켜야 하나요?

A. WCAG 1.4.3 규정에 따르면 비활성화된 컴포넌트는 대비 기준에서 공식적으로 예외(Exception)로 인정됩니다. 그러나 사용자 인지를 위해 비활성화 상태라도 3:1 이상의 식별 가능한 시각 단서를 제공하는 것이 UX 모범 사례입니다.