색 대비 4.5_1, 왜 중요한가
색 대비 4.5_1, 왜 중요한가
【도입 — 공감·문제제기】
“이 글씨 잘 보이세요?”
지난겨울, 어머니 댁에 갔다가 무심코 던진 질문이었다. 어머니가 컴퓨터로 어느 공공기관 사이트에 들어가 증명서를 떼려다가, 안경을 코끝까지 내리고 화면을 한참 들여다보고 계셨다. 옆에서 보니 회색 바탕에 연한 회색 글씨가 빼곡했다. 나는 멀쩡히 읽혔다. 그런데 어머니는 “글씨가 뿌옇다”고 하셨다. 같은 화면, 같은 거리, 다른 눈. 그날 나는 ‘잘 보인다’는 게 얼마나 주관적이고 위태로운 기준인지 처음으로 실감했다.
공공웹을 만들거나 운영해본 사람이라면 한 번쯤 이런 장면을 겪었을 거다. 디자이너가 “이 정도면 세련됐죠”라며 올린 시안의 회색 톤, 깔끔해 보이는 연한 안내 문구, 배경에 살짝 녹아드는 부가 설명. 모니터 앞 스무 살 디자이너의 눈에는 멋스러웠을 그 화면이, 정작 그 서비스를 가장 많이 쓰는 예순·일흔의 국민에게는 ‘읽히지 않는 화면’이 된다. 멋과 가독성이 충돌할 때, 공공 서비스는 어느 쪽을 택해야 할까. 답은 정해져 있다. 그런데 현장에서는 자꾸 반대로 간다.
이 글은 그 ‘반대로 가는 일’을 막기 위한 이야기다. 정확히는 ‘색 대비(color contrast)’라는, 듣기엔 사소해 보이지만 웹 접근성의 가장 기본이자 가장 자주 무너지는 그 항목에 대한 이야기다. 그리고 그 한가운데에 ‘4.5:1’이라는 숫자가 있다. 웹 접근성을 조금이라도 들여다본 사람이라면 어디선가 들어봤을 그 비율. 오늘은 이 숫자가 대체 뭔지, 왜 하필 4.5:1인지, 그리고 이게 왜 ‘있으면 좋은 것’이 아니라 ‘반드시 지켜야 하는 것’인지를 처음부터 끝까지 풀어보려 한다.
미리 밝혀두자면, 나는 색채 전문가도 아니고 시각 과학자도 아니다. 그저 공공 사이트를 만들고 검수하면서, ‘이 글씨 진짜 잘 보이는 거 맞아?’라는 질문 앞에서 매번 자신 없어 했던 한 사람의 실무자일 뿐이다. 그래서 이 글도 학술 논문처럼 쓰지 않을 거다. 어려운 용어는 최대한 풀고, 비유를 많이 쓰고, 솔직하게 ‘나도 이거 몰랐다’는 부분은 몰랐다고 쓸 생각이다. 디자인 전공이 아니어도, 개발자가 아니어도 끝까지 읽으면 ‘아, 색 대비가 이래서 중요하구나’ 하고 감을 잡을 수 있게.
사실 색 대비라는 주제를 글로 풀자고 마음먹은 데는 작은 죄책감도 있었다. 예전에 어느 사이트를 검수할 때, 디자이너가 올린 연한 회색 안내 문구를 보고 ‘좀 흐린데… 그래도 깔끔하니까’ 하고 그냥 넘긴 적이 있다. 나중에 그 페이지에 ‘서류 접수 마감일’이 바로 그 흐린 회색으로 적혀 있었다는 걸 알았다. 누군가는 그 마감일을 못 보고 지나쳤을지도 모른다. 그때의 찜찜함이 오래 남았다. ‘내 눈에 보였으니까 괜찮겠지’라는 한순간의 안일함이 누군가에게는 권리의 박탈로 이어질 수 있다는 걸, 그제야 실감했다. 이 글은 그때의 나 같은 사람에게 보내는 편지이기도 하다.
먼저 결론부터 한 문장으로 정리하면 이렇다. 색 대비란 ‘글자색과 배경색이 얼마나 또렷하게 구분되는가’를 숫자로 나타낸 값이고, 본문 글씨는 그 값이 최소 4.5:1은 되어야 ‘웬만한 사람은 다 읽을 수 있다’고 보는 국제·국내 기준이 있다는 것. 이게 전부다. 그런데 이 한 문장 뒤에는 ‘왜 하필 4.5인가’ ‘큰 글씨는 왜 기준이 다른가’ ‘아이콘이나 버튼 테두리는 어떻게 따지나’ ‘디자인 멋과 어떻게 타협하나’ 같은 수많은 이야기가 숨어 있다. 그걸 하나씩 풀어가는 게 오늘의 목표다.
조금 더 솔직하게 이야기를 풀어보자. 공공웹 담당자에게 ‘접근성’이라는 단어는 늘 부담스럽다. 챙겨야 할 항목은 많고, 용어는 낯설고, 막상 ‘우리 사이트 접근성 괜찮아요?’라고 물으면 명확하게 답할 자신이 없다. 그중에서도 색 대비는 묘하게 ‘쉬워 보이는데 자꾸 틀리는’ 항목이다. 글씨가 안 보이면 색을 진하게 하면 되는 거 아니냐, 누구나 그렇게 생각한다. 그런데 실제로는 ‘얼마나 진하게’가 문제고, 그 ‘얼마나’를 눈대중이 아니라 숫자로 따져야 한다는 데서 막힌다. 그 숫자가 바로 4.5:1이다. 오늘 이 숫자와 친해지고 나면, 적어도 ‘우리 사이트 글씨 잘 보이는지’ 정도는 자신 있게 판단할 수 있게 될 거다.
이 글의 흐름을 미리 일러두면 이렇다. 먼저 ‘색 대비’가 대체 무슨 말인지 일상의 비유로 풀고, 4.5:1이라는 숫자가 어디서 왔는지를 짚는다. 그다음 ‘왜 이게 멋의 문제가 아니라 권리의 문제인지’를 사용자 관점에서 이야기하고, 본문과 큰 글씨·아이콘의 기준이 왜 다른지를 설명한다. 이어서 색 대비가 KRDS와 웹 접근성 지침(KWCAG) 안에서 어디에 위치하는지를 정리하고, 실무에서 가장 흔하게 무너지는 패턴들을 익명 사례로 보여준다. 마지막으로 ‘그래서 우리는 무엇부터 점검하면 되는지’를 자동 진단 관점에서 정리한다. 처음부터 끝까지 ‘눈대중을 숫자로 바꾸는 것’을 원칙으로 삼았으니, 편하게 읽어 내려가면 된다.
【본론 1 — 색 대비란 무엇인가】
■ ‘잘 보인다’를 숫자로 바꾼다는 것
색 대비 이야기를 하기 전에, 먼저 ‘잘 보인다’라는 말부터 의심해보자. 우리는 화면을 보며 ‘이 정도면 보이네’ ‘이건 좀 안 보이네’를 판단한다. 그런데 이 판단은 사람마다, 상황마다 천차만별이다.
같은 글씨라도 스무 살의 눈과 일흔 살의 눈은 다르게 본다. 밝은 사무실에서 보는 화면과 햇빛 쏟아지는 야외에서 보는 화면은 다르다. 고급 모니터에서 보는 색과 오래된 보급형 태블릿에서 보는 색은 다르다. 시각에 어려움이 없는 사람과 색을 구분하기 어려운 사람도 다르게 본다. 그러니 ‘내 눈에 보이니까 괜찮다’는 기준은 사실상 기준이 아니다. ‘나’라는 한 사람의 눈, 그 순간의 환경, 그 장비에만 통하는 기준일 뿐이다.
색 대비는 이 주관적인 ‘잘 보임’을 객관적인 ‘숫자’로 바꾸려는 시도다. 글자색과 배경색이 얼마나 차이가 나는지를 빛의 밝기(휘도)로 계산해서, 1:1부터 21:1까지의 비율로 나타낸다. 1:1은 글자색과 배경색이 완전히 똑같아서 글씨가 전혀 안 보이는 상태고, 21:1은 순수한 검정 글씨에 순수한 흰 배경처럼 가장 또렷한 상태다. 이 사이의 어딘가에 우리 사이트의 글씨가 놓여 있다.
비유하자면 이렇다. 안개 속에서 사람을 알아보는 상황을 떠올려보자. 안개가 옅으면 멀리 있는 사람도 또렷이 보인다. 안개가 짙으면 가까이 와도 형체만 흐릿하다. 색 대비가 높다는 건 ‘안개가 옅은’ 상태고, 낮다는 건 ‘안개가 짙은’ 상태다. 그런데 사람마다 ‘안개를 뚫는 시력’이 다르다. 시력이 좋은 사람은 짙은 안개도 어느 정도 뚫지만, 시력이 약한 사람은 옅은 안개에서도 헤맨다. 그래서 ‘가장 시력이 약한 사람도 알아볼 수 있을 만큼 안개를 걷어내자’는 게 색 대비 기준의 정신이다. 가장 약한 고리에 맞추면 모두가 보이지만, 그 반대는 성립하지 않는다.
여기서 중요한 건 ‘대비’가 ‘색의 다름’과 다르다는 점이다. 빨강과 초록은 분명 ‘다른 색’이지만, 밝기가 비슷하면 대비는 낮다. 특히 색을 구분하기 어려운 분들에게 빨강과 초록은 거의 같은 밝기의 회색 덩어리로 보인다. 그래서 색 대비는 ‘색상 자체의 차이’가 아니라 ‘밝기의 차이’를 본다. 알록달록 화려한 화면이 의외로 대비가 낮을 수 있고, 흑백처럼 단조로운 화면이 대비가 높을 수 있는 이유가 여기에 있다.
조금 더 깊이 들어가 보자. 대비를 계산할 때 쓰는 건 ‘휘도(luminance)’라는 개념이다. 휘도는 쉽게 말해 ‘그 색이 얼마나 밝게 빛나 보이는가’를 나타내는 값이다. 흥미로운 건, 사람의 눈이 모든 색을 똑같은 밝기로 느끼지 않는다는 점이다. 같은 강도의 빛이라도 초록 계열은 밝게 느끼고, 파랑 계열은 어둡게 느낀다. 그래서 휘도를 계산할 때는 빨강·초록·파랑 세 성분에 서로 다른 가중치를 둔다. 초록에 가장 큰 가중치를, 파랑에 가장 작은 가중치를 두는 식이다. 이게 ‘사람 눈이 실제로 느끼는 밝기’에 맞춘 계산이다. 우리가 ‘노란 글씨는 잘 보이는데 파란 글씨는 답답하다’고 느끼는 것도 이 가중치와 관련이 있다.
이 휘도 두 값(글자색의 휘도, 배경색의 휘도)을 가지고 비율을 내면 대비가 나온다. 밝은 쪽 휘도에 일정 보정을 더하고, 어두운 쪽 휘도에도 같은 보정을 더한 뒤 둘을 나눈다. 공식 자체는 복잡해 보이지만, 핵심은 단순하다. ‘두 색이 밝기 면에서 얼마나 멀리 떨어져 있는가’를 하나의 숫자로 압축한 것이다. 우리가 이 공식을 외울 필요는 전혀 없다. 다만 ‘색 대비는 색상이 아니라 밝기로 따진다’는 사실, 그리고 ‘그 밝기는 사람 눈이 느끼는 방식대로 가중치가 매겨진다’는 사실만 기억하면 충분하다. 이걸 알아두면, 왜 어떤 색 조합은 화려한데도 안 읽히고 어떤 조합은 수수한데도 또렷한지 납득이 간다.
한 가지 더, 대비는 ‘상대적’이라는 점도 짚어두자. 같은 회색 글씨라도 흰 배경 위에서는 대비가 높고, 옅은 회색 배경 위에서는 대비가 낮아진다. 글자색만 봐서는 대비를 알 수 없고, 반드시 ‘그 글자가 어떤 배경 위에 놓이는가’를 함께 봐야 한다. 그래서 색 대비를 따질 때는 글자색과 배경색을 ‘한 쌍’으로 묶어 본다. 디자인 시안에서 글자색만 정하고 ‘배경은 알아서’ 두면, 막상 어두운 배너 위에 그 글씨가 얹혔을 때 대비가 무너진다. 색을 정할 때는 늘 ‘무엇 위에 놓일 색인가’를 함께 생각해야 하는 이유다.
■ 4.5:1이라는 숫자는 어디서 왔나
자, 그럼 핵심 질문. 왜 하필 4.5:1일까. 4도 아니고 5도 아니고 4.5라는, 어딘가 어중간해 보이는 이 숫자는 대체 어디서 튀어나온 걸까.
이 숫자는 국제 웹 접근성 표준에서 비롯됐다. 전 세계 웹의 접근성 기준을 정하는 국제 지침이 있고, 우리나라의 한국형 웹 접근성 지침(KWCAG)도 이 국제 기준과 보조를 맞추고 있다. 그 기준은 ‘웬만한 시력 저하가 있는 사람도 본문 글씨를 읽을 수 있으려면 글자와 배경의 대비가 최소 4.5:1은 되어야 한다’고 본다.
왜 4.5인가에 대한 배경은 이렇다. 사람의 시력은 나이가 들수록, 또 특정 조건에서 떨어진다. 표준 시력에서 일정 수준 떨어진 ‘약시’ 상태를 가정하고, 그 상태의 눈으로도 본문을 읽을 수 있게 하려면 어느 정도의 대비가 필요한지를 시각 연구로 따져봤더니, 본문 크기 글씨에서는 대략 4.5:1 언저리가 ‘읽힘과 안 읽힘의 경계선’으로 나타났다는 것이다. 즉 4.5:1은 누군가가 임의로 정한 ‘예쁜 숫자’가 아니라, ‘사람의 눈이 글씨를 읽어내는 한계’를 측정해서 나온 ‘근거 있는 경계선’이다.
이걸 다른 안전 기준에 빗대면 이해가 쉽다. 건물 계단의 높이나 난간의 간격에도 기준 수치가 있다. 그 수치는 누군가의 취향이 아니라 ‘사람 몸이 안전하게 오르내릴 수 있는 한계’를 따져 정한 것이다. 횡단보도 신호의 보행 시간도 마찬가지다. ‘가장 느리게 걷는 사람도 길을 건널 수 있는 시간’을 기준으로 잡는다. 색 대비 4.5:1도 똑같은 발상이다. ‘가장 약한 눈도 읽을 수 있는 최소한의 또렷함’을 숫자로 못 박아둔 것이다. 그래서 이 숫자는 ‘최소 기준’이지 ‘목표 기준’이 아니다. 4.5:1은 ‘여기까지는 와야 한다’는 바닥선이지, ‘여기까지만 하면 충분하다’는 천장선이 아니라는 점을 꼭 기억하자.
그리고 한 단계 더 엄격한 기준도 있다. 더 높은 수준의 접근성을 목표로 한다면 본문 대비를 7:1까지 끌어올리도록 권한다. 4.5:1이 ‘웬만한 사람은 읽는’ 수준이라면, 7:1은 ‘상당한 시력 저하가 있어도 읽는’ 수준이다. 공공 서비스처럼 사용자층이 넓고 ‘떠날 수 없는’ 서비스일수록, 가능하면 이 더 높은 기준을 지향하는 게 바람직하다. 다만 현실적으로 모든 요소를 7:1로 맞추기는 빠듯하니, ‘본문 핵심 정보는 7:1, 나머지는 최소 4.5:1’ 식의 우선순위 전략이 합리적이다.
여기서 4.5라는 숫자의 ‘느낌’을 한 번 더 잡아두자. 1:1은 글자와 배경이 완전히 같아 아무것도 안 보이는 상태, 21:1은 순흑 글씨에 순백 배경으로 가장 또렷한 상태다. 그 사이에서 4.5:1은 ‘딱 읽히기 시작하는 경계’쯤에 놓인다. 숫자만 보면 ‘21 중에 겨우 4.5? 한참 낮은 거 아니야?’ 싶지만, 휘도 계산이 비선형이라 4.5:1만 돼도 생각보다 또렷하다. 진한 남색 글씨에 흰 배경이면 이미 8:1을 훌쩍 넘는다. 중간 톤 회색 글씨에 흰 배경이 대략 4.5:1 언저리다. 그러니 ‘아주 진한 검정까진 아니어도, 적당히 진한 회색까지는 괜찮다’는 감을 잡으면 된다. 문제가 되는 건 그보다 더 연한, ‘배경에 슬쩍 녹아드는’ 회색들이다.
한 가지 오해도 풀어두자. 사람들은 종종 ‘대비를 높이려면 무조건 글씨를 새까맣게 해야 한다’고 생각한다. 그런데 순흑(완전한 검정)에 순백(완전한 흰색) 조합은 대비가 너무 강해서, 오래 읽으면 오히려 눈이 피로해진다는 의견도 있다. 그래서 실무에서는 글자를 ‘아주 진한 회색’으로, 배경을 ‘아주 옅은 회색’으로 살짝 눅여 쓰기도 한다. 핵심은 ‘새까맣게’가 아니라 ‘기준을 넘는 선에서, 눈이 편한 조합’을 찾는 것이다. 4.5:1을 넘기만 하면, 그 안에서 디자인적 여유를 부릴 공간은 충분히 있다.
【본론 2 — 왜 멋이 아니라 권리인가】
■ ‘연한 회색이 세련됐다’는 함정
요즘 웹 디자인 트렌드를 보면 ‘덜어내기’가 유행이다. 진한 색을 줄이고, 여백을 넉넉히 두고, 글씨도 연한 회색으로 톤을 낮춰 차분한 인상을 준다. 미니멀하고 세련된 느낌. 디자인 시안 회의에서 이런 화면이 올라오면 다들 ‘깔끔하다’고 고개를 끄덕인다. 나도 그랬다.
문제는 이 ‘세련된 연한 회색’이 색 대비의 가장 큰 적이라는 점이다. 흰 배경에 연한 회색 글씨는 디자이너의 고급 모니터에서는 충분히 읽힌다. 그런데 그 대비를 숫자로 재보면 4.5:1에 한참 못 미치는 경우가 허다하다. 2:1, 3:1 수준인 경우도 많다. 그 화면을 보급형 태블릿으로, 햇빛 아래에서, 노안이 온 눈으로 보면 글씨는 거의 ‘있는 듯 없는 듯’ 사라진다.
여기서 핵심을 짚자. 색 대비는 ‘디자인 취향’의 문제가 아니다. ‘읽을 수 있느냐 없느냐’의 문제다. 취향은 사람마다 다를 수 있지만, ‘읽힘’은 타협 대상이 아니다. 아무리 세련된 화면이라도 거기 적힌 글씨를 못 읽으면, 그 화면은 ‘예쁜 빈 종이’일 뿐이다. 특히 공공 서비스에서 그 빈 종이가 ‘민원 신청 안내’나 ‘서류 제출 마감일’이라면, 누군가는 그 정보를 못 읽어서 권리를 행사하지 못하게 된다. 멋이 권리를 가로막는 순간이다.
■ 떠날 수 없는 사용자를 생각하면
민간 쇼핑몰이라면 글씨가 안 보여서 불편하면 다른 쇼핑몰로 가면 그만이다. 하지만 공공 서비스는 다르다. 증명서를 떼고, 세금을 내고, 복지를 신청하고, 민원을 넣는 일은 ‘다른 사이트로 가면 되는’ 일이 아니다. 그 기관 사이트가 유일한 창구다. 떠날 수 없는 사용자가, 글씨가 안 보여서 서비스를 못 쓴다면, 그건 단순한 불편을 넘어 ‘서비스에서 배제되는’ 일이다.
게다가 공공 서비스의 사용자층은 민간보다 훨씬 넓다. 스무 살 대학생도, 여든 살 어르신도, 시각에 어려움이 있는 분도, 한국어가 서툰 외국인 주민도 같은 화면을 본다. 그중 누군가는 노안으로, 누군가는 색각 이상으로, 누군가는 저시력으로, 누군가는 그저 화면이 작은 구형 기기로 그 화면을 마주한다. 이 넓은 사용자층 중 가장 눈이 불편한 사람을 기준으로 삼지 않으면, 그 사람은 매번 벽에 부딪힌다.
그래서 색 대비를 챙기는 건 ‘특별한 누군가를 위한 배려’가 아니다. ‘모두가 언젠가 겪을 상태’에 대한 대비다. 노안은 나이가 들면 거의 모두에게 온다. 야외에서 햇빛 아래 화면을 보는 건 누구나 겪는 상황이다. 피곤한 눈, 어두운 조명, 깨진 화면 보호 필름 — 이 모든 ‘덜 이상적인 조건’에서 글씨가 읽히려면 대비에 여유가 있어야 한다. 색 대비를 충분히 확보한 사이트는 ‘시력 약한 사람만’ 돕는 게 아니라 ‘모든 사람이 덜 이상적인 조건에서도’ 읽을 수 있게 한다. 결국 접근성은 소수를 위한 게 아니라 다수를 위한 보험인 셈이다.
■ 그리고 이건 법의 문제이기도 하다
한 가지 분명히 해두자. 웹 접근성은 권장 사항이 아니라 법으로 규정된 의무다. 공공기관은 누구나 차별 없이 정보에 접근할 수 있도록 웹을 만들 법적 책임이 있다. 색 대비는 그 접근성 의무 중에서도 가장 기본적이고, 가장 측정하기 쉬우며, 그래서 가장 ‘안 지키면 변명하기 어려운’ 항목이다.
색 대비를 못 맞췄다는 건 ‘기술적으로 어려워서’가 아니다. 색 값 몇 개만 조정하면 되는 일이다. 그러니 색 대비 미달은 ‘몰라서’ 혹은 ‘안 챙겨서’ 생기는 문제다. 바꿔 말하면, 알기만 하면, 챙기기만 하면 거의 다 잡을 수 있는 항목이라는 뜻이다. 어려운 숙제가 아니라, 마음먹으면 점수를 확실히 올릴 수 있는 ‘효자 항목’인 셈이다.
생각해보면 접근성은 ‘배려’라는 단어로 자주 포장된다. ‘약자를 배려하는 마음으로 접근성을 챙기자’는 식이다. 좋은 말이지만, 나는 이 프레임이 오히려 접근성을 ‘선택’처럼 보이게 만든다고 생각한다. 배려는 안 해도 되는, 하면 칭찬받는 일이라는 뉘앙스가 있으니까. 그런데 공공 서비스의 접근성은 배려가 아니라 ‘기본’이다. 횡단보도에 턱을 낮추는 건 휠체어 이용자를 ‘배려’하는 게 아니라, 도로가 마땅히 갖춰야 할 ‘기본 설계’다. 색 대비도 마찬가지다. ‘시력 약한 분을 위해 특별히 챙기는 것’이 아니라, 글씨라면 마땅히 ‘읽히게’ 만드는 기본일 뿐이다. 이 관점 전환이 의외로 중요하다. ‘여유 있으면 챙기는 것’이 아니라 ‘안 챙기면 미완성인 것’으로 보면, 색 대비는 우선순위 뒤로 밀리지 않는다.
그리고 색 대비가 좋아지면 ‘모두가’ 편해진다는 점을 다시 강조하고 싶다. 또렷한 글씨는 시력이 좋은 사람도 더 빨리, 더 편하게 읽는다. 흔들리는 지하철 안에서, 한 손으로 폰을 쥔 채로, 졸린 눈으로 화면을 볼 때 — 또렷한 글씨는 누구에게나 고맙다. 접근성을 챙긴 사이트는 ‘약자만 쓸 수 있는 사이트’가 아니라 ‘모두가 더 편하게 쓰는 사이트’가 된다. 이걸 ‘커브컷 효과’라고 부른다. 보도블록의 턱을 깎은 경사로(커브컷)는 원래 휠체어를 위한 것이었지만, 유모차도, 캐리어를 끄는 여행자도, 자전거도 그 덕을 본다. 색 대비도 똑같은 커브컷이다. 소수를 위해 만든 것이 다수를 이롭게 한다.
【본론 3 — 본문·큰 글씨·아이콘의 기준은 왜 다른가】
■ 큰 글씨는 왜 3:1로 완화될까
색 대비 기준을 들여다보면 한 가지 흥미로운 점이 보인다. 본문 크기 글씨는 4.5:1을 요구하지만, ‘큰 글씨’는 3:1로 기준이 완화된다는 것이다. 왜 이렇게 다를까.
이유는 단순하다. 글씨가 크면 대비가 조금 낮아도 읽힌다. 멀리서도 큰 간판은 흐릿해도 알아볼 수 있지만, 작은 글씨는 또렷해야 읽히는 것과 같은 이치다. 글자가 굵고 크면 획과 획 사이가 넓어 형태가 분명해지고, 그만큼 대비가 부족해도 눈이 형태를 잡아낸다. 그래서 제목처럼 크고 굵은 글씨는 ‘3:1’이라는 다소 낮은 기준을 적용해도 가독성이 유지된다고 본다.
이 ‘크기와 굵기가 가독성을 보완한다’는 사실은 실무에서 꽤 유용하다. 예를 들어 큰 제목에 멋스러운 연한 색을 쓰고 싶을 때, 본문이라면 어림없을 색이라도 제목이라면 3:1만 넘기면 허용된다. 디자인의 숨통이 트이는 지점이다. 다만 함정도 있다. ‘큰 글씨처럼 보이지만 실제로는 본문 크기인’ 텍스트가 종종 있다. 화면에서 커 보여도 측정상 ‘큰 글씨’ 기준에 못 미치면 4.5:1을 적용해야 한다. 그래서 ‘이건 제목이니까 3:1이면 되겠지’라고 눈대중으로 판단하는 건 위험하다. 크기와 굵기를 정확히 따져 ‘큰 글씨’ 자격이 되는지 확인하고, 애매하면 보수적으로 4.5:1을 적용하는 게 안전하다. 결국 여기서도 ‘눈대중 대신 숫자’라는 원칙이 반복된다.
여기서 ‘큰 글씨’의 기준도 정해져 있다. 보통 ‘충분히 큰 일반 글씨’ 또는 ‘조금 작아도 굵은 글씨’를 큰 글씨로 친다. 즉 크기와 굵기를 함께 본다. 같은 크기라도 가는 글씨보다 굵은 글씨가 더 잘 읽히기 때문이다. 실무에서는 ‘제목·소제목처럼 시선을 끄는 큰 텍스트는 3:1, 본문·설명·라벨처럼 읽어야 하는 작은 텍스트는 4.5:1’로 기억하면 대체로 맞는다. 다만 헷갈릴 땐 무조건 더 엄격한 4.5:1을 적용하는 게 안전하다. 기준을 보수적으로 잡아서 손해 볼 일은 없다.
■ 글자만 색 대비가 아니다 — 아이콘과 테두리
색 대비라고 하면 보통 ‘글씨’만 떠올린다. 그런데 화면에는 글씨 말고도 ‘봐야 하는 것’이 많다. 버튼의 테두리, 입력칸의 경계선, 체크박스의 윤곽, 아이콘, 그래프의 선과 막대… 이런 ‘글자가 아닌 시각 요소’도 대비가 필요하다.
예를 들어 흰 배경에 연한 회색 테두리를 두른 입력칸을 떠올려보자. 디자인상으로는 깔끔하지만, 대비가 낮으면 사용자는 ‘여기가 입력하는 칸인지’조차 알아채기 어렵다. 어디를 눌러야 할지, 어디에 글씨를 써야 할지 모르는 화면은 그 자체로 접근성 장벽이다. 그래서 이런 ‘기능을 알려주는 시각 요소’에도 최소 3:1 정도의 대비가 권장된다.
특히 주의할 게 아이콘이다. 요즘은 글자 없이 아이콘만으로 기능을 표시하는 경우가 많다. 돋보기 모양 검색, 햄버거 모양 메뉴, 톱니바퀴 모양 설정… 그런데 이 아이콘이 배경과 대비가 약하면, 그 기능 자체가 사라진다. 게다가 아이콘은 글자보다 형태가 복잡하지 않아 ‘대충 비슷한 색’이면 더 안 보인다. 아이콘에도 충분한 대비를, 그리고 가능하면 글자 라벨을 함께 다는 게 좋은 이유다.
여기서 ‘초점 표시(포커스 인디케이터)’도 빼놓을 수 없다. 키보드만으로 사이트를 쓰는 사용자가 있다. 마우스를 못 쓰거나, 안 쓰는 분들이다. 이분들은 탭 키를 눌러 버튼과 링크 사이를 옮겨 다니는데, ‘지금 어디에 가 있는지’를 알려주는 게 초점 표시(보통 요소 둘레에 생기는 테두리)다. 그런데 이 초점 테두리가 배경과 대비가 약하면, 키보드 사용자는 ‘지금 내가 어느 버튼 위에 있는지’를 알 수 없다. 미로 속을 손전등 없이 더듬는 셈이다. 그래서 초점 표시에도 충분한 대비가 필요하고, ‘디자인상 거슬린다’고 초점 테두리를 아예 없애는 건 접근성 측면에서 가장 피해야 할 일 중 하나다.
또 하나, 상태를 알리는 색에도 대비가 필요하다. 입력칸에 글씨를 잘못 쓰면 테두리가 빨갛게 변하고, 잘 쓰면 초록으로 변하는 식의 ‘상태 색’ 말이다. 이 상태 색이 배경과 대비가 약하면, 사용자는 ‘내가 뭘 틀렸는지’ ‘제대로 됐는지’를 알아채지 못한다. 게다가 앞서 말한 ‘색만으로 정보 전달 금지’ 원칙과 겹쳐서, 빨강 테두리만으로 오류를 알리는 건 색각 이상 사용자에게는 통하지 않는다. 상태를 알릴 때는 색의 대비도 충분히 확보하고, 색 외에 아이콘이나 글자 안내도 함께 붙여야 한다. 결국 ‘봐야 하는 모든 것에는 대비가 필요하다’가 핵심 원칙이다. 글자든, 아이콘이든, 테두리든, 초점 표시든, 상태 색이든.
■ ‘색만으로 정보를 전달하지 않기’와의 연결
색 대비 이야기를 하다 보면 자연스럽게 만나는 또 하나의 원칙이 있다. ‘색만으로 정보를 전달하지 말라’는 것이다. 둘은 짝꿍 같은 원칙이다.
예를 들어 ‘필수 입력 항목은 빨간색으로 표시했습니다’라는 화면을 떠올려보자. 색을 구분하기 어려운 분에게 이 빨간색은 그냥 검은색과 비슷하게 보인다. 그러면 어디가 필수 항목인지 알 수 없다. 그래서 색만으로 ‘필수’를 표시하면 안 되고, ‘*’ 표시나 ‘(필수)’ 같은 글자를 함께 써야 한다. 색은 ‘덤’으로 쓰고, 핵심 정보는 색이 아닌 다른 방법으로도 전달해야 한다는 원칙이다.
색 대비가 ‘충분히 또렷한가’의 문제라면, 이 원칙은 ‘색에만 의존하지 않는가’의 문제다. 둘을 함께 챙겨야 비로소 ‘색에 관한 접근성’이 완성된다. 그래프에서 빨강·초록 선을 구분할 때 색만 다르게 하지 말고 실선·점선으로도 구분하고, 오류 메시지를 빨간 글씨로만 두지 말고 아이콘과 텍스트를 함께 붙이는 식이다. 이렇게 ‘색은 거들 뿐, 정보는 형태로도’ 원칙을 지키면, 색을 보지 못하는 사용자도 같은 정보를 얻는다.
색각 이상에 대해 조금만 더 풀어보자. 흔히 ‘색맹’이라고 뭉뚱그리지만, 실제로는 여러 유형이 있다. 가장 흔한 건 빨강과 초록을 구분하기 어려운 유형이다. 남성 중 상당한 비율이 어느 정도의 색각 이상을 가지고 있다고 알려져 있는데, 이건 결코 ‘드문 소수’가 아니다. 우리 사이트를 쓰는 사용자 스무 명 중 한 명꼴로 빨강·초록 구분에 어려움을 겪는다고 보면, ‘빨강은 오류, 초록은 정상’ 같은 색 구분이 얼마나 위험한지 실감이 난다. 그분들에게는 빨강 막대와 초록 막대가 거의 같은 톤의 막대로 보인다. 신호등이 위아래 위치로도 구분되는 이유, 지하철 노선도가 색뿐 아니라 번호로도 구분되는 이유가 다 여기에 있다.
그래서 ‘색약 시뮬레이션’이라는 방법도 쓴다. 우리 화면을 색각 이상이 있는 사람의 눈으로 보면 어떻게 보이는지를 흉내 내어 보여주는 것이다. 이걸 해보면, 멀쩡해 보이던 그래프가 ‘구분 안 되는 회색 덩어리’로 변하는 걸 직접 확인할 수 있다. 백 마디 설명보다 한 번 보는 게 강력하다. 디자인을 검수할 때, ‘색약 시뮬레이션을 거쳐도 정보가 살아남는가’를 한 번씩 점검하는 습관을 들이면 좋다. 색 대비 숫자가 통과해도, 색에만 의존한 정보 전달은 따로 잡아야 하기 때문이다.
정리하면, ‘색에 관한 접근성’은 두 다리로 선다. 한 다리는 ‘충분한 대비(4.5:1)’이고, 다른 다리는 ‘색만으로 정보를 전달하지 않기’다. 한쪽 다리만 챙기면 절뚝거린다. 대비는 통과했는데 빨강·초록만으로 상태를 표시했다면, 색각 이상 사용자는 여전히 막힌다. 반대로 색 외에 형태로도 구분했지만 글씨 자체가 흐릿하면, 저시력 사용자가 막힌다. 두 원칙을 한 묶음으로 챙겨야 비로소 ‘색에 걸려 넘어지는 사람이 없는’ 화면이 된다.
【본론 4 — KRDS와 KWCAG 안에서 색 대비의 자리】
■ 색 대비는 어디에 속하나
지금까지 색 대비 자체를 이야기했다면, 이제 이 항목이 ‘큰 그림’ 어디에 놓이는지를 짚어보자. 공공웹 담당자라면 두 가지 틀을 알아두면 좋다. 하나는 행정안전부의 「전자정부 웹사이트 품질관리 지침」 7대 영역이고, 다른 하나는 한국형 웹 접근성 지침(KWCAG)이다.
행정안전부 품질관리 지침은 공공 웹사이트가 갖춰야 할 품질을 일곱 갈래로 나눈다. 호환성, 접근성, 개방성, 접속성, 편의성, 효율성, 신뢰성이다. 색 대비는 이 중 ‘접근성’ 영역의 한복판에 있다. 접근성은 ‘누구나 차별 없이 정보에 접근할 수 있는가’를 보는 영역이고, 색 대비는 그 접근성을 떠받치는 가장 기본적인 받침대 중 하나다.
그리고 접근성을 좀 더 세부적으로 따지는 게 KWCAG, 한국형 웹 접근성 지침이다. KWCAG는 웹 접근성을 33개 항목으로 나눠 점검하는데, ‘텍스트 콘텐츠의 명도 대비’가 그 항목 중 하나로 명시돼 있다. 즉 색 대비는 KWCAG 33항목 안에 정식으로 들어가 있는, ‘반드시 점검받는’ 공식 항목이다. ‘챙기면 좋은 것’이 아니라 ‘점검표에 적혀 있는 것’이라는 뜻이다.
■ 846규칙과는 어떻게 연결되나
여기서 KRDS 이야기를 잠깐 곁들이자. KRDS는 공공 웹의 디자인 표준으로, 846개 규칙으로 이루어져 있다. 이 846개는 네 영역으로 나뉜다. 디자인 기반 요소인 DS가 120개, 화면 부품인 CP가 446개, 작은 흐름인 BP가 108개, 전체 여정인 SP가 172개. 합치면 정확히 846개다.
색 대비는 이 중 어디와 가장 가까울까. 색 자체의 기본 단위를 다루는 건 DS(디자인 기반 요소)다. 주 색, 보조 색, 강조 색, 경고 색처럼 색을 역할별로 정의하고, 그 색들이 배경 위에서 충분한 대비를 갖도록 설계하는 게 DS의 몫이다. 그리고 그 색이 실제 버튼·입력칸·아이콘 같은 부품에 입혀질 때 대비가 유지되는지를 보는 건 CP(컴포넌트)의 영역이다. 즉 색 대비는 ‘DS에서 잘 정의하고, CP에서 잘 지켜지는지 확인하는’ 항목이라고 보면 된다.
색 대비 이야기를 하다 846규칙이 나와 의아할 수 있는데, 짚고 넘어가는 이유가 있다. 색 대비는 ‘접근성’이라는 큰 우산 아래 있으면서, 동시에 ‘디자인 시스템’의 가장 밑바닥 토대이기도 하다. 다시 말해 색 대비는 접근성과 디자인 시스템이 만나는 교차점에 놓인 항목이다. 접근성 관점에서는 ‘누구나 읽을 수 있는가’를 묻고, 디자인 시스템 관점에서는 ‘색을 어떻게 정의하고 일관되게 쓰는가’를 묻는다. 이 두 질문의 답이 같은 곳에서 만난다. 색을 처음부터 ‘충분한 대비를 갖도록’ 정의해두면, 접근성도 챙기고 일관성도 챙기는 일석이조가 된다. 그래서 색 대비를 잘 다루는 일은 단순히 접근성 점수 하나 올리는 게 아니라, 사이트 전체의 디자인 기초 체력을 다지는 일과 통한다.
흥미로운 건, 잘 설계된 디자인 시스템을 따르면 색 대비는 ‘저절로’ 어느 정도 해결된다는 점이다. KRDS처럼 색을 역할별로 정의하고 그 색들이 충분한 대비를 갖도록 처음부터 설계해두면, 담당자가 매번 색을 새로 고를 때 생기는 ‘실수로 대비 낮은 색을 쓰는’ 일이 줄어든다. 표준 색 팔레트를 그대로 가져다 쓰면 대비 미달 위험이 크게 낮아진다. 디자인 시스템이 접근성을 떠받친다는 말이 여기서 실감 난다. 좋은 시스템은 ‘실수할 여지’ 자체를 줄여준다.
이 대목을 조금 더 풀어보자. 디자인 시스템에서 색을 다룰 때는 보통 ‘색 토큰’이라는 개념을 쓴다. 색 하나하나에 ‘주 색’ ‘본문 글자색’ ‘보조 글자색’ ‘배경색’ ‘경고색’ 같은 ‘역할 이름’을 붙여 변수처럼 관리하는 방식이다. 이렇게 해두면 좋은 점이 두 가지다. 첫째, 색을 바꿀 일이 생겨도 토큰 값 하나만 바꾸면 그 색을 쓰는 모든 곳이 한꺼번에 바뀐다. 둘째, 그리고 이게 접근성과 직결되는데, ‘본문 글자색 토큰’과 ‘배경색 토큰’의 조합이 이미 4.5:1을 넘도록 한 번만 설계해두면, 그 조합을 쓰는 모든 화면이 자동으로 기준을 통과한다. 색을 매번 손으로 고르지 않으니, 실수로 연한 회색을 집어넣을 일이 없어진다.
반대로 디자인 시스템 없이 페이지마다 색을 ‘그때그때 눈대중으로’ 고르면, 어느 페이지는 통과하고 어느 페이지는 미달하는 들쭉날쭉한 상태가 된다. 담당자가 바뀌면 또 새로운 색이 끼어든다. 그래서 색 대비를 ‘안정적으로’ 관리하려면, 개별 글씨를 일일이 고치는 것보다 ‘색 토큰 체계를 잡는 것’이 근본 해법이다. 물론 이건 하루아침에 되는 일이 아니다. 하지만 방향만큼은 분명하다. ‘페이지마다 색을 새로 정하는’ 방식에서 ‘검증된 색 조합을 가져다 쓰는’ 방식으로 옮겨가는 것. 그게 KRDS가 권하는 길이고, 그 길의 출발점은 ‘지금 우리 사이트의 색 대비가 어디서 무너지는지’를 정확히 아는 것이다.
■ 그런데 ‘기준이 있다’와 ‘지켜진다’는 다른 문제
여기서 가장 중요한 이야기를 해야겠다. 색 대비 기준이 있다는 것과, 그 기준이 우리 사이트에서 실제로 지켜지고 있다는 것은 전혀 다른 문제다.
아무리 좋은 기준이 있어도, 우리 사이트의 글씨 하나하나가 4.5:1을 넘는지 확인하지 않으면 기준은 문서로만 남는다. 그런데 이걸 사람이 일일이 확인하는 건 거의 불가능하다. 한 페이지에도 글씨가 수십 군데, 사이트 전체로는 수천 군데다. 각 글씨의 색 값과 그 뒤 배경색을 일일이 따서 대비를 계산하고, 4.5:1을 넘는지 확인하는 일을 사람이 하려면 며칠이 걸려도 모자란다. 게다가 사람 눈으로는 ‘이게 4.5인지 4.2인지’ 구분할 수도 없다.
그래서 색 대비는 ‘자동으로 측정해야 하는’ 대표적인 항목이다. 사람은 ‘기준을 알고 방향을 잡고’, 도구는 ‘수천 개의 글씨를 일일이 재서 어디가 미달인지 찾아낸다’. 이 역할 분담이 색 대비를 현실적으로 관리하는 유일한 방법이다. 다음 이야기에서 그 ‘자동 측정’이 실제로 어떻게 돌아가는지를 보자.
여기서 잠깐, 행정안전부 품질관리 지침의 7대 영역 전체를 한 번 더 짚어두면 큰 그림이 보인다. 호환성은 ‘여러 브라우저·기기에서 똑같이 보이는가’, 접근성은 ‘누구나 차별 없이 쓸 수 있는가’, 개방성은 ‘검색엔진과 외부가 정보에 접근할 수 있게 열려 있는가’, 접속성은 ‘끊김 없이 빠르게 연결되는가’, 편의성은 ‘쓰기 편한 기능을 갖췄는가’, 효율성은 ‘빠르게 뜨고 가볍게 돌아가는가’, 신뢰성은 ‘안전하고 믿을 수 있는가’를 본다. 색 대비는 이 중 ‘접근성’의 핵심이지만, 사실 이 일곱 영역은 서로 맞물려 있다. 글씨가 잘 안 보이면(접근성) 사용자는 화면을 다시 확대하느라 시간을 더 쓰고(효율성·편의성 저하), 결국 ‘이 사이트는 불편하다’는 신뢰의 문제로까지 번진다. 작은 색 대비 하나가 품질 전반에 잔물결을 일으키는 셈이다. 그래서 색 대비를 ‘접근성의 한 항목’으로만 좁게 보지 말고, ‘사이트 품질 전체의 기초 체력’으로 넓게 보면 좋겠다.
【본론 5 — 실무에서 색 대비가 무너지는 순간들】
■ 사례로 보는 흔한 실패 패턴
이제 실제로 색 대비가 어떻게 무너지는지, 익명 사례로 몇 가지를 보자. 어느 특정 기관의 이야기가 아니라, 여러 공공 사이트에서 반복적으로 나타나는 ‘전형적인 패턴’이라고 보면 된다.
첫째, ‘연한 회색 안내 문구’ 패턴이다. A광역지자체의 어느 안내 페이지를 떠올려보자. 본문은 진한 글씨로 잘 보이는데, 그 아래 ‘※ 자세한 내용은 첨부파일을 확인하세요’ 같은 부가 안내가 연한 회색으로 깔린다. 디자인상으로는 ‘덜 중요한 정보니까 흐리게’ 처리한 의도다. 그런데 정작 그 부가 안내에 ‘마감일’이나 ‘필수 준비물’ 같은 핵심 정보가 들어 있는 경우가 많다. 중요도가 낮아 보이게 디자인했지만, 사용자에게는 결코 사소하지 않은 정보다. 흐릿한 회색 때문에 그 정보를 놓치면, 사용자는 헛걸음을 하게 된다. 디자인에서 ‘덜 중요함’을 표현하는 방법은 ‘흐리게’ 말고도 많다. 글씨를 작게 하거나, 위치를 아래로 내리거나, 아이콘을 빼는 식으로도 위계를 줄 수 있다. 굳이 ‘안 보이게’ 만들 필요는 없다. 위계를 ‘흐림’으로만 표현하는 습관이 색 대비 미달의 단골 원인이다.
둘째, ‘브랜드 색 위의 흰 글씨’ 패턴이다. B공공기관 사이트의 주요 버튼이 기관 고유의 밝은 색 배경에 흰 글씨로 되어 있다고 해보자. 기관 색이 충분히 진하면 흰 글씨와 대비가 잘 맞는다. 그런데 기관 색이 노랑·연두·하늘색처럼 ‘밝은 계열’이면, 그 위의 흰 글씨는 대비가 형편없이 낮아진다. ‘우리 기관 색이니까’라는 이유로 가독성을 포기하는 경우다. 이럴 땐 글자색을 흰색 대신 진한 색으로 바꾸거나, 배경색을 더 진하게 조정해야 한다.
셋째, ‘이미지 위의 텍스트’ 패턴이다. C기관의 메인 화면 상단에 큼직한 사진을 깔고 그 위에 환영 문구를 얹는 경우다. 사진의 밝은 부분과 어두운 부분이 섞여 있어서, 글씨가 밝은 부분에 걸치면 흰 글씨가 사라지고 어두운 부분에 걸치면 검은 글씨가 사라진다. 사진은 위치에 따라 밝기가 제각각이라, 어느 글씨는 보이고 어느 글씨는 안 보이는 들쭉날쭉한 상태가 된다. 이럴 땐 글씨 뒤에 반투명 어두운 막을 깔거나, 글씨에 그림자나 외곽선을 넣어 배경과 분리해야 한다.
넷째, ‘비활성 요소’ 패턴이다. 누를 수 없는 버튼이나 입력 불가 항목을 ‘회색으로 흐리게’ 처리하는 건 흔한 관행이다. 비활성 상태를 알리기 위해 일부러 대비를 낮추는 것이다. 이 자체는 문제가 아니지만, 가끔 ‘활성인데 비활성처럼 흐린’ 요소가 섞여 들어가면 사용자는 누를 수 있는지 없는지 헷갈린다. 비활성 표현과 저대비 실수를 구분하는 일도 필요하다.
다섯째, ‘플레이스홀더 의존’ 패턴이다. 입력칸 안에 연한 회색으로 ‘이름을 입력하세요’ 같은 안내 글(플레이스홀더)을 넣는 경우다. 이 안내 글은 대개 대비가 아주 낮게 설정돼 있다. 디자인상 ‘입력하면 사라질 임시 글씨’라 흐리게 둔 것이다. 문제는 이 플레이스홀더를 ‘유일한 라벨’로 쓰는 경우다. 칸 위에 ‘이름’이라는 정식 라벨이 없고 안내 글만 있으면, 글씨를 입력하는 순간 안내가 사라져 ‘여기가 뭘 적는 칸이었는지’ 알 수 없게 된다. 게다가 그 흐린 안내 글 자체가 대비 미달이라 처음부터 잘 안 보인다. 플레이스홀더는 어디까지나 보조이고, 정식 라벨은 따로 또렷하게 두어야 한다.
여섯째, ‘다크 모드·테마 전환’ 패턴이다. 요즘은 밝은 테마와 어두운 테마를 함께 지원하는 사이트가 늘었다. 그런데 밝은 테마에서 대비를 잘 맞춰놓고, 어두운 테마는 색만 반전시켜 대충 만드는 경우가 있다. 밝은 배경에 어울리던 색이 어두운 배경 위에서는 전혀 다른 대비를 갖는다. 그래서 테마마다 색 대비를 따로 검증해야 한다. 한 테마만 통과했다고 안심하면, 다른 테마를 쓰는 사용자가 고스란히 피해를 본다.
이 여섯 가지 패턴을 보면 공통점이 보인다. 모두 ‘악의’가 아니라 ‘무심함’에서 비롯된다는 것이다. 누구도 일부러 글씨를 안 보이게 만들지 않는다. 다만 ‘내 눈엔 보이니까’ ‘덜 중요하니까 흐리게’ ‘디자인상 깔끔하니까’ 같은 작은 판단들이 쌓여 대비 미달을 만든다. 그래서 색 대비는 ‘나쁜 사람’의 문제가 아니라 ‘점검 체계’의 문제다. 의도가 선해도 점검이 없으면 새어 나간다. 반대로 점검 체계만 잘 갖추면, 선한 의도는 그대로 좋은 결과로 이어진다.
■ ‘디자인 멋’과 ‘대비’의 타협점 찾기
이쯤 되면 ‘그럼 다 진한 검정 글씨에 흰 배경만 쓰라는 거냐, 그럼 너무 밋밋하지 않냐’는 반론이 나올 만하다. 충분히 이해한다. 멋과 가독성이 늘 충돌하는 것처럼 느껴지니까.
하지만 실제로는 둘 다 잡을 방법이 많다. 핵심은 ‘읽어야 하는 텍스트’와 ‘분위기를 내는 요소’를 구분하는 것이다. 본문·라벨·버튼 글씨처럼 ‘읽혀야만 하는’ 텍스트는 대비를 확실히 확보하고, 배경 패턴·장식 그래픽·큰 제목의 분위기 연출 같은 ‘읽지 않아도 되는’ 요소에서 멋을 부리면 된다. 멋을 포기하라는 게 아니라, ‘멋 부릴 곳과 또렷해야 할 곳을 분리하라’는 이야기다.
또 하나, 연한 회색을 꼭 쓰고 싶다면 ‘연한 정도’를 숫자로 확인하면 된다. 눈대중으로 ‘이 정도면 보이겠지’ 하지 말고, 그 회색이 배경 위에서 4.5:1을 넘는지 재보는 것이다. 의외로 ‘충분히 멋스러우면서도 대비는 통과하는’ 회색 톤이 존재한다. 흔히 ‘회색은 안 된다’고 오해하는데, 정확히는 ‘너무 연한 회색이 안 되는’ 것이다. 적당히 진한 회색은 충분히 세련되면서도 기준을 통과한다. 그 경계를 숫자로 확인하는 습관만 들이면, 멋과 가독성은 얼마든지 공존한다.
여기서 외주 검수 상황에 대한 조언도 하나 보태고 싶다. 디자인 시안을 받았을 때, ‘이 회색 글씨 좀 더 진하게 해주세요’라고 막연히 말하면 업체는 ‘얼마나요?’라고 되묻는다. 그 ‘얼마나’를 또 눈대중으로 정하면 같은 실랑이가 반복된다. 대신 ‘이 텍스트는 본문이니 배경 대비 4.5:1 이상으로 맞춰주세요’라고 기준을 명시하면, 대화가 단번에 끝난다. 업체는 그 기준에 맞는 색 값을 가져오고, 발주처는 ‘그 색이 정말 4.5:1을 넘는지’만 확인하면 된다. 모호한 ‘느낌’의 핑퐁이 ‘숫자’의 검증으로 바뀌는 순간이다. 이게 색 대비라는 항목의 가장 큰 실무적 매력이다. 다른 디자인 요소는 ‘취향 다툼’이 되기 쉬운데, 색 대비는 ‘숫자로 끝나는’ 명쾌한 항목이라는 점.
덧붙여, 색 대비를 ‘제안요청서’ 단계에서부터 못 박아두는 것도 좋은 전략이다. 사업을 발주할 때 ‘본문 텍스트 색 대비 4.5:1 이상, 웹 접근성 지침 준수’를 산출물 요건에 명시해두면, 업체는 처음부터 그 기준을 염두에 두고 디자인한다. 나중에 ‘이거 안 보여요, 고쳐주세요’ 하며 추가 비용과 시간을 쓰는 것보다, 처음에 기준을 박아두는 게 훨씬 싸게 먹힌다. 접근성은 ‘나중에 덧칠하는 것’보다 ‘처음부터 설계에 녹이는 것’이 압도적으로 효율적이다. 색 대비도 예외가 아니다.
■ 한 번 잡으면 끝이 아니라는 점
색 대비에서 또 하나 놓치기 쉬운 게 ‘유지’의 문제다. 처음 사이트를 만들 때 대비를 잘 맞췄어도, 운영하면서 새 페이지가 추가되고, 새 배너가 올라가고, 담당자가 바뀌면서 새로운 색이 슬그머니 섞여 들어온다. 그러다 보면 어느새 곳곳에 대비 미달 요소가 다시 생긴다. 색 대비는 ‘한 번 잡고 끝’이 아니라 ‘계속 지켜보는’ 항목이라는 뜻이다.
그래서 정기적인 점검이 필요하다. 분기마다, 혹은 큰 개편이 있을 때마다 사이트 전체의 색 대비를 다시 측정해서 ‘새로 생긴 미달 요소’를 찾아내는 것이다. 이걸 사람이 매번 하긴 어렵다. 그래서 자동 진단 도구로 주기적으로 스캔하는 체계를 갖춰두면, 새로 생긴 문제를 빠르게 잡을 수 있다. 색 대비 관리는 ‘건강검진’과 비슷하다. 한 번 건강하다고 평생 건강한 게 아니듯, 한 번 통과했다고 영원히 통과인 게 아니다.
【본론 6 — 자동 검사가 색 대비를 떠받친다】
■ 왜 자동 검사여야 하는가
앞에서 여러 번 말했듯, 색 대비는 ‘사람이 일일이 확인하기 불가능한’ 항목이다. 정리해보자. 첫째, 글씨가 너무 많다. 사이트 전체에 수천, 수만 개의 텍스트 요소가 있다. 둘째, 사람 눈으로는 정확한 대비 값을 알 수 없다. ‘이게 4.5인지 4.3인지’를 눈으로 구분하는 건 불가능하다. 셋째, 배경이 복잡하면 더 어렵다. 그라데이션 배경, 이미지 위 텍스트, 겹쳐진 요소들의 실제 대비는 계산이 까다롭다.
이 세 가지 이유 때문에 색 대비는 ‘자동 검사의 대표 항목’이 됐다. 자동 검사 도구는 화면의 각 텍스트 요소에서 글자색과 실제 배경색을 추출하고, 둘의 대비를 계산해서 4.5:1(혹은 큰 글씨면 3:1) 기준을 넘는지 자동으로 판정한다. 사람이 며칠 걸릴 일을 몇 초 만에, 그것도 빠짐없이 해낸다. 게다가 사람의 ‘이 정도면 됐겠지’라는 주관이 끼어들 여지가 없다. 숫자는 거짓말하지 않는다.
다만 자동 검사에도 한계는 있다. 솔직하게 짚고 가자. 글자색과 단색 배경의 대비는 기계가 정확히 잰다. 그런데 ‘이미지 위의 텍스트’처럼 배경이 사진이거나 그라데이션이면, ‘어느 지점의 배경색’을 기준으로 잴지가 애매하다. 글씨 한 줄이 밝은 곳과 어두운 곳에 걸쳐 있으면 부분마다 대비가 다르다. 또 글씨에 그림자나 외곽선이 들어가 있으면, 그것까지 고려한 ‘실제 가독성’은 단순 대비 계산으로 다 잡히지 않는다. 그래서 자동 검사는 ‘대부분의 단순한 경우를 빠짐없이 잡고, 까다로운 일부는 사람이 한 번 더 보도록 표시’하는 방식으로 굴러간다. 기계가 100%를 대신해주는 건 아니지만, 사람이 절대 못 하는 ‘수천 개를 빠짐없이 1차로 걸러내는’ 일을 해주는 것만으로도 가치는 충분하다.
이 ‘사람과 기계의 역할 분담’을 다시 강조하고 싶다. 기계는 ‘어디가 의심스러운지’를 빠짐없이 찾아낸다. 사람은 그 의심스러운 목록을 받아 ‘정말 문제인지, 어떻게 고칠지’를 판단한다. 기계가 1차 필터, 사람이 2차 판단. 이 분업이 깨지면 둘 다 무너진다. 기계 없이 사람만 하면 빠뜨리고 지치고, 사람 없이 기계만 믿으면 맥락을 놓친다. 색 대비를 잘 관리하는 조직은 이 둘을 잘 엮어 쓴다.
■ ViewCheck는 색 대비를 어떻게 다루나
여기서 우리가 만드는 ViewCheck 이야기를 잠깐 해야겠다. ViewCheck는 공공 웹사이트의 KRDS 준수와 웹 접근성을 자동으로 진단하는 서비스다. 색 대비는 그중 ‘웹 접근성(KWCAG)’ 분석에서 핵심으로 다루는 항목이다.
ViewCheck는 사이트 주소만 넣으면 페이지를 실제로 불러와 화면을 그대로 분석한다. 그 과정에서 텍스트 요소의 글자색과 배경색을 추출해 대비를 계산하고, 기준에 미달하는 곳을 찾아낸다. KWCAG 33항목을 자동으로 점검하는 흐름 안에서, ‘텍스트 명도 대비’ 항목이 통과인지 미달인지를 가려준다. 사람이 눈대중으로 ‘잘 보이는 것 같은데’ 하던 일을, 숫자로 확정해주는 것이다.
특히 ViewCheck는 단일 페이지가 아니라 사이트 전체, 즉 여러 페이지를 한 번에 분석하는 걸 기본으로 한다. 메인 한 페이지만 잘 챙겨놓고 안심하는 경우가 많은데, 정작 문제는 메인보다 안쪽 페이지에서 더 많이 터진다. 안내 페이지, 신청 페이지, 게시판 상세 페이지처럼 손이 덜 가는 곳에 대비 미달이 숨어 있다. 여러 페이지를 한꺼번에 훑어서 ‘사이트 전체에서 어디가 약한지’를 보여주는 게 중요한 이유다.
이 ‘안쪽 페이지’ 이야기를 조금 더 하고 싶다. 사이트를 만들 때 가장 공들이는 건 단연 메인 화면이다. 윗선이 보는 것도, 외부에 자랑하는 것도 메인이니까. 그래서 메인은 디자인도, 색 대비도 잘 챙겨져 있는 경우가 많다. 그런데 국민이 실제로 ‘일을 보는’ 곳은 메인이 아니다. 증명서를 떼는 신청 페이지, 안내를 읽는 상세 페이지, 양식을 채우는 입력 페이지다. 이 깊숙한 곳일수록 손이 덜 가고, 외주 업체가 ‘공통 양식’으로 찍어낸 경우가 많아 색 대비가 들쭉날쭉하다. 메인만 보고 ‘우리 사이트 괜찮네’ 하는 건, 현관만 청소하고 집 안은 안 들여다본 것과 같다. 진짜 점검은 안쪽 페이지에서 이뤄져야 한다.
게다가 사이트는 ‘살아 있는’ 존재다. 새 공지가 올라가고, 새 배너가 걸리고, 새 게시물이 쌓인다. 그때마다 새로운 색, 새로운 이미지, 새로운 텍스트가 들어온다. 오늘 통과한 사이트가 한 달 뒤엔 또 어딘가 미달이 생길 수 있다. 그래서 색 대비 점검은 ‘출시 전 한 번’으로 끝낼 게 아니라, 주기적으로 사이트 전체를 다시 훑는 게 맞다. 분기마다 한 번씩이라도 전체를 자동으로 스캔해두면, 새로 생긴 문제를 일이 커지기 전에 잡을 수 있다.
■ 점수 카드로 한눈에 보는 진단 결과
ViewCheck로 분석을 돌리면, 결과 화면 상단에 점수 카드가 뜬다. 디자인·컴포넌트·기본 패턴·서비스 패턴 같은 KRDS 영역별 점수와 함께, 접근성·보안·성능 같은 품질 영역 점수가 한눈에 정리된다. 색 대비 관련 결과는 이 중 접근성 영역과 웹 접근성(KWCAG) 분석 탭에서 확인할 수 있다. ‘우리 사이트의 색 대비, 지금 몇 점인가’를 숫자와 등급으로 바로 볼 수 있다는 뜻이다.
여기서 중요한 건, 이 점수가 ‘혼내려는 점수’가 아니라 ‘방향을 잡아주는 점수’라는 점이다. 색 대비 미달이 어디에 몇 군데 있는지 구체적으로 짚어주면, 담당자는 ‘어디부터 손대야 할지’를 명확히 알 수 있다. 막연히 ‘접근성 좀 챙겨야 하는데’ 하던 고민이, ‘이 페이지의 이 글씨 색을 이만큼 진하게’라는 구체적인 할 일로 바뀐다. 자동 진단의 진짜 가치는 ‘점수’가 아니라 ‘구체적인 행동 목록’을 만들어준다는 데 있다.
그리고 이 점수 카드는 보고용으로도 쓸모가 크다. 공공 조직에서 ‘접근성을 개선했다’는 성과는 추상적이라 윗선에 설득하기 어렵다. ‘열심히 챙겼습니다’라는 말로는 와닿지 않는다. 그런데 ‘개선 전 접근성 점수에서 개선 후 점수로 올랐고, 색 대비 미달 항목을 해소했습니다’라고 숫자로 보고하면, 성과가 또렷해진다. 막연한 노력을 측정 가능한 성과로 바꿔주는 것이다. 또 분기마다 점수를 기록해두면, 사이트 품질이 시간에 따라 어떻게 변하는지 추이도 볼 수 있다. ‘유지보수 중에 슬그머니 점수가 떨어지는’ 것도 잡아낼 수 있다. 진단은 일회성 사진이 아니라, 사이트의 건강을 꾸준히 기록하는 ‘건강 일지’가 되는 셈이다.
【 마무리 】
긴 이야기를 정리해보자. 오늘 우리는 ‘색 대비’라는, 사소해 보이지만 웹 접근성의 가장 기본인 항목을 들여다봤다.
핵심은 이렇다. 첫째, 색 대비는 ‘잘 보인다’는 주관적 느낌을 숫자로 바꾼 값이고, 본문 글씨는 최소 4.5:1, 큰 글씨는 3:1이라는 기준이 있다. 둘째, 4.5:1은 누군가의 취향이 아니라 ‘가장 약한 눈도 읽을 수 있는 최소한의 또렷함’을 측정해 정한 근거 있는 경계선이다. 셋째, 색 대비는 디자인 멋의 문제가 아니라 ‘떠날 수 없는 사용자’의 권리이자 법적 의무의 문제다. 넷째, 글자뿐 아니라 아이콘·테두리 같은 시각 요소에도 대비가 필요하고, ‘색만으로 정보를 전달하지 않기’ 원칙과 짝을 이룬다. 다섯째, 색 대비는 KWCAG 33항목에 정식으로 들어 있고, KRDS의 DS·CP 영역과 맞닿아 있다. 여섯째, 기준이 있는 것과 지켜지는 것은 다르며, 수천 개의 글씨를 일일이 재는 일은 자동 검사로만 현실적으로 가능하다.
조금 다른 각도에서도 정리해두고 싶다. 색 대비를 챙긴다는 건 결국 ‘내 눈을 기준으로 삼지 않는 연습’이다. 사람은 누구나 자기 눈으로 세상을 본다. 디자이너는 자기 모니터로, 담당자는 자기 사무실 조명 아래서, 자기 나이의 시력으로 화면을 본다. 그러다 보면 ‘내게 보이는 것’을 ‘모두에게 보이는 것’으로 착각하기 쉽다. 색 대비 기준은 이 착각을 깨는 장치다. ‘네 눈 말고, 가장 약한 눈을 기준으로 재라’고 말해준다. 이건 단지 기술적인 규칙이 아니라, 공공 서비스를 만드는 사람이 가져야 할 태도에 가깝다. 내 편의가 아니라 가장 어려운 사용자의 처지에서 출발하는 것. 색 대비는 그 태도를 ‘4.5:1’이라는 측정 가능한 숫자로 번역해둔, 가장 친절한 출발점이다.
가장 강조하고 싶은 건 마지막 대목이다. 색 대비는 ‘마음먹으면 확실히 잡을 수 있는’ 효자 항목이다. 어려운 기술이 필요한 게 아니라, ‘우리 사이트 어디가 미달인지’만 알면 색 값 몇 개 조정으로 점수가 쑥 오른다. 문제는 ‘어디가 미달인지’를 사람 눈으로는 알 수 없다는 것뿐이다. 그 ‘어디’를 찾아주는 게 자동 진단의 역할이다.
한 가지 당부를 덧붙이고 싶다. 색 대비 점검 결과를 받아 들었을 때, ‘미달이 이렇게 많다니’ 하고 주눅 들 필요는 전혀 없다. 처음 진단을 돌리면 대부분의 공공 사이트에서 색 대비 미달이 꽤 나온다. 그건 그 사이트가 ‘나쁜’ 사이트라서가 아니라, 지금까지 ‘잴 방법’이 없었기 때문이다. 재본 적 없으니 모르고 지나간 것뿐이다. 진단의 가치는 ‘혼내기’가 아니라 ‘몰랐던 걸 알게 해주기’에 있다. 알게 되면 고칠 수 있고, 고치면 점수가 오른다. 색 대비는 앞서 말했듯 손대면 확실히 잡히는 효자 항목이라, 첫 진단에서 미달이 많이 나올수록 ‘개선 폭이 크다’는 뜻이기도 하다. 그러니 결과를 ‘성적표’가 아니라 ‘개선 지도’로 받아들이면 좋겠다.
처음에 어머니 댁 이야기로 시작했다. 그날 나는 화면을 진한 글씨로 바꿔드리고 나서야 어머니가 “이제 잘 보인다”고 하시는 걸 들었다. 누군가에게 ‘잘 보이는 화면’은 당연한 게 아니라, 누군가가 챙겨야 비로소 만들어지는 것이다. 공공 웹을 만드는 우리가 그 ‘누군가’다. 다음 글에서는 색 대비에 이어, 영상의 자막과 화면 낭독(스크린리더) 이야기로 접근성의 또 다른 축을 풀어보려 한다. 오늘은 여기까지. 우리 사이트의 글씨가, 모두에게 또렷하길 바라며.
키워드/태그: #KRDS #공공웹 #웹접근성 #KWCAG #색대비 #명도대비 #접근성진단 #전자정부 #디자인시스템 #자동검사 #공공웹사이트 #ViewCheck