색 대비와 접근성 있는 팔레트

대비는 측정하기 가장 쉬우면서 동시에 가장 틀리기 쉬운 접근성 요건입니다. 측정되는 대상이 눈이 보고하는 것과 다르기 때문입니다. 두 색이 확연히 달라 보여도 실패할 수 있고, 비슷해 보이는 두 색이 통과할 수도 있습니다. 그 비율이 무엇으로부터 계산되는지 이해하면 실패가 신비로운 일이 아니라 예측 가능한 일이 됩니다.

그 비율이 실제로 재는 것

대비율은 두 색의 상대 휘도 — 거칠게 말해 각각이 내보내는 빛의 양 — 를 비교하며, 같은 색일 때 1:1에서 흰 바탕의 검은 글자일 때 21:1까지의 척도를 가집니다. 휘도는 채널의 평균이 아닙니다. 초록이 빨강보다 훨씬 크게 기여하고 빨강이 파랑보다 훨씬 크게 기여하는데, 사람의 시각이 스펙트럼 가운데에서 가장 민감하기 때문입니다. 흰 바탕의 밝은 노랑 글자는 크게 실패하는데 같은 노랑이 검은 바탕에서는 쉽게 통과하는 이유가 이 가중치입니다.

그 결과 색상(hue)은 거의 영향이 없고 밝기가 지배합니다. 밝기가 같은, 선명하고 확연히 다른 두 색상은 이 척도에서 대비가 거의 없으며, 디자이너가 실패 점수에 가장 놀라는 경우가 정확히 이 상황입니다. 어떤 조합이 실패한다면 밝기를 바꾸면 해결되고, 색상을 바꾸는 것으로는 대개 해결되지 않습니다.

기준값, 그리고 어떤 것이 적용되는지

WCAG는 일반 본문에 4.5:1을, 큰 글자에 3:1을 요구하며, 여기서 '큼'은 약 24px, 굵은 글꼴이면 19px를 뜻합니다. 이것이 AA 등급이고, AAA는 각각 7:1과 4.5:1로 올립니다. 큰 글자에 완화가 있는 이유는 두꺼운 획이 더 많은 픽셀을 덮어 낮은 대비에서도 읽히기 때문입니다 — 글자 굵기에 대한 양보이지 빠져나갈 구멍이 아닙니다.

비텍스트 요소에는 자주 놓치는 별도 규칙이 있습니다. 인터페이스 구성 요소와 의미를 지닌 그래픽은 인접한 것에 대해 3:1이 필요합니다. 입력창의 테두리, 포커스 링, 차트의 막대, 그 자체로 의미를 전달하는 아이콘이 여기 해당합니다. 흔한 위반자는 플레이스홀더 텍스트와 비활성화된 컨트롤로, '일부러 흐리게 보이는 것'이라는 이유로 어떤 기준값에도 한참 못 미치는 경우가 많습니다.

비율을 통과하는 것과 읽히는 것은 다릅니다

비율은 서체에 대해 아무것도 모릅니다. 4.5:1의 같은 색 조합이라도 16px 보통 굵기에서는 편안하고 12px 가는 굵기에서는 고역입니다. 가는 획은 픽셀을 덜 덮고 안티에일리어싱에 더 많이 잃기 때문입니다. 기준 충족은 목표가 아니라 하한선이며, 본문은 대개 여유를 두고 넘기는 편이 좋습니다.

비율은 글자 뒤에 무엇이 있는지도 모릅니다. 사진·그라데이션·영상 위의 글자는 영역마다 대비가 다르고, 표본 한 픽셀에 대해 계산한 숫자는 나머지에 대해 아무것도 말해주지 않습니다. 이런 경우에는 스크림, 불투명 패널, 텍스트 그림자 같은 것이 필요합니다 — 배경이 어떻기를 바라는 대신 알려진 배경을 보장하는 장치 말입니다.

색각 이상은 어떤 조합이 통하는지를 바꿉니다

남성 열두 명 중 한 명 정도가 어떤 형태로든 색각 이상을 가지며, 가장 흔한 것은 빨강과 초록을 구분하기 어려운 경우입니다. 대비율은 밝기가 좌우하므로 이 상황을 꽤 잘 견딥니다 — 그러나 색상만으로 전달되는 정보는 그렇지 않습니다. 빨강 대 초록의 상태 표시 점, 범례가 색뿐인 차트, 밑줄 없이 색으로만 본문과 구분되는 링크 — 각각이 상당수의 독자에게는 보이지 않습니다.

따라서 규칙은 단순합니다. 색이 유일한 채널이 되게 하지 마세요. 모양, 아이콘, 레이블, 패턴, 혹은 밝기 차이를 함께 두세요. 흔한 색각 이상 시뮬레이션으로 디자인을 점검하는 일은 금방 끝나며, 자동 대비 검사기가 아무 불평 없이 통과시키는 바로 그 차트와 상태 표시들을 잡아내는 경향이 있습니다.

견디는 팔레트 만들기

가장 믿을 만한 접근은 색을 하나씩 고르는 대신 밝기 단계로 설계하는 것입니다. 밝기 값의 사다리를 고정하고 각 색상을 모든 단계에서 생성하면 조합이 예측 가능해집니다 — 사다리에서 충분히 떨어진 두 단계는 색상과 무관하게 통과합니다. 지각적 색 공간이 HSL보다 이 일을 훨씬 쉽게 만들어 줍니다. HSL의 명도는 지각적으로 균일하지 않아서, 같은 명도 값의 두 HSL 색이 밝기 면에서 전혀 다르게 보일 수 있습니다.

실무용 체크리스트:

본문 4.5:1, 큰 글자 3:1, 인터페이스 테두리와 의미 있는 아이콘 3:1.
실패는 색상이 아니라 밝기를 바꿔서 고친다.
플레이스홀더·비활성·포커스 상태를 점검한다 — 가장 자주 실패한다.
정보를 색상만으로 인코딩하지 않는다. 모양·레이블·밝기를 더한다.
두 테마를 모두 시험한다. 라이트 모드에서 통과한 팔레트가 반전 시 실패할 수 있다.