[웹 퍼블리싱 64] 접근성 - 색 대비와 가독성

지금까지는 화면을 보지 못하거나 마우스를 못 쓰는 사용자를 주로 떠올렸다. 이번 편에서는 화면을 보긴 하지만 잘 보지 못하는 사용자를 이야기한다. 저시력 사용자, 색을 구분하기 어려운 사용자, 그리고 밝은 햇빛 아래의 누구나가 여기 해당한다. 이들에게 가장 큰 벽은 색 대비다. 이번 편은 색 대비와 가독성을 다룬다.

나는 예전에 회색 배경에 옅은 회색 글자를 즐겨 썼다. 세련돼 보인다는 이유였다. 그런데 밝은 곳에서 노트북을 쓰다 보니 내 글자가 거의 안 보였다. 내가 만든 화면을 나조차 못 읽는 순간이었다. 그때 나는 낮은 대비가 멋이 아니라 벽이라는 걸 깨달았다. 이 편에서 나는 색 대비를 감이 아니라 기준으로 다루는 법을 정리한다.

1. 색 대비는 감이 아니라 기준이다

색 대비는 글자와 배경의 밝기 차이를 뜻한다. 이 차이가 작으면 글자가 배경에 묻혀 읽기 어렵다. 눈이 좋은 사람은 낮은 대비도 그럭저럭 읽지만, 저시력 사용자에게는 흐릿한 글자가 아예 안 보이는 벽이 된다. 나는 색 대비를 취향의 문제가 아니라 읽을 수 있느냐 없느냐의 문제로 이해하게 됐다. 대비는 가독성의 토대다.

중요한 것은 대비를 눈대중으로 판단하지 않는 것이다. 만든 사람의 좋은 눈으로는 충분해 보여도, 실제로는 기준에 한참 못 미칠 수 있다. 그래서 접근성 지침은 대비를 숫자로 재는 기준을 제시한다. 두 색의 밝기 차이를 비율로 계산해 일정 기준을 넘어야 한다는 것이다. 나는 이 숫자 기준을 감을 대신하는 잣대로 삼는다.

색 대비의 혜택은 저시력 사용자에게만 가는 것이 아니다. 밝은 햇빛 아래에서는 누구나 화면이 잘 안 보인다. 이때 대비가 높은 화면은 읽히지만 낮은 화면은 안 읽힌다. 저시력 사용자를 위한 배려가 야외의 모든 사용자를 함께 돕는 것이다. 나는 이 겹침을 겪으며 색 대비를 소수가 아니라 모두를 위한 기본으로 대하게 됐다.

낮은 대비를 세련됨으로 여기는 흐름이 한때 유행했다. 옅은 회색 글자와 얇은 선이 멋져 보였다. 그러나 그 멋은 읽을 수 있는 사람에게만 멋이었다. 나는 미감과 가독성이 부딪칠 때 가독성을 택하는 쪽으로 방향을 잡았다. 멋있지만 안 읽히는 화면보다, 담백하지만 누구나 읽는 화면이 낫다는 걸 경험으로 배웠다.

색 대비는 처음부터 챙기는 것이 훨씬 쉽다. 색을 다 정한 뒤에 대비 문제로 색을 뒤엎으면 디자인 전체가 흔들린다. 색을 고르는 단계에서부터 대비 기준을 함께 보면, 나중에 고칠 일이 없다. 나는 색 팔레트를 정할 때 각 조합의 대비를 미리 확인해, 기준을 통과하는 색만 골라 쓴다. 대비는 마지막이 아니라 처음에 챙길 일이다.

정리하면 색 대비는 취향이 아니라 읽을 수 있느냐의 문제이고, 눈대중이 아닌 숫자 기준으로 판단하며, 저시력 사용자만이 아니라 야외의 모두를 돕고, 처음부터 챙겨야 쉽다. 나는 대비를 가독성의 토대로 삼는다. 그렇다면 그 숫자 기준은 구체적으로 어떻게 될까. 텍스트 대비 기준부터 살펴보자.

2. 텍스트 대비 기준

접근성 지침은 텍스트 대비의 최소 기준을 정해 두었다. 일반적인 크기의 본문 글자는 배경과의 대비 비율이 일정 수준 이상이어야 한다. 이 기준을 통과해야 저시력 사용자도 무리 없이 읽을 수 있다. 나는 본문 색을 정할 때 이 기준을 통과하는지 반드시 확인한다. 통과하지 못하면 아무리 예뻐도 그 색은 쓰지 않는다.

큰 글자에는 조금 낮은 기준이 적용된다. 굵고 큰 제목은 획이 두꺼워 얇은 본문보다 잘 보이기 때문에, 본문보다 완화된 대비 기준을 통과하면 된다. 다만 이 완화는 정말 큰 글자에만 해당한다. 나는 크기에 따라 적용 기준이 다르다는 걸 알아두고, 본문과 제목에 각각 맞는 기준을 대어 확인한다. 크기가 기준을 바꾼다.

대비는 글자 색과 배경 색 두 가지가 함께 정한다. 글자만 어둡게 해서 되는 게 아니라 배경과의 관계로 결정된다. 그래서 배경이 바뀌는 자리, 이를테면 이미지 위에 글자를 얹을 때 특히 조심해야 한다. 나는 이미지 위 글자에는 어두운 반투명 막을 깔거나 글자에 그림자를 주어, 배경이 어떻든 대비가 유지되게 한다.

상태에 따라 색이 바뀌는 글자도 모든 상태에서 기준을 지켜야 한다. 마우스를 올렸을 때나 눌렀을 때 색이 옅어지면서 대비가 무너지는 경우가 흔하다. 나는 기본 상태뿐 아니라 마우스를 올린 상태, 비활성 상태까지 각각의 대비를 확인한다. 어느 한 상태에서라도 글자가 안 읽히면 그 상태에서 사용자는 벽을 만난다.

비활성으로 흐리게 처리한 요소는 예외로 여겨지기도 하지만, 나는 되도록 비활성 요소도 읽히게 만든다. 지금은 못 누르더라도 무슨 버튼인지는 알아야 하기 때문이다. 너무 흐려서 글자조차 안 보이면 사용자는 그것이 무엇인지도 모른 채 지나친다. 나는 비활성 상태의 대비도 최소한 읽을 수 있는 선은 지키려 애쓴다.

정리하면 텍스트 대비는 본문과 큰 글자에 각각의 기준이 있고, 글자와 배경의 관계로 정해지며, 이미지 위 글자와 여러 상태의 색까지 모두 기준을 지켜야 한다. 나는 모든 상태의 대비를 확인한다. 그런데 대비가 필요한 것은 글자만이 아니다. 다음은 글자가 아닌 요소의 대비다.

3. 글자가 아닌 요소의 대비

대비는 텍스트에만 필요한 것이 아니다. 버튼의 경계, 입력 칸의 테두리, 아이콘, 포커스 표시 같은 요소도 배경과 충분히 구분되어야 한다. 이것들이 배경에 묻히면 저시력 사용자는 어디를 눌러야 할지, 어디에 입력해야 할지 알 수 없다. 나는 글자가 아닌 요소의 대비를 텍스트 대비만큼 중요하게 챙기게 됐다.

대표적인 것이 입력 칸의 테두리다. 요즘 흔한 옅은 회색 테두리는 흰 배경에서 거의 안 보인다. 눈이 좋은 사람은 짐작으로 칸을 찾지만, 저시력 사용자는 어디가 입력 칸인지조차 모른다. 나는 입력 칸의 테두리를 배경과 또렷이 구분되는 색으로 정해, 칸의 경계가 분명히 드러나게 한다. 경계가 보여야 입력할 수 있다.

아이콘도 배경과 충분한 대비를 지녀야 한다. 기능을 상징하는 아이콘이 옅어서 잘 안 보이면, 그 기능을 찾지 못한다. 특히 아이콘만으로 표시된 버튼은 아이콘이 안 보이면 버튼 자체가 사라진 것과 같다. 나는 기능을 나타내는 아이콘의 대비를 확인해, 옅은 회색으로 그려 배경에 묻히는 일이 없게 한다. 기능은 보여야 쓸 수 있다.

포커스 표시의 대비도 잊지 말아야 한다. 앞서 포커스 표시를 지우지 말라고 했는데, 표시가 있어도 배경과 대비가 낮으면 안 보이는 것과 같다. 나는 포커스 표시를 만들 때 그것이 놓일 배경과의 대비를 확인해, 어떤 배경 위에서도 또렷이 드러나게 한다. 포커스 표시는 존재만으로는 부족하고 보여야 제구실을 한다.

기능을 구분하는 데 꼭 필요한 요소만 이 대비 기준을 지키면 된다. 순수한 장식 선이나 분위기용 도형까지 기준을 맞출 필요는 없다. 그것들은 안 보여도 정보나 기능이 사라지지 않기 때문이다. 나는 이 요소가 사용자가 무언가를 하는 데 꼭 필요한지를 기준으로, 대비를 챙길 것과 넘어갈 것을 가른다. 기능을 나르는 것만 챙긴다.

정리하면 버튼 경계, 입력 칸 테두리, 아이콘, 포커스 표시 같은 글자가 아닌 요소도 배경과 충분히 구분되어야 하되, 기능에 꼭 필요한 요소만 이 기준을 지키면 된다. 나는 경계와 아이콘의 대비를 텍스트만큼 챙긴다. 그런데 대비를 아무리 잘 맞춰도, 색만으로 정보를 전하면 또 다른 벽이 생긴다.

4. 색에만 기대지 않는다

색은 정보를 전하는 편리한 수단이지만, 색에만 기대면 색을 구분하지 못하는 사용자가 소외된다. 색을 구분하기 어려운 사람은 생각보다 많다. 빨강과 초록을 비슷하게 보는 경우가 대표적이다. 이들에게 색만으로 구분한 정보는 아무 구분도 아니다. 나는 색을 정보의 유일한 수단으로 쓰지 않는 것을 원칙으로 삼는다.

대표적인 함정이 링크를 색으로만 구분하는 것이다. 본문 속 링크를 파란색으로만 표시하면, 색을 잘 못 보는 사용자는 그것이 링크인지 알 수 없다. 그래서 링크에는 색과 함께 밑줄을 준다. 밑줄을 긋는 속성 text-decoration으로 링크에 밑줄을 더하면, 색을 못 봐도 링크임을 알 수 있다. 나는 본문 링크에 밑줄을 기본으로 둔다.

오류 표시도 흔한 함정이다. 입력이 잘못됐을 때 칸을 빨갛게만 물들이면, 색을 못 보는 사용자는 무엇이 잘못됐는지 모른다. 나는 오류를 색뿐 아니라 아이콘과 텍스트로 함께 알린다. 빨간 테두리에 더해 경고 기호와 무엇이 잘못됐다는 문장을 나란히 둔다. 이렇게 하면 색을 못 보는 사용자도 오류를 알아챈다.

상태를 색으로만 구분하는 것도 피한다. 성공은 초록, 실패는 빨강처럼 색으로만 상태를 나누면 색맹 사용자는 둘을 구분하지 못한다. 색에 더해 아이콘이나 글자로 상태를 함께 표시해야 한다. 나는 상태를 나타낼 때 색은 거들 뿐, 실제 구분은 모양이나 글자가 하게 만든다. 색은 보조 수단이지 유일한 수단이 아니다.

색에만 기대지 않는지 확인하는 좋은 방법은 화면을 흑백으로 상상해 보는 것이다. 색을 다 걷어내고 회색조로 봤을 때도 정보가 구분되면, 색에만 기댄 것이 아니다. 나는 중요한 구분마다 이 흑백 시험을 마음속으로 해본다. 흑백으로 봤을 때 구분이 사라진다면, 색 말고 다른 단서를 더해야 한다는 신호다.

정리하면 색에만 기대면 색을 못 보는 사용자가 소외되므로, 링크에는 밑줄을, 오류에는 아이콘과 텍스트를, 상태에는 모양과 글자를 색과 함께 두고, 흑백으로 봐도 구분되는지 확인한다. 나는 색을 보조 수단으로만 쓴다. 마지막으로, 이 모든 대비를 실제로 확인하는 도구와 방법을 살펴보자.

5. 대비를 확인하는 법

색 대비는 눈으로 판단하지 말고 도구로 재야 한다. 브라우저의 개발자 도구에는 두 색의 대비 비율을 계산해 기준 통과 여부를 알려주는 기능이 있다. 나는 글자 색을 정할 때 이 기능으로 대비 비율을 확인해, 기준을 넘는지 숫자로 판정한다. 감으로 충분해 보여도 숫자로는 미달인 경우가 많아, 도구는 필수다.

별도의 대비 검사 도구들도 있다. 두 색을 넣으면 대비 비율과 통과 여부를 알려주는 웹 도구나, 화면의 아무 지점이나 색을 집어 검사하는 프로그램이 있다. 나는 색 조합을 정할 때 이런 도구로 각 조합을 미리 검사해, 통과하는 조합만 팔레트에 담는다. 색을 고르는 단계에서 검사하면 나중에 뒤엎을 일이 없다.

자동 검사 도구도 대비 문제를 상당히 잡아준다. 페이지 전체를 훑어 기준에 못 미치는 글자를 찾아준다. 다만 이미지 위 글자처럼 배경이 복잡한 경우는 자동으로 잡기 어렵다. 나는 자동 검사로 큰 문제를 걸러낸 뒤, 배경이 까다로운 자리는 직접 눈으로 확인한다. 자동과 수동을 함께 써야 빈틈이 줄어든다.

다크 모드를 지원한다면 밝은 화면과 어두운 화면 양쪽의 대비를 모두 확인해야 한다. 밝은 화면에서 통과한 색이 어두운 화면에서는 미달일 수 있다. 나는 두 모드를 각각 검사해, 어느 모드에서든 대비가 유지되게 한다. 한쪽만 확인하고 넘어가면 다른 모드의 사용자가 벽을 만난다. 두 모드는 따로 챙길 문제다.

대비는 새 색을 쓸 때마다 반복해서 확인하는 습관이 중요하다. 한 번 잘 맞춰도 나중에 색을 바꾸면 대비가 다시 무너질 수 있다. 나는 색을 손댈 때마다 대비를 다시 재는 것을 규칙으로 삼는다. 검사를 코드 점검 과정에 넣어두면, 대비가 무너진 채로 배포되는 일을 막을 수 있다. 반복 확인이 대비를 지킨다.

정리하면 색 대비는 눈이 아니라 도구로 재야 하고, 색을 고르는 단계에서 검사하며, 자동과 수동을 함께 쓰고, 다크 모드까지 각각 확인하며, 색을 손댈 때마다 반복한다. 나는 대비를 숫자로 관리한다. 여기까지 눈으로 보는 접근성을 다뤘다면, 다음 편에서는 눈으로 보지 않는 사용자의 도구인 화면 낭독기를 깊이 이해해 본다.