명암비가 필요한 이유

문구를 읽을 때 눈은 글자가 배경에 비해 얼마나 밝거나 어두운지 비교합니다. 그 차이가 바로 대비입니다. 👀

한 디자이너는 색이 괜찮다고 하고 다른 디자이너는 눈을 찡그립니다. 접근성에서는 이를 판단하기 위해 누구나 확인할 수 있는 측정 가능한 하나의 수치인 대비율을 사용합니다.

비율은 1:1에서 21:1까지입니다. 흰색 바탕의 검은색은 최대치인 21:1이고, 같은 색을 서로 겹치면 1:1이라 완전히 보이지 않습니다.

계산은 색상이 인지되는 밝기인 휘도를 기반으로 합니다. 색조가 매우 달라도 밝기가 비슷하면 서로 구분하기 어렵습니다.

시력이 사람마다 다르기 때문에 대비 규칙이 존재합니다. 저시력 사용자, 노안이 있는 사용자, 피곤한 독자에게는 밝은 화면을 보는 젊은 디자이너보다 더 큰 차이가 필요합니다.

햇빛 반사, 저가 모니터, 어두워진 휴대전화 화면은 모두 대비를 떨어뜨립니다. 이러한 환경에서도 유지되는 비율이어야 어디서나 글을 읽을 수 있습니다.

WCAG는 연구를 바탕으로 일반 문구의 기준선으로 4.5:1을 정했습니다. 순수한 흑백을 강제하지 않으면서 중간 정도의 저시력을 대략 고려한 수치입니다.

큰 글자는 읽기 쉽기 때문에 기준이 3:1로 낮아집니다. 굵고 큰 글자는 작은 본문 글자보다 더 작은 밝기 차이도 견딜 수 있습니다.

비율은 항상 두 색상의 조합을 의미합니다. 회색은 그 자체로 읽기 쉽거나 어려운 것이 아니라, 놓인 배경과의 대비에 따라 달라집니다.

같은 원칙은 사용자 인터페이스 구성 요소에도 적용됩니다. 버튼 테두리, 아이콘, 양식 윤곽선도 사용자가 찾을 수 있도록 충분한 대비가 필요합니다.

이 두 색상은 대략 4.6:1의 비율을 이루므로, 편안한 읽기에 필요한 일반 문구 기준을 간신히 넘습니다.

대비율은 가독성을 휘도에 기반한 하나의 명확한 수치로 바꾸어 모든 사람이 글을 읽을 수 있게 한다는 것을 배웠습니다. 다음은 AA 기준을 충족하는 방법입니다. ✅