색상 대비 검사

두 색의 상대휘도를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05) 로 냅니다. 여기서 중요한 건 상대휘도가 RGB 값의 평균이 아니라는 점입니다. sRGB 값의 감마를 되돌린 뒤 사람 눈의 색상별 민감도로 가중하는데, 초록의 계수가 0.7152 로 압도적입니다. 그래서 R·G·B 가 모두 255 인 순색이라도 초록이 빨강보다, 빨강이 파랑보다 훨씬 밝게 계산됩니다.

AA 는 일반적으로 지켜야 하는 수준이고 AAA 는 더 엄격한 권장 수준입니다. 본문 글씨는 AA 가 4.5, AAA 가 7 입니다. 큰 글씨(24px 이상, 굵은 글씨는 19px 이상)는 획이 두꺼워 덜 필요하므로 AA 3, AAA 4.5 로 낮습니다. 아이콘이나 입력창 테두리처럼 글자가 아닌 요소는 3 이면 됩니다.

반투명 색의 실제 대비는 그 뒤에 무엇이 깔려 있느냐에 달려 있어서 두 색만으로는 계산할 수 없습니다. 같은 rgba 값이라도 흰 배경 위와 검은 배경 위에서 결과가 완전히 다릅니다. 틀린 값을 조용히 보여 주느니 아예 받지 않는 편이 낫다고 봐서, 알파를 합성한 최종 색을 넣도록 했습니다.

배경이 어두우면 글자색을 흰쪽으로, 밝으면 검은쪽으로 1%씩 섞어 가면서 기준(4.5)을 처음 넘기는 색을 찾습니다. 색상은 그대로 두고 밝기만 옮기므로 브랜드 색의 인상을 크게 해치지 않습니다. 다만 기계적으로 찾은 값이니 최종 판단은 눈으로 확인하세요.

아닙니다. 대비는 여러 기준 중 하나일 뿐입니다. 색만으로 정보를 구분하지 않기, 글자 크기와 자간, 포커스 표시, 화면 낭독기용 대체 텍스트 같은 것들이 함께 필요합니다. 대비비는 그중 기계로 잴 수 있는 부분이라 먼저 확인하기 좋은 지표입니다.