웹 접근성 명암비 4.5대 1, 기준을 다시 읽고 우리 화면을 재봤습니다

/post/51에서 "강조색과 연한 배경 조합이 4.03대 1이라 기준 미달이니 고치겠다"고 적어놓고 아직 안 고쳤습니다.

미루는 동안 한 가지가 계속 걸렸어요. 4.5라는 숫자를 어디서 가져왔는지 제가 정확히 설명을 못 하겠더라고요. 그래서 원문부터 다시 읽었습니다.

4.5대 1은 어디서 온 숫자인가

W3C의 WCAG 2.2 성공 기준 1.4.3 Contrast (Minimum), 레벨 AA입니다. 원문은 이렇게 되어 있습니다.

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1"

그런데 예외가 세 개 붙어 있습니다. 이걸 모르면 과하게 고치게 됩니다.

여기서 "큰 글씨"의 정의가 중요합니다. 원문은 18포인트 이상, 또는 14포인트 굵은 글씨, 또는 한중일 폰트에서 그에 준하는 크기라고 적고 있습니다.

한국어 화면을 만들면서 이 괄호를 놓치기 쉽습니다. 영문 기준 포인트를 그대로 대입하면 안 된다는 뜻이거든요.

제가 놓치고 있던 게 1.4.11 Non-text Contrast였습니다. 역시 레벨 AA고요.

버튼 테두리, 입력창 경계선, 아이콘 같은 것들이 인접 색상 대비 3대 1을 넘어야 한다는 조건입니다. 글자만 검사하고 통과했다고 생각하면 여기서 걸립니다.

예외는 있습니다. 브라우저가 기본으로 그리는 걸 우리가 안 건드린 경우, 그리고 특정 그래픽 표현이 정보 전달에 반드시 필요한 경우입니다.

7대 1짜리 기준도 있는데(1.4.6 Contrast Enhanced) 이건 레벨 AAA입니다. 큰 글씨는 4.5대 1로 완화됩니다. 우리는 여기까지는 안 갑니다.

기준을 다시 읽고 나니 고쳐야 할 대상이 처음 생각보다 늘었습니다.

여기서 배운 게 하나 있습니다. 대비를 올리려고 글씨를 키우는 건 편법처럼 보이지만 기준상으로는 정당한 선택입니다. 3대 1로 완화되니까요. 다만 한국어 화면에서 18포인트에 준하는 크기가 몇 픽셀인지는 별도로 계산해야 합니다.

솔직히 이 부분은 아직 계산을 못 끝냈습니다. CJK 환산 기준을 명시한 문서를 아직 못 찾았어요. 찾으면 이 글에 덧붙이겠습니다.

접근성은 검색과 별개 주제로 보이지만 실제로는 붙어 있습니다.

읽기 어려운 화면은 체류 시간이 짧습니다. 짧은 체류는 다시 콘텐츠 평가로 돌아옵니다. /post/45에서 측정 얘기를 하면서도 화면 자체를 변수로 넣지 않았는데, 그게 빠진 부분이었다고 생각합니다.

그리고 이건 고치는 비용이 제일 싼 축에 듭니다. 색상값 몇 개 바꾸는 일이니까요.

다 하고 나서 숫자로 다시 올리겠습니다. 이번엔 미루지 않으려고 목록을 여기 적어둡니다.

출처