색만으로 구분하지 않는 데이터 차트 만들기

차트에서 초록과 빨강만으로 상태를 구분하면 색을 구별하기 어려운 사용자나 흑백 인쇄물에서 정보가 사라질 수 있습니다. 형태와 텍스트를 함께 써야 합니다.

고객 영향을 먼저 정의한다

선 색상 외에 실선·점선, 마커 모양, 직접 레이블을 함께 사용합니다. 범례만 멀리 두면 사용자가 선을 반복해서 찾게 됩니다. 값이 적다면 데이터 점 옆에 이름을 직접 붙이는 편이 더 읽기 쉽습니다.

권한과 정책을 명시한다

명도 대비와 작은 글자 크기를 확인합니다. 배경색이 바뀌는 다크 모드에서도 선과 축이 구분돼야 합니다. 특정 색을 의미로 고정했다면 색맹 시뮬레이션뿐 아니라 실제 회색조 출력도 시험합니다.

작은 범위에서 배포한다

차트 아래에 핵심 수치를 표나 요약 문장으로 제공합니다. 스크린리더가 그림 안의 모든 관계를 자동으로 설명하지 못하므로 대체 텍스트에는 차트의 핵심 결론을 적습니다. 데이터가 많다면 접근 가능한 표로 전체 값을 확인하게 합니다.

고객 경험과 비용을 측정한다

사용자 테스트에서는 ‘어느 선이 목표를 넘었나’ 같은 실제 질문을 던집니다. 색상을 예쁘게 고른 것과 정보를 정확히 읽는 것은 다릅니다. 모바일 화면에서 레이블이 겹치는지도 확인해야 합니다.

회수와 개선 경로를 남긴다

접근성은 특별한 사용자를 위한 별도 기능이 아닙니다. 회의실 프로젝터, 저품질 모니터, 흑백 보고서에서도 누구나 혜택을 봅니다. 차트 컴포넌트 기본값을 개선하면 새 대시보드에도 같은 원칙이 적용됩니다. 차트가 숫자 자체보다 추세를 전하는 경우에도 상승·하락과 기준선 초과 여부를 대체 텍스트에서 설명해야 합니다.

현장에 적용할 때의 순서

1. 색 외에 선 모양·직접 레이블 추가
2. 다크 모드·회색조에서 확인
3. 요약 문장과 데이터 표 제공

주의할 실패: 빨강·초록만으로 상태 표시

관찰할 지표: 과제 성공률·레이블 겹침

적용 전 체크리스트

• 색 외에 선 모양·직접 레이블 추가
• 다크 모드·회색조에서 확인
• 요약 문장과 데이터 표 제공

참고 자료

W3C WCAG — Use of Color. 색만으로 정보를 전달하지 말아야 한다는 기준은 W3C WCAG를 참고했습니다. 차트 구성 예시는 적용 제안입니다.

이미지와 도식은 이해를 돕기 위한 개념 시각화입니다. 특정 고객의 실제 설비·데이터·화면을 재현한 것이 아닙니다.

#데이터시각화 #차트접근성 #WCAG #대시보드 #색상대비 #네이처프랙탈 #서비스품질 #제품개발 #운영설계 #디지털전환