색각 이상을 고려한 차트 만들기

차트는 기술적으로 정확해도 독자가 이해하지 못하게 만들 수 있습니다. 흔한 원인은 색에 모든 역할을 떠넘긴 것입니다. 빨간 선이 어떤 뜻이고 초록 선이 다른 뜻이며, 범례가 유일한 열쇠인 상태입니다. 색각 이상이 있는 사람에게는, 그리고 반사광 아래에서, 화질이 나쁜 화면에서, 또는 흑백으로 차트를 보는 많은 사람에게 이는 불필요한 장벽이 됩니다.

해법은 색을 쓰지 않는 것이 아니라, 색을 여러 단서 가운데 하나로 쓰는 것입니다. 이 안내는 그 원칙을 차트, 대시보드, 지도, 인포그래픽을 위한 실무적 판단으로 옮깁니다.

핵심 규칙: 색이 유일한 단서일 수 없습니다

WCAG 성공 기준 1.4.1은 정보를 전달하거나 동작을 나타내거나 반응을 유도하거나 시각적 요소를 구분할 때 색이 유일한 시각 수단이어서는 안 된다고 요구합니다. 데이터 그래픽에서는 독자가 색조를 알아보지 않고도 범주, 계열, 상태, 의미를 구분할 수 있어야 한다는 뜻입니다.

좋은 대안에는 다음이 있습니다.

직접적인 텍스트 라벨과 값
선이나 점에서 서로 다른 마커 모양
실선, 파선, 점선의 선 스타일
막대와 영역의 패턴, 질감, 외곽선
명확한 아이콘과 설명이 담긴 범례 문구
같은 핵심 정보를 주는 데이터 표나 요약 문장

가장 좋은 조합은 차트 종류와, 독자에게 빠른 개요가 필요한지 정확한 값이 필요한지에 따라 달라집니다.

질문을 중심으로 차트를 구성하세요

색을 고르기 전에 차트의 핵심 메시지를 한 문장으로 적어 보세요. 예를 들어 “모든 지역에서 매출이 늘었고, 서부의 성장이 가장 컸다”처럼요. 그런 다음 차트를 회색조로 봤을 때도 독자가 그 질문에 답할 수 있을지 확인하세요.

답이 ‘아니요’라면 색이 아닌 단서를 더하세요. 이 간단한 점검이 가장 흔한 접근성 실수, 즉 보기에는 좋지만 정보를 색조로만 부호화한 팔레트를 잡아냅니다.

멀리 있는 범례보다 직접 라벨을

범례는 독자가 작은 색 견본을 차트 요소와 맞춰 보게 만들며, 때로는 이를 반복하게 합니다. 색이 비슷하거나 선이 교차하면 더 어려워집니다. 공간이 허락한다면 선 끝에 계열 이름을 적고, 막대 옆에 값을 두고, 중요한 지점에는 바로 주석을 다세요.

예를 들어 파랑·주황·초록 선에 아래쪽 범례를 두는 대신, 각 선의 마지막 점 옆에 범주 이름을 적으세요. 다른 계열과 헷갈리지 않을 만큼 가깝게 두세요. 색은 계속 도움이 되지만, 식별은 글자가 맡습니다.

차트 종류에 맞춰 보조 단서를 고르세요

선 그래프

선 스타일, 마커 모양, 끝 라벨을 함께 쓰세요. 원형 마커의 실선, 사각 마커의 파선, 삼각 마커의 점선은 색이 비슷해 보여도 구분됩니다.

한 차트에 너무 많은 계열을 넣지 마세요. 계열이 많다면 빽빽한 범례를 풀어 보게 하기보다, 축척을 통일한 작은 차트 여러 개를 고려하세요.

막대 그래프

범주 라벨과 값을 직접 쓰세요. 같은 묶음 안에서 구분해야 하는 범주를 막대가 나타낸다면 색에 더해 패턴이나 뚜렷한 외곽선을 넣으세요. W3C의 G111 기법은 막대에 색과 패턴을 함께 쓰는 방법을 구체적으로 설명합니다.

누적 막대에서는 가능하면 구간에 직접 라벨을 붙이고 보조 표를 제공하세요. 얇은 구간은 좋은 팔레트를 써도 누구에게나 읽기 어렵습니다.

산점도와 버블 차트

마커 모양과 색을 함께 쓰고, 마커가 묻히지 않도록 충분한 크기와 대비를 확보하세요. 채움이 옅거나 배경이 복잡하면 점에 테두리를 더하세요. 점이 겹친다면 필터링, 데이터 표, 또는 그룹을 나눠 보여 주는 두 번째 화면을 제공하세요.

지도와 히트맵

채움 색 외에 라벨, 경계선, 기호, 패턴을 쓰세요. 예를 들어 교통 노선도는 각 노선 색에 특징적인 정류장 표시를 짝지을 수 있습니다. 단계구분도에서는 미묘한 명암 그러데이션에만 핵심 메시지를 맡기지 말고, 눈에 보이는 범례와 값, 표나 문장으로 된 결론을 함께 넣으세요.

색조 차이가 아니라 대비를 설계하세요

색은 색조가 달라도 밝기가 비슷할 수 있고, 그러면 회색조나 색각 차이 아래에서 서로 뭉개집니다. 대비는 얇은 선, 작은 마커, 차트 경계, 글자에서 특히 중요합니다.

차트를 이해하는 데 필요한 비텍스트 그래픽 요소에 대해, WCAG의 비텍스트 대비 지침은 인접 색 대비 3:1을 기준으로 삼는 것이 일반적입니다. 맥락도 중요하며, 라벨이나 동등한 표가 있으면 독자가 그래픽 자체를 구분하지 않고도 정보를 얻을 수 있습니다. 대비 확인은 라벨과 보조 단서를 대신하는 것이 아니라 디자인 검토의 한 부분으로 삼으세요.

인터페이스 글자와 단순한 시각 요소의 전경/배경 대비는 대비 검사기로 살펴보세요. 그다음 차트 전체를 점검하세요. 실제 레이아웃에는 요소 인접, 얇은 획, 마우스 오버 상태, 겹침처럼 색 한 쌍 검사만으로는 잡히지 않는 요소가 있습니다.

그림 뒤의 데이터를 함께 주세요

차트는 요약이지 데이터 접근의 대체물이 아닙니다. 차트가 중요한 결정이나 주장을 담는다면 다음 가운데 하나 이상을 함께 제공하세요.

범주와 값이 담긴, 가까이 놓인 표
핵심 통찰을 담은 간결한 서술 요약
CSV 같은 접근 가능한 다운로드
복잡한 시각적 관계에 대한 긴 설명
대화형 차트에서 키보드로 접근할 수 있는 툴팁이나 포커스 가능한 데이터 보기

이는 스크린 리더 사용자에게도, 모든 시각적 부호화를 구분하기 어려운 사람에게도 사용성을 높입니다. 또한 막대 높이나 원 조각을 눈대중하지 않고도 메시지를 확인할 수 있게 합니다.

실무용 차트 검토 점검표

보고서, 발표 자료, 제품 대시보드, 기사를 게시하기 전에 사용하세요.

제목이 차트의 주제와 기간을 밝히고 있나요?
각 계열이나 범주를 색에만 의존하지 않고 식별할 수 있나요?
핵심 값이 라벨로 표시되었거나, 표에 있거나, 가까운 글에 설명되어 있나요?
선, 마커, 막대, 범례 항목이 맞닿거나 겹치는 부분에서 충분한 대비를 갖나요?
라벨이 보통 배율과 작은 화면에서 읽히나요?
글자나 아이콘 없이 “좋음”, “나쁨” 같은 모호한 빨강/초록 상태 표시를 피했나요?
키보드를 쓰는 사람이 대화형 차트의 정보에 닿을 수 있나요?
회색조나 색각 시뮬레이션 검토에서 모호한 요소가 드러나지 않았나요?

실제 콘텐츠와 실제 사람으로 검증하세요

자동 검사와 시뮬레이션은 유용한 조기 경보이지만, 차트가 모든 사람에게 통한다는 증거는 아닙니다. 완성된 차트를 실제 크기로, 그것이 실릴 제품이나 문서 안에서 확인하세요. 참여자에게 안내 없이 가장 중요한 계열, 가장 높은 값, 핵심 결론을 짚어 보게 하세요.

저희 색각 시뮬레이터는 이미지가 몇 가지 흔한 색각 차이에서 어떻게 보일 수 있는지 디자이너가 살펴보는 데 도움이 됩니다. 사용자 조사나 WCAG 평가를 대신하는 것이 아니라 추가 검토 단계로 삼으세요.

더 넓은 인터페이스 지침은 색각 이상을 고려한 디자인을 참고하세요.

예시: 상태 차트 개선하기

부서 다섯 곳이 있는 대시보드에서 초록 막대는 목표 달성, 빨간 막대는 지연, 노란 막대는 위험을 뜻한다고 해 봅시다. 더 접근성 있는 버전은 이렇게 할 수 있습니다.

각 막대에 상태 단어를 넣습니다: “목표 달성”, “위험”, “지연”.
라벨에 아이콘(체크, 경고 삼각형, 화살표 등)을 쓰고 그 의미를 설명하는 글자를 함께 둡니다.
두 번째 시각 단서로 패턴이나 외곽선을 씁니다.
실제 백분율과 목표값을 표시합니다.
차트 아래에 부서, 현재 값, 목표, 상태가 담긴 표를 제공합니다.

많은 사용자에게 색은 여전히 패턴을 빠르게 훑는 데 도움이 됩니다. 다만 이해로 가는 유일한 길이 아니게 될 뿐입니다.

요약

접근성 있는 차트는 메시지를 튼튼하게 만듭니다. 직접 라벨, 패턴, 선 스타일, 대비, 동등한 데이터는 색각 이상이 있는 사람도 다른 사람과 같은 정보를 이해하게 해 주며, 여러분의 작업을 전체 독자에게 더 명료하게 만듭니다.

핵심 요약