색각 이상 고려

색은 화면에서 가장 싸게 쓸 수 있는 신호입니다. 잘된 건 초록, 안 된 건 빨강으로 칠하면 설명 한 줄 없이 목록 전체가 읽힙니다. 자리도 안 먹고 번역할 것도 없으니 상태를 나타내는 자리마다 색이 먼저 들어갔습니다.

그러다 어떤 사용자에게는 그 목록이 회색 점 스무 개로 보인다는 사실이 걸렸습니다. 색을 가려내는 감각이 사람마다 다르고, 빨강과 초록을 비슷하게 받아들이는 경우가 남성 스무 명 중 한 명꼴로 있습니다. 여성에게는 훨씬 드물어 200명 중 한 명 정도입니다. 흔한 일이라 어느 제품이든 사용자가 1만 명이면 그중 몇백 명이 여기에 해당합니다.

실제로는 문의로 먼저 옵니다. "결제 실패한 건만 보고 싶은데 어느 줄인지 모르겠어요" 같은 문장이 들어오고, 화면을 만든 쪽에서는 빨간색으로 분명히 표시해 뒀으니 처음에는 무슨 말인지 알아듣지 못합니다. 색이 안 보인다는 게 아니라 옆 줄과 같아 보인다는 뜻이라는 걸 알아채는 데 시간이 걸립니다.

그래서 접근성 지침은 색을 쓰지 말라고 하지 않고, 색이 혼자 정보를 지지 않게 하라고 적습니다. 색은 그대로 두고 옆에 다른 신호를 하나 더 붙이는 쪽입니다. 신호가 둘이면 하나를 못 받는 사람도 나머지로 읽고, 둘 다 받는 사람은 더 빨리 읽습니다.

색으로 구분한 자리마다 색이 아닌 신호를 하나 더 얹는 것이 전부입니다. 색은 빼지 않고 그대로 둡니다.

덧붙이는 신호는 대개 셋 중 하나입니다.

1. 모양 — 성공에는 체크 표시, 실패에는 느낌표를 답니다. 점 색깔만 다르던 목록이 모양까지 달라지면 색을 못 가려도 두 줄이 구분됩니다.
2. 글자 — 점 옆에 "성공" 과 "실패" 를 적습니다. 자리를 조금 먹지만 가장 확실하고, 스크린 리더처럼 화면을 소리로 읽어 주는 프로그램에도 그대로 전달됩니다.
3. 무늬나 굵기 — 선 그래프에서 한 선은 실선, 다른 선은 점선으로 둡니다. 선이 여럿인 그림에서 색만 다르면 범례와 선을 짝지을 방법이 없습니다.

여기에 밝기 차이를 따로 봅니다. 색상이 달라도 밝기가 비슷하면 색을 가리지 못하는 눈에는 같은 회색으로 내려앉습니다. WCAG는 웹 접근성의 국제 표준 지침으로, 본문 글자와 배경의 밝기 차이를 4.5 대 1 이상 두라고 정해 뒀습니다. 두 색을 나란히 쓸 때도 같은 기준을 적용하면 밝기만으로도 구분이 남습니다.

확인은 두 번에 끝납니다. 화면을 흑백으로 바꿔 보고 구분이 남아 있으면 통과입니다. 그다음 적록 구분이 어려운 상태를 흉내 내는 도구로 한 번 더 봅니다. 빨강과 초록을 나란히 쓴 자리가 가장 자주 걸리고, 파랑과 주황으로 바꾸면 대부분 해결됩니다.

가장 먼저 걸리는 자리는 상태 표시입니다. 목록에서 성공·대기·실패를 점 색으로만 나눠 둔 화면, 배지로 개수를 알리면서 색으로 긴급도를 구분한 화면이 여기 해당합니다.

입력 폼도 같은 문제를 안고 있습니다. 잘못 채운 칸에 빨간 테두리만 두르면 어느 칸이 틀렸는지 못 찾습니다. 테두리는 그대로 두고 칸 아래에 무엇이 잘못됐는지 문장을 답니다. 이 문장은 색을 가리는 것과 무관하게 모든 사용자에게 필요한 정보이기도 합니다.

데이터 시각화는 색을 가장 많이 쓰는 자리라 영향도 큽니다. 선이 다섯 개인 그래프에서 범례만 색으로 구분해 두면 어느 선이 어느 값인지 짝지을 수 없습니다. 선 끝에 이름을 직접 붙이거나 선 모양을 달리하는 쪽으로 바꿉니다. 색 단계로 크기를 나타내는 지도라면 숫자를 함께 적습니다.

한 번 정해 두면 반복을 줄일 수 있습니다. 디자인 토큰은 색이나 간격 같은 값에 이름을 붙여 코드와 공유하는 단위인데, 상태를 나타내는 색을 토큰으로 묶을 때 아이콘까지 한 짝으로 정해 두면 그 이후 화면은 자동으로 조건을 지킵니다. 화면마다 매번 기억해 내는 방식보다 훨씬 오래갑니다.

"이거 색으로만 구분돼 있어서 안 될 것 같아요. 아이콘 하나 붙일게요."

시안 리뷰에서 가장 자주 나오는 지적입니다. 색을 빼자는 말이 아니라 하나를 더 얹자는 제안입니다.

"흑백으로 찍어 보고 구분되면 통과예요."

점검 방법을 한마디로 줄인 말입니다. 도구 없이 바로 할 수 있어서 기준선으로 자주 쓰입니다.

"빨강-초록 조합만 피하면 대부분 해결됩니다."

가장 흔한 유형이 적록 구분이라 이 조합을 바꾸는 것만으로 사용자 대부분이 커버된다는 뜻입니다.

페이지덱에서는 문서 목록의 공유 상태 표시가 처음 걸린 자리였습니다. 공개 문서는 초록 점, 비공개는 회색 점, 만료된 링크는 빨간 점이었는데, 어느 고객이 만료된 문서를 못 찾겠다고 문의했습니다. 민서가 세 상태에 자물쇠·지구본·시계 아이콘을 붙이고 점은 그대로 뒀습니다. 태오가 아이콘 이름을 스크린 리더에도 읽히게 연결했고, 같은 변경으로 문의가 사라졌습니다.

이후 팀은 상태 색을 새로 만들 때마다 아이콘을 같이 정하기로 했습니다. 나중에 찾아 붙이는 것보다 처음에 한 짝으로 만드는 쪽이 훨씬 싸다는 걸 이 건에서 확인했기 때문입니다.

색을 가리기 어려운 사람이 세상을 흑백으로 본다고 생각하는 경우가 많습니다. 이름이 그렇게 들리니 자연스러운 오해입니다. 실제로 모든 색이 회색으로 보이는 경우는 아주 드물고, 대부분은 특정 색 쌍을 서로 비슷하게 받아들이는 쪽입니다. 빨강과 초록이 가장 흔하고 파랑과 노랑이 그다음입니다. 이 오해를 그대로 두면 대응이 엉뚱한 데로 갑니다. 화면 전체의 채도를 낮추는 식으로 손대는데, 정작 문제인 빨강과 초록 조합은 그대로 남습니다.

두 번째는 색을 아예 쓰지 말라는 규칙으로 읽는 것입니다. 색이 문제라고 하니 빼는 게 안전해 보입니다. 하지만 색은 대다수 사용자에게 가장 빠른 신호라서, 걷어내면 모두가 느려지고 얻는 사람은 없습니다. 조건은 색을 없애라가 아니라 색 하나에만 의존하지 말라입니다. 이 차이를 놓치면 팀은 지켜야 할 것을 손해로 받아들이고, 다음 화면에서 다시 색만 쓰게 됩니다.