접근성 검사에서 색상 대비 부족 경고가 떴거나 QA에서 읽기 어렵다는 피드백을 받았을 때, 빠르게 수정하는 방법을 알아봅니다.
문제 파악
대비 부족은 보통 밝은 배경에 밝은 텍스트, 또는 어두운 배경에 어두운 텍스트일 때 발생합니다. WCAG 4.5:1 기준을 충족하는지 확인하세요.
텍스트 색상 조정
색상 변환기에서 HSL로 변환 후 L(밝기) 값을 조절합니다. 밝은 배경이면 텍스트의 L을 낮추고, 어두운 배경이면 높입니다. 색상(H)과 채도(S)는 유지합니다.
배경 조정이 나을 때
브랜드 색상 텍스트를 바꾸기 어려우면 배경 명도를 조절하세요. 살짝 어둡거나 밝게 만들면 대비가 확보됩니다.
검증
수정 후 WebAIM Contrast Checker로 다시 확인하세요. Pass가 뜨면 완료입니다.
단계별 수정 프로세스
1단계: 문제가 된 색상의 현재 HEX 값을 확인합니다. 2단계: 색상 변환기에서 HSL로 변환합니다. 3단계: L(밝기) 값을 조정합니다. 밝은 배경이면 L을 낮추고, 어두운 배경이면 높입니다. 4단계: 대비 검사 도구로 4.5:1 이상인지 확인합니다. 5단계: 변경된 색상을 적용하고 디자인팀에 알립니다.
브랜드 색상 유지하면서 접근성 확보
브랜드 가이드의 색상을 그대로 써야 하는 경우, 텍스트 크기를 키우거나 굵게 만드는 것도 방법입니다. 큰 텍스트(18pt 이상)는 3:1 대비만 충족하면 됩니다. 또는 배경색을 조정해서 대비를 확보할 수 있습니다.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.