본문을 연한 회색으로 두면 화면이 조용해지고 정돈되어 보입니다. 그런데 같은 화면을 창가에서, 오래된 노트북에서, 혹은 40대 이후의 눈으로 보면 글자가 배경에 잠깁니다. 접근성 기준의 대비 항목은 규정이라기보다 “이 글자가 실제로 읽히는가” 를 숫자로 바꿔 놓은 것입니다.
좋은 소식은 이것이 취향이 개입하지 않는 몇 안 되는 디자인 판정이라는 점입니다. 두 색을 대비 계산기에 넣으면 누구나 같은 답을 얻습니다.
외울 숫자는 세 개입니다
세 번째 줄을 놓치기 쉽습니다. 글자만 대비를 지켜야 한다고 생각하면 입력란 테두리를 아주 연한 회색으로 두게 되는데, 그러면 어디가 입력란인지 자체가 보이지 않습니다. 체크박스 · 라디오 · 토글 · 아이콘 버튼도 같은 3:1 규칙 아래에 있습니다.
회색 본문이 탈락하는 지점
흰 배경 위의 회색은 밝아질수록 위험합니다. 중간 회색 부근에서 4.5:1 경계선을 지나가고, 그보다 밝은 회색을 본문에 쓰면 기준 아래로 내려갑니다. 문제는 그 아래쪽 회색들이 시안에서 가장 세련되어 보인다는 것입니다.
사진 위의 흰 글씨는 특히 조심합니다. 대비는 글자 바로 뒤의 실제 픽셀과 계산되므로, 사진의 밝은 영역에 걸린 글자는 시안의 한 지점에서만 통과합니다. 어두운 반투명 막(스크림)을 깔거나, 글자를 사진 밖으로 빼는 편이 확실합니다.
최소치가 아니라 여유를 목표로 합니다
4.5:1 은 목표가 아니라 바닥입니다. 계산값은 이상적인 조건에서 나온 값이고, 실제로는 햇빛 · 저가 패널 · 얇은 폰트 웨이트가 체감 대비를 깎습니다. 특히 폰트 웨이트는 계산에 전혀 반영되지 않는데, 같은 색이라도 얇은 글씨는 눈에 띄게 흐려 보입니다.
그래서 실무에서는 경계선을 아슬아슬하게 통과한 색보다 여유가 있는 색을 고릅니다. 팔레트를 만들 때 본문용 회색을 한 단계만 더 어둡게 잡아 두면, 나중에 배경 톤이 바뀌어도 다시 검사할 일이 줄어듭니다.
시안 단계에서 끝냅니다
대비는 구현이 끝난 뒤에 고치면 비쌉니다. 색 하나를 어둡게 바꾸는 순간 그 색을 쓰는 모든 화면이 함께 바뀌고, 그때는 이미 승인이 난 시안이기 때문입니다. 색 팔레트를 정하는 자리에서 본문색 · 보조색 · 경계선색 세 가지의 대비를 먼저 통과시켜 두면 이후의 화면은 자동으로 안전해집니다.
토큰으로 색을 관리하는 방법은 테마 · 플러그인 아카이브에서 더 다루고, 운영 중인 사이트의 대비 · 성능 · 보안을 한 번에 점검받고 싶다면 최적화 지원 사업에 진단이 포함돼 있습니다.
다음 회차
색이 정리됐으면 이미지 차례입니다. 다음 회차는 대체 텍스트인데, 규칙이 하나가 아닙니다 — 장식 이미지와 정보 이미지는 정반대로 씁니다.