색상 대비
#777과 #767: 대비율 반올림이 결과를 바꾸는 순간
표시되는 색상 대비율의 반올림 표기로 인해 WCAG 2.2 AA 기준 미달 요소가 통과로 오판정되는 경계값 계산 원리와 재검사 절차를 설명합니다.
실무 검증 기록
수치·계산식 경계값 검증
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 및 공식 규격 대조 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 색상 명암비 부동소수점 경계값 분석 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 4.5:1로 반올림되어 실패가 통과처럼 표시 ➔ [수정 목표] 원값 비교와 안전 마진을 적용한 색상 조정 |
검증에 사용된 실제 픽스처 / 재현 조건
#777777와 #FFFFFF, 원값 4.478:1- 브라우저 폰트 앤티에일리어싱(Anti-aliasing) 서브픽셀 렌더링에 따른 육안 인지 오차 미포함
- 복합 그라디언트 및 사진 배경의 국소 명암비는 별도 픽셀 샘플링 필요
웹 접근성 자동 검사 도구가 색상 대비율(Color Contrast Ratio)을 소수점 첫째 자리로 반올림하여 표시할 때, 4.47:1과 같은 기준 미달 수치가 4.5:1 통과로 오표기되는 경계값 문제가 발생합니다. WCAG 2.2 성공 기준 1.4.3 (Contrast Minimum, Level AA)은 4.50:1 이상의 명확한 명암비를 요구합니다. 이 글에서는 상대 휘도(Relative Luminance) 정밀 계산식과 #777, #767 색상 코드 경계값을 분석하고 오판정을 방지하는 실무 재검사 루틴을 다룹니다.
상대 휘도 계산식과 반올림 표기의 오판정 원리
W3C WCAG 2.2 명암비 계산 기준은 텍스트와 배경의 상대 휘도(Relative Luminance, L)를 기반으로 작동합니다. 상대 휘도는 sRGB 채널값을 선형화(Linearization)한 후 L = 0.2126R + 0.7152G + 0.0722B 공식을 적용하여 산출하며, 최종 대비율은 (L1 + 0.05) / (L2 + 0.05) 수식으로 계산됩니다.
일반적인 브라우저 접근성 검사 도구는 UI 편의를 위해 소수점 둘째 자리에서 반올림합니다. 예를 들어 실제 계산된 대비율이 4.47:1 또는 4.48:1인 경우, 도구 화면에는 4.5:1로 표기됩니다. 그러나 WCAG 2.2 AA 기준은 4.50:1 미만을 엄격히 실패(Fail)로 처리하므로 반올림 표기만 보고 검사를 통과시키면 심사나 정밀 감사에서 오류로 지적됩니다.
#777과 #767 색상 코드의 명암비 경계값 분석
흰색 배경에서 헥사코드 #777777(약칭 #777)과 #767676(약칭 #767)의 정밀 대비율을 비교하면 소수점 단위의 중요한 차이가 드러납니다.
흰색 배경에서 #777777의 정밀 대비율은 약 4.47:1로 WCAG 2.2 AA 기준 4.50:1에 미달합니다. 반면 텍스트 색상을 #767676으로 한 단계 어둡게 조정하면 대비율은 약 4.54:1로 상승하여 4.50:1을 확실하게 충족합니다. 16진수 색상 코드의 한 단계 차이가 접근성 합격 여부를 결정하므로 경계값 구간에 대한 정밀 측정이 필요합니다.
실무자를 위한 경계값 정밀 검증 루틴
색상 대비 경계값 오판정을 예방하기 위해 다음 3단계 정밀 검증 순서를 적용합니다.
- 의심 구간 선별: 검사 도구에서 대비율이 4.4:1 ~ 4.6:1 사이로 표기되는 모든 색상 조합을 선별합니다.
- 정밀 소수점 확인: W3C 공식 Contrast Checker 또는 Colour Contrast Analyser(CCA)를 사용하여 소수점 둘째 자리(예: 4.50:1)까지 수치를 확인합니다.
- 안전 마진 확보: 디자인 가이드라인 설정 시 목표 대비율을 4.6:1 이상으로 지정하여 모니터 캘리브레이션 및 렌더링 오차에 대비합니다.
수치 경계값 판정 기준표
| 수치 조건 | 연산 부하 | 판정 위험 | 권장 조치 |
|---|---|---|---|
| 반올림 표기 4.5:1 수치를 그대로 인정하고 조치 없음 | 낮음 (0분) | 높음 (정밀 심사 시 WCAG 2.2 SC 1.4.3 불합격 판정) | 비권장 |
| 소수점 둘째 자리 정밀 재검사 후 4.50:1 미달 시 색상 조정 | 중간 (5분) | 낮음 (정확한 표준 준수 및 오판정 위험 제거) | 적극 권장 |
| 디자인 시스템 기본 최소 대비율을 4.6:1 이상으로 규정 | 중간 (디자인 시스템 반영) | 매우 낮음 (렌더링 환경 변화에 대한 충분한 안전지대 확보) | 최적의 표준 전략 |
재검사 절차 및 안전 마진 확보 가이드
- 현재 사용 중인 색상 대비 검사 도구의 소수점 반올림 표기 여부를 확인합니다.
- 4.4:1~4.6:1 표기 구간에 해당하는 텍스트 요소의 헥사 코드를 수집합니다.
- W3C 상대 휘도 정밀 계산식 기준으로 4.50:1 미만인 요소를 #767676 이하의 더 어두운 색상으로 변경합니다.
소수점 연산 및 브라우저 렌더링 한계
- 폰트 굵기(Weight) 700 이상이더라도 14pt(18.66px) 미만인 경우 대형 텍스트 기준(3:1)이 아닌 일반 텍스트 기준(4.5:1)을 적용해야 합니다.
- 사용자 디스플레이의 감마(Gamma) 특성과 색공간(sRGB vs DCI-P3) 차이에 따른 하드웨어 렌더링 변수는 수학적 계산만으로 통제할 수 없습니다.