홈페이지 글자가 안 읽힌다는 말, 취향 문제가 아닙니다

홈페이지를 새로 만들고 나서 "글자가 흐릿해서 안 읽힌다"는 말을 듣는 경우가 있습니다. 만든 쪽은 화면에서 잘 보인다고 하고, 말한 쪽은 안 보인다고 합니다. 취향 다툼처럼 흘러갑니다.

취향 문제가 아닙니다. 읽기 쉬움은 재서 숫자로 확인할 수 있는 값입니다. 저희 브랜드 포인트 컬러도 재보고 나서 쓰임을 나눴습니다.

눈으로 괜찮아 보이던 색이 기준의 절반이었습니다

브랜드 포인트 컬러는 밝은 청록입니다. 배경이나 버튼에 쓰면 잘 보입니다. 흰 배경 위에 글자로 쓰면 사정이 달라집니다.

흰 배경 위에서 청록 계열 몇 가지의 대비를 재봤습니다.

일반 본문 크기의 글자는 4.5 이상이어야 읽기 기준을 충족합니다. 포인트 컬러인 cyan-500이 2.43으로 절반 정도에 그쳤습니다.

화면에서 볼 때는 그렇게 흐려 보이지 않았습니다. 밝은 청록은 채도가 높아서 눈에 잘 들어오는데, 대비는 밝기 차이로 계산되기 때문에 채도가 높아도 값이 낮게 나옵니다. 선명하다는 인상과 읽기 쉽다는 사실이 따로 놉니다.

만드는 쪽이 이 차이를 놓치는 이유도 여기 있습니다. 좋은 모니터로, 밝은 사무실에서, 그 색을 몇 주째 보고 있으면 안 읽힌다는 감각 자체가 생기지 않습니다. 고객은 오래된 노트북으로, 창가 자리에서, 처음 봅니다.

브랜드 색을 포기하지 않고 쓰임을 나눴습니다

담당자가 이 이야기를 들으면 대개 "그러면 우리 브랜드 색을 못 쓰는 겁니까"라고 묻습니다. 그렇지 않습니다.

저희는 텍스트에 쓰는 액센트만 cyan-700으로 내렸습니다. 포인트 컬러 자체를 바꾼 것은 아닙니다. 버튼 배경처럼 색이 면으로 깔리는 자리는 그대로 두고, 링크나 강조 문구처럼 그 색으로 글자를 쓰는 자리만 진한 쪽으로 바꿨습니다.

같은 계열 안에서 명도만 움직였기 때문에 브랜드 인상은 유지됩니다. 전혀 다른 색으로 갈아타면 인상이 흔들리지만 명도 조절은 그렇지 않습니다.

배경을 순백으로 두지 않았습니다

같은 작업에서 배경색도 조정했습니다. 순백 대신 아주 옅은 회색을 깔고 카드를 흰색으로 두었습니다.

이유가 두 가지입니다. 하나는 순백 배경이 눈부시다는 판단입니다. 다른 하나는 카드와 배경이 같은 흰색이면 경계가 테두리에만 의존하게 되는데, 배경을 한 단계 내리면 테두리 없이도 층이 생깁니다.

배경을 어둡게 하면 그 위 글자의 대비는 조금 낮아집니다. 그래서 배경을 바꾼 뒤 대비를 다시 쟀습니다. 화면 전체에서 기준 미달이 없었고 가장 낮은 값이 4.8이었습니다. 도형 안에 들어간 글자까지 포함한 값입니다.

배경 하나를 바꾸면 그 위의 모든 글자를 다시 재야 한다는 뜻이기도 합니다. 색을 나중에 바꾸는 비용이 처음부터 재고 정하는 비용보다 큽니다.

검사 도구를 돌렸다는 말만으로는 부족합니다

접근성 검사 도구를 돌리면 위반 목록과 함께 "판정할 수 없음"으로 분류되는 항목이 나옵니다.

요소가 겹쳐 있거나 배경이 이미지라서 실제 배경색을 특정할 수 없는 경우입니다. 도구는 이것을 위반으로 세지 않고 따로 보고합니다.

처음에는 이 항목들을 어떻게 다룰지 애매했습니다. 위반에 넣으면 숫자가 부풀고, 통과에 넣으면 실제 문제를 놓칩니다. 결국 사람이 확인할 목록으로 따로 뒀습니다.

확인해 보니 일부는 개발 중에만 뜨는 화면 요소와 겹친 것이라 실제 사용자에게는 해당하지 않았습니다. 나머지 중에는 진짜 문제가 있었습니다. 어두운 패널 위 라벨이 너무 흐려서 밝은 쪽으로 바꿨습니다.

담당자가 "접근성 검사 통과"라는 보고를 받았을 때 물어볼 것이 여기 있습니다. 판정 보류 항목이 몇 건이었고 그것을 누가 어떻게 확인했는지입니다. 이 항목을 통과 쪽으로 밀어 넣은 보고서는 통과라는 글자만 남고 실제 문제를 담고 있습니다.

색을 정하는 순서

정리하면 이렇습니다.

먼저 그 색이 무엇을 하는지 구분합니다. 여기서 흔히 틀리는 지점이 있습니다. 글자만 측정하면 된다고 생각하기 쉬운데 그렇지 않습니다.

경고를 뜻하는 아이콘이나 활성 상태를 표시하는 테두리는 그것만으로 정보를 전달합니다. 글자가 아니어도 안 보이면 기능이 전달되지 않습니다. 재고 관리 화면에서 부족 표시가 안 보이면 그것은 디자인 문제가 아니라 업무 사고입니다. 측정을 건너뛸 수 있는 것은 있으나 마나 한 장식뿐입니다.

다음으로 실제 배경색과의 대비를 잽니다. 디자인 시안이 아니라 실제 화면에 적용된 값으로 재야 합니다. 배경을 바꾸면 다시 재야 합니다.

기준에 못 미치면 같은 계열에서 명도를 조절합니다. 방향은 배경이 정합니다. 밝은 배경에서는 진한 쪽으로 내리고, 어두운 배경에서는 밝은 쪽으로 올립니다. 앞의 어두운 패널 라벨을 밝은 색으로 바꾼 것이 그 경우입니다.

마지막으로 자동 검사를 돌리되 판정 보류 항목을 따로 확인합니다.

정리

색에 대한 판단은 취향처럼 보이지만 읽기 쉬움은 측정할 수 있는 값입니다. 브랜드 색이 기준에 걸렸을 때 색을 포기할 필요는 없고, 쓰이는 자리를 나누면 대부분 해결됩니다.

측정하지 않으면 이 문제는 드러나지 않습니다. 만드는 사람은 그 색을 계속 봐서 익숙해지고, 처음 보는 사람이 읽기 어려운지는 알 수 없습니다. 홈페이지를 맡기실 때 대비 측정값을 함께 요청하시면 이 구간이 넘어가지 않습니다.

화면 접근성 점검 상담받기