대비비와 색 거리를 함께 보는 이유
웹 접근성 기준에서 말하는 대비비는 두 색의 밝기 차이만 봅니다. 검정 글자와 흰 배경이 21:1로 가장 높고, 4.5:1이 본문 글자의 최소선입니다. 그런데 색각 이상은 밝기 감각을 크게 바꾸지 않습니다. 빨강과 초록을 구분하지 못하는 사람도 밝은 색과 어두운 색은 그대로 구분합니다. 그래서 대비비만 보면 "문제없음"이 나오는 조합이 실제로는 두 색이 똑같아 보이는 경우가 생깁니다. 이 도구가 대비비 옆에 색 거리를 함께 표시하는 이유입니다. 색 거리는 두 색이 얼마나 다른 색으로 느껴지는지를 재며, 12 아래면 사실상 같은 색으로 봅니다.
가장 흔한 것은 적록 계열
색각 이상 가운데 압도적으로 흔한 것은 빨강과 초록 계열을 구분하기 어려운 유형입니다. 한국인 남성의 약 5~6%, 여성의 0.4% 정도로 보고되며, 학급에 남학생이 스무 명이면 한 명쯤 있다고 보면 됩니다. 그래서 실무에서 가장 자주 문제가 되는 조합도 정해져 있습니다. 빨간 글씨(오류)와 초록 글씨(정상), 빨간 막대와 초록 막대로만 구분한 차트, 초록 체크와 빨간 엑스만 있는 표가 그렇습니다. 반면 청황 계열(Tritanopia)은 매우 드물어 실무에서 우선순위가 낮지만, 파랑과 초록을 나란히 쓰는 조합에서는 확인해 볼 가치가 있습니다.
기준을 4.5로 둘지 3으로 둘지
본문 크기의 글자는 4.5:1이 기준입니다. 큰 글씨는 3:1로 완화되는데, 여기서 "큰 글씨"는 대략 18pt(24px) 이상 보통 굵기나 14pt(18.66px) 이상 굵은 글씨를 말합니다. 버튼 테두리, 아이콘, 입력창 경계처럼 글자가 아닌 요소도 3:1이 기준입니다. AAA 등급인 7:1은 공공기관 사이트나 저시력 사용자를 명시적으로 고려하는 서비스에서 목표로 삼습니다. 다만 이 값들은 최소선이지 목표선이 아닙니다. 4.6:1로 아슬아슬하게 통과한 조합은 화면 밝기를 낮추거나 야외에서 보면 곧바로 읽기 어려워집니다.
색을 바꾸기 전에 할 수 있는 것
브랜드 색이 정해져 있어서 색을 바꾸기 어려운 경우가 많습니다. 그럴 때는 색 대신 다른 신호를 하나 더 얹는 편이 빠릅니다. 오류 메시지에는 느낌표 아이콘을, 성공에는 체크 아이콘을 붙이고, 차트에서는 선의 모양(실선·점선)이나 패턴을 다르게 하며, 링크에는 밑줄을 남깁니다. 표에서는 색칠 대신 "정상 / 확인 필요" 같은 글자 라벨을 넣습니다. 이렇게 하면 색각 이상뿐 아니라 흑백 인쇄, 화면 캡처의 색 왜곡, 강한 햇빛 아래에서도 같은 정보가 전달됩니다. 색은 보조 수단으로 두고 뜻은 다른 곳에 담는 것이 원칙입니다.
자주 묻는 질문
대비비가 상태별로 거의 안 변하는데 계산이 맞나요?
맞습니다. 색각 이상은 색을 구분하는 감각에 영향을 주고 밝기 감각은 대체로 유지되기 때문에, 밝기 차이로 계산하는 대비비는 크게 달라지지 않습니다. 그래서 이 도구는 대비비만 보지 않고 색 거리를 함께 보여 줍니다. 문제가 있는 조합은 대비비가 아니라 색 거리 쪽에서 드러납니다.
제안된 대안 색을 그대로 써도 되나요?
출발점으로 쓰시면 됩니다. 원래 색의 색상 계열은 유지하고 밝기만 옮겨 기준을 넘긴 첫 값을 제시하는 방식이라, 브랜드 색과 계열은 비슷하게 유지됩니다. 다만 실제 화면에서는 주변 색이나 폰트 굵기에 따라 느낌이 달라지므로 적용해 보고 조정하세요.
이미지나 화면 전체를 확인하려면요?
색각 이상 시뮬레이터 도구를 쓰세요. 스크린샷이나 차트 이미지를 통째로 변환해 나란히 보여 줍니다. 이 도구는 색 두 가지의 조합을 수치로 판정하는 쪽에 맞춰져 있어서, 디자인 시안 전체를 볼 때는 시뮬레이터가 더 빠릅니다.