재고가 없는 상품 옆에 빨간 글씨로 '품절'이라고 적어 두셨을 겁니다. 진행 중인 주문에는 초록 점을, 문제가 생긴 주문에는 빨간 점을 찍어 두셨을 수도 있고요. 화면을 만든 사람 눈에는 명확합니다. 그런데 손님 스무 명 중 한 명은 그 빨강과 초록을 거의 같은 색으로 봅니다. 그 손님은 품절 표시를 못 읽은 채 장바구니에 담고, 결제 직전에야 안 된다는 걸 알고 창을 닫습니다.
여기에 한 가지가 더 겹칩니다. 색각이상이 없는 손님도 한낮 실외에서 휴대폰을 보면 연회색 글씨는 그냥 안 보입니다. 화면 밝기를 낮춰 둔 손님, 오래된 저가형 디스플레이를 쓰는 손님도 마찬가지고요. 결국 '색이 잘 안 읽히는 손님'은 소수가 아니라, 상황에 따라 누구나 됩니다.
다행히 이건 감성의 문제가 아니라 숫자의 문제라서, 확인도 수정도 반나절이면 끝납니다. 작은 회사 웹사이트가 색 때문에 손님을 놓치지 않는 다섯 가지 원칙을 정리했습니다.
1. 색은 정보를 '거들 뿐', 혼자 나르게 두지 않는다
가장 먼저 점검할 것은 색만 없애도 뜻이 통하는가입니다. 사이트를 흑백으로 만들어 놓고 봤을 때 의미가 사라지는 지점이 있다면, 그곳이 정확히 손님을 잃는 지점입니다.
- 품절 표시가 빨간 글씨뿐이라면 → 회색 처리 + '품절' 배지 + 버튼 비활성화까지 함께
- 필수 입력 항목이 빨간 별표뿐이라면 → 라벨에 '(필수)' 글자를 함께
- 그래프의 계열 구분이 색뿐이라면 → 선 모양(실선·점선)이나 직접 라벨을 함께
- 링크가 파란 글씨뿐이라면 → 밑줄이나 화살표 기호를 함께
규칙은 간단합니다. 색은 '더 빨리 알아채게 하는' 보조 신호이지, 유일한 신호가 되어서는 안 됩니다. 아이콘 하나, 단어 하나만 덧붙이면 대부분 해결됩니다.
2. 본문은 4.5 대 1, 큰 글씨는 3 대 1 — 눈으로 말고 숫자로 확인한다
'이 정도면 읽히겠지'는 만든 사람의 눈이지 손님의 눈이 아닙니다. 국제 표준(WCAG)은 글자색과 배경색의 밝기 차이를 명도 대비라는 숫자로 정해 두었습니다.
- 본문 글자(약 16px 이하): 4.5 대 1 이상
- 큰 글자(약 19px 이상 굵은 글씨, 24px 이상 보통 글씨): 3 대 1 이상
- 버튼 테두리, 입력칸 선, 아이콘 등 의미 있는 도형: 3 대 1 이상
확인은 도구가 대신 해 줍니다. 크롬 개발자도구에서 글자를 선택하면 대비값이 바로 표시되고, 웹에서 색상 코드 두 개만 넣으면 계산해 주는 대비 검사기도 많습니다. 브랜드 색과 흰 배경 조합, 버튼 배경과 버튼 글자 조합, 이 두 가지만 먼저 재 보셔도 절반은 잡힙니다.
3. 가장 먼저 사라지는 건 '연회색 안내문'이다
실무에서 대비 미달이 가장 자주 발견되는 곳은 정작 본문이 아닙니다. 디자인을 정돈해 보이게 하려고 흐리게 처리한 부분들입니다.
- 입력칸 안내 문구(placeholder) — 연회색 위 연회색이면 손님은 무엇을 넣어야 하는지 못 읽습니다. 안내는 입력칸 위 라벨로 올리세요.
- 사진 설명, 날짜, 작성자 같은 캡션 — 작을수록 대비는 더 높아야 합니다.
- 비활성 버튼 — 눌러도 소용없다는 표시는 필요하지만, 무슨 버튼인지는 읽혀야 합니다.
- 푸터의 회사 정보 — 사업자번호와 연락처가 배경에 묻히면 신뢰 정보가 통째로 사라집니다.
흐릿함으로 위계를 만들지 마세요. 위계는 크기와 굵기, 여백으로 만드는 것이 안전합니다.
4. 빨강·초록 짝을 피하고, 파랑·주황 축으로 바꾼다
가장 흔한 색각이상은 빨강과 초록의 구분이 어려운 유형입니다. 그래서 '성공은 초록, 실패는 빨강'이라는 오래된 관습이 하필 가장 위험한 조합이 됩니다.
실무에서 바로 쓸 수 있는 대안은 이렇습니다.
- 상태 구분을 파랑 계열과 주황 계열로 바꿉니다. 대부분의 색각 유형에서 이 축은 잘 구분됩니다.
- 빨강·초록을 꼭 써야 한다면 밝기 차이를 크게 벌립니다. 어두운 붉은색과 밝은 연두처럼요.
- 차트에서 색 종류는 다섯 개 이하로 줄이고, 범례 대신 각 항목 옆에 직접 이름을 붙입니다.
- 지도나 배지처럼 색 덩어리가 많은 화면은 무늬(빗금·점)를 함께 씁니다.
브라우저 개발자도구에는 색각이상 시뮬레이션 기능이 들어 있습니다. 렌더링 탭에서 세 가지 유형으로 전환해 보면, 지금 화면이 어떻게 보이는지 1분 만에 확인할 수 있습니다.
5. 브랜드 색은 지키되, '글자용 색'을 따로 만든다
여기서 많은 사장님이 막힙니다. "우리 브랜드 색이 밝은 노랑인데, 그럼 못 쓰나요?"
쓰셔도 됩니다. 다만 브랜드 색과 글자에 쓰는 색을 분리하면 됩니다. 실무에서는 보통 이렇게 나눕니다.
- 면(面)용 색 — 배경, 배너, 아이콘 배경처럼 넓게 칠하는 곳. 여기는 원래 브랜드 색을 그대로 씁니다.
- 글자용 색 — 같은 색조를 유지하되 명도를 두세 단계 낮춘 진한 버전. 흰 배경에서 4.5 대 1을 넘기게 조정합니다.
- 버튼 조합 — 밝은 브랜드 색 배경에는 흰 글씨가 아니라 진한 남색이나 검정 글씨를 얹습니다. 노란 버튼에 흰 글씨는 거의 항상 미달입니다.
이렇게 두 벌을 만들어 스타일 규칙에 적어 두면, 나중에 페이지를 늘릴 때마다 매번 고민할 일이 없어집니다. 브랜드 인상은 그대로 두면서 읽히는 문제만 떼어내 해결하는 방식입니다.
반나절이면 끝나는 점검 순서
당장 해 보실 수 있는 순서로 정리하면 이렇습니다.
- 홈, 상품(서비스) 상세, 문의 페이지를 흑백으로 놓고 뜻이 통하는지 본다
- 브랜드 색 + 흰 배경, 버튼 배경 + 버튼 글자, 이 두 조합의 대비값을 잰다
- 입력칸 안내 문구와 푸터 회사 정보의 색을 진하게 올린다
- 상태 표시에서 빨강·초록 짝을 찾아 아이콘이나 글자를 덧붙인다
- 정해진 색을 스타일 규칙 문서에 '면용/글자용'으로 나눠 적어 둔다
이 다섯 줄이 접근성 인증을 위한 절차처럼 보일 수 있지만, 실제 효과는 훨씬 현실적입니다. 밝은 야외에서 폰을 보는 손님, 화면 밝기를 낮춰 둔 손님, 나이가 들어 대비 감각이 떨어진 손님까지 모두 같은 혜택을 받습니다. 결국 가장 잘 읽히는 화면이 가장 많이 팔리는 화면입니다.
CYAN에서 웹사이트를 만들 때는 브랜드 색을 정하는 단계에서 이미 '면용 색'과 '글자용 색'을 함께 뽑아 둡니다. 나중에 대비 문제로 색을 다시 고르는 일이 생기지 않도록요. 지금 쓰고 계신 사이트의 색이 손님에게 제대로 읽히고 있는지 궁금하시다면, 대비값만 훑어 봐도 답이 꽤 빨리 나옵니다.
