피드로 돌아가기
Dev.toFrontend
원문 읽기
rgba() Alpha Composite 적용을 통한 WCAG 대비값 오차 4배 해결
Your contrast checker probably lies about rgba() text
AI 요약
Context
기존 WCAG 대비 검사 도구들이 색상의 Alpha 채널을 무시하고 완전 불투명 상태로 가정하여 휘도를 계산하는 구조적 결함 존재. 이로 인해 반투명 텍스트가 실제 화면에서 배경색과 혼합되어 나타나는 시각적 결과와 계산된 대비 수치 간의 심각한 괴리 발생.
Technical Solution
- Alpha 채널을 배제한 단순 luminance 계산 방식에서 벗어나 실제 렌더링 단계의 Source-over 합성 로직 도입
out = fg * alpha + bg * (1 - alpha)공식을 통한 각 채널별 색상 평탄화(Flattening) 프로세스 선행- 배경색 위에 전경색을 합성한 최종 RGB 값을 산출한 뒤 이를 WCAG Relative Luminance 공식에 대입하는 파이프라인 설계
- 배경 이미지나 그라데이션 등 가변적 배경 환경에서의 오차 가능성을 인지하여 텍스트에는 고정 Solid Color 사용 권장
- 다중 반투명 레이어 적층 시 최하단 배경부터 상단 레이어 순으로 순차적 Composite를 수행하는 계층적 계산 구조 적용
실천 포인트
반투명 텍스트 사용 시 단순 rgba() 값으로 검사하지 말고 배경색과 합성된 최종 색상을 기준으로 Contrast Ratio를 검증하며, 가급적 텍스트에는 opacity 대신 Solid RGB/Hex 값을 사용하여 측정 가능성을 확보할 것