원문보기: https://yozm.wishket.com/magazine/detail/2469/
요약
색은 복잡한 데이터를 직관적으로 이해할 수 있도록 도와준다. 색을 이용해 데이터 분류, 값의 크기 표현, 중요한 정보 강조, 특정 의미 전달 등을 할 수 있다. 하지만 모든 사람이 색을 동일하게 보는것이 아니므로 색각 이상을 고려한 색 선택이 중요하다.
주요포인트
색은 복잡한 데이터를 직관적으로 이해할 수 있도록 도와주며, 사용자의 주의를 끌고, 정보를 명확하게 전달하는 수단으로 사용된다.
핵심개념
색의 대비
색은 다른 색과의 대비를 통해 인식된다. - 요제프 알버스(Josef Albers)
색의 대비가 높으면 서로 다른 색 간의 구분이 더 명확해짐 -> 눈에 더 잘 띈다
데이터 분류
-
사용하는 색상의 수 최소한으로 유지하기
- 큰 카테고리를 나타내는 주요 색의 대비는 충분히 높게
- 같은 카테고리끼리는 같은색상 다른 채도/명도
-
동일한 변수를 여러 차트나 그래프에 나타낼 때, 일관된 색상 사용하기
값의 크기 표현
값의 크기에 따라 색을 진하게 표시해서 시각적으로 명확하게 구분 가능
- 배경과의 대비도 중요하다
중요한 정보 강조
중요한 데이터 포인트를 강조하고, 정보의 계층을 명확히 하기 위해 색을 사용
- 빨간색-흰색 대비 높음 -> 눈에 더 잘 띈다.
특정 의미 전달
- 색상만으로도 특정의미 전달 가능
- Ex) 선거 - 정당별 대표 색
- 색의 상징성 의도적으로 피하는 경우
- Ex) 성별 고정관념을 피하기 위해 남-파란색, 여-빨간색 사용을 피함
접근성 높이는 방향으로
- 색들이 모든 사람에게 동일하게 보이지 않을 수 있음 (색각 이상)
- 색각 이상을 가진 사용자들도 데이터 시각화에서 색을 구별하고 정보를 쉽게 파악할 수 있도록 고려하는 것이 중요
- Colorblind safe 색상 사용하거나 옵션 선택 가능하게 만들기
- 패턴이나 텍스처 추가하기
용어정리
HSL: 색상(Hue), 채도(Saturation), 명도(Lightness)
유용한 사이트
- Colorable: 두 색의 대비를 수치로 나타냄. 대비가 뚜렷하지 않을때는 숫자 옆에 Fail 표시
- Chroma.js: 원하는 색과 색의 갯수를 입력하면 팔레트 생성. colorblind safe 옵션 선택 가능
- Coblis: 색각 이상 시뮬레이터. 원하는 사진을 넣어 각 색각 이상에 따라 어떻게 보이는지 확인 가능
- ColorBrewer: 색의 갯수 선택하면 여러 팔렛트 생성. 고른 팔레트가 colorblind safe인지 확인 가능
- Color Thief: 사진에서 색 추출
- I want hue, Colorgorical: 랜덤 팔레트 생성, 커스터마이즈 하기는 조금 어려움
참고할만한 기사
https://www.atlassian.com/data/charts/how-to-choose-colors-data-visualization
- Qualitative palettes
- Sequential palettes
- Diverging palettes
- Discrete vs. continuous palette
