차트에서 여러 데이터를 색상으로 구분할 때 어떤 색을 써야 할까요? 가독성과 접근성을 모두 고려한 색상 선택 방법을 알아봅니다.
구분하기 쉬운 색상
비슷한 색끼리 붙으면 구분이 어렵습니다. 색상환에서 멀리 떨어진 색들을 선택하세요. 파랑-주황, 초록-보라 같은 조합이 효과적입니다.
색맹 고려
빨강-초록 조합은 피하세요. 대신 파랑-노랑, 파랑-주황 조합을 권장합니다. 색상 변환기로 HSL을 확인하고 H값 차이가 충분한지 봅니다.
패턴 병행
색상만으로 구분하지 말고 줄무늬, 점선 등 패턴을 함께 사용하세요. 흑백 인쇄에서도 구분 가능해야 합니다.
범례 위치
범례는 차트 가까이에 두세요. 눈이 왔다갔다하면 색상 매칭이 어렵습니다. 가능하면 데이터에 직접 레이블을 붙이세요.
색상 외에 고려할 점
형태, 크기, 위치로도 데이터를 구분할 수 있습니다. 파이 차트 대신 막대 차트를 쓰면 색상 의존도가 줄어듭니다. 데이터 포인트에 직접 레이블을 붙이면 범례를 찾아볼 필요가 없어져 인지 부하가 줄어듭니다. 색상 변환기에서 선택한 색상들의 HSL을 확인해서 명도 차이도 충분한지 검토하세요.
차트 라이브러리 설정
Chart.js, D3.js 같은 라이브러리는 기본 색상 팔레트를 제공합니다. 하지만 기본값이 접근성을 고려하지 않은 경우가 많으니 직접 팔레트를 정의하는 것이 좋습니다. 색맹 시뮬레이터로 미리 테스트해보세요.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.