How we designed an accessible color palette from scratch

우리는 세심하게 제작되었지만 현재의 7색 디자인 시스템(즉, 2차 브랜딩 색상)이 매우 제한적이며 모든 사용 사례에 적합하지 않다는 것을 알고 있었습니다. 따라서 2021년 10월 데이터 시각화 논의가 시작되었을 때 기존 색상 팔레트와 구별되는 새로운 색상 팔레트를 만들어야 한다는 것을 깨달았습니다. 그리고 처음부터 빌드할 예정이었기 때문에 이 기회를 활용하여 가능한 한 접근성 모범 사례에 맞는지 확인했습니다. 전 세계 인구 의 4.5%가Deuteranomaly(일명 녹색 약), Deuteranopia(일명 녹색 맹인), protanomaly(일명 red-weak) 및 protanopia(일명 red-blind)를 포함한 색맹의 영향을 받는 사람들은 대부분의 색상 팔레트를 볼 수 있습니다. 여기에서는 데이터 시각화를 위해 특별히 설계된 액세스 가능한 색상 팔레트를 구축하기 위해 수행한 단계에 대해 자세히 설명합니다. 새로운 색상 팔레트를 만들기로 결정 우리는 이 데이터 시각화 팔레트가 고유한 것이 될 것이라고 재빨리 결정했기 때문에 보조 색상을 멀리하는 것이 중요했습니다. 그러나 그것은 두 가지 방향으로 갈 것이었습니다. 이 팔레트는 모두에게 무료로 제공되는 뷔페가 아니었습니다. 우리는 왜 이런 결정을 내렸습니까? 2가지 주요 이유: 보조 팔레트에는 7가지 색상만 있으므로 더 큰 샘플의 경우 어쨌든 새로운 색상을 발명해야 하므로 깨끗한 슬레이트로 시작하는 것이 좋을 것이라고 생각했습니다. 또한 이 7가지 색상은 명암비 검사나 색 부족 평가를 완전히 통과하지 못하고 마음대로 교체할 수 없습니다. 데이터 시각화 또는 기타 기능에 사용되는 것과 브랜딩 색상을 구별하는 것이 항상 더 좋습니다. 제품에 일관되게 사용되는 색상은 의도와 예상되는 동작을 설정합니다. 예를 들어 모든 CTA 에 노란색을 사용하므로 데이터 시각화에 동일한 색상을 사용하면 데이터 결과를 해석할 때 사용자를 오도할 수 있습니다. 최상의 색상 팔레트 유형 식별 "좋은 색상 세트는 데이터가 전달하고자 하는 이야기를 강조 표시하는 반면 좋지 않은 색상 세트는 시각화의 목적을 숨기거나 산만하게 합니다." - Michael Yi, 데이터 시각화를 위한 색상 선택 방법 Michael Yi가 작성한 2019년 기사 How to Choose Colors for Your Data Visualizations 에 따르면 데이터 시각화를 위한 3가지 주요 색상 팔레트 유형이 있습니다. 정성/범주 팔레트 본질적으로 고유한 순서가 없는 고유한 범주인 변수의 경우. 함께 잘 작동하는 5~10가지 색상을 사용하면 유연한 시스템을 만들 수 있습니다. 순차 팔레트 낮은 값에서 높은 값의 범위를 표시하거나 선택한 데이터 변형을 강조 표시하는 데이터 세트의 경우. 발산하는 팔레트 중간 양과 2개의 그룹이 있는 경우(중간에 0이 있고 값이 양수/음수로 갈 때 자주 사용됨). 우리의 사용을 위해 우리는 질적 데이터에 더 관심이 있었기 때문에 9가지 색상의 샘플을 찾는 것으로 시작했습니다. 빨간색 1개, 주황색 1개, 노란색 1개, 녹색 2개, 파란색 2개, 자홍색 2개. 그렇게 하기 위해 우리는 단순히 빨간색에서 분홍색으로 무지개 곡선을 따라 필요한 만큼 많은 범주를 찾고 조화를 이루기 위해 노력했습니다. 보시다시피 로켓 과학이 아닙니다! 색맹에 대한 색상 샘플 테스트 기반이 탄탄해지면 Susie Lu와 Elijah Meeks가 만든 도구인 Viz Palette 에서 색상을 테스트하여 색맹이 있는 사람들에게 색상이 얼마나 잘 보이는지 확인했습니다. 그런 다음 색맹과 관련하여 완전한 통과와 만족스러운 결과를 얻을 때까지 약간 조정했고, deuteranomaly 및 protanomaly에 대한 거의 완전한 통과를 얻었습니다. 색의 자음에 영향을 주지 않고 완전한 접근성을 달성하기가 매우 어려웠기 때문에 protanopia와 deuteranopia에서는 조금 더 까다로웠습니다. 전체 스펙트럼 및 순차 적응 생성 더 많은 음영을 만들고 순차적 데이터에 적응하기 위해 Chroma.js Color Palette Helper 를 사용했습니다 . 시작 지점에서 총 8가지 추가 색상을 줄이는 데 도움이 되었으며 아래(어두움), 위(밝음) 및 그 사이의 범위를 추가했습니다. 명암비 확인하기 색상 결함 검사 외에도 웹에 더 쉽게 액세스할 수 있도록 하기 위한 일련의 권장 사항인 WCAG( 웹 콘텐츠 접근성 지침 )에 따라 색상이 명암비 검사에 제출되었습니다. 색상과 관련하여 표준은 AA(최소 대비) 및 AAA(향상된 대비)의 두 가지 명암비 수준을 정의합니다. 레벨 AA는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트(최소 18pt) 또는 굵은 텍스트의 경우 3:1의 명암비를 요구합니다. 레벨 AAA는 일반 텍스트의 경우 최소 7:1, 크거나 굵은 텍스트의 경우 4.5:1의 명암비를 요구합니다. 경험의 법칙은 Coolors 또는 WebAIM 과 같은 웹사이트에서 확인할 수 있는 3:1의 명암비를 통과하는 것이 었습니다 . 우리의 밝은 테마 이것은 3:1 비율보다 낮은 4가지 색상으로 우리가 만든 원래 선택입니다. 스펙트럼의 색조를 낮추어 3:1 비율을 달성할 수 있었지만 전체적인 조화의 척도뿐만 아니라 색 부족 평가에서도 낙제될 정도로 임팩트가 있었습니다. 빨간색/주황색/노란색 영역이 대조되는 갈색의 웅덩이가 되지 않도록 하는 것은 어려운 일입니다. 개인적인 선택과 신념으로 우리는 균형을 유지하기 위해 역추적했습니다. 목표는 우리 브랜드를 완전히 방해하는 것이 아니었기 때문입니다. 기껏해야 우리가 할 수 있는 것은 조화를 유지하고 스펙트럼에서 가능한 한 가깝게 도달하는 것을 목표로 하는 것이었습니다. 그래서 우리는 조화를 유지하면서 3:1의 스위트 스폿에 도달하기 위해 녹색, 파란색, 분홍색 및 노란색의 색조를 낮추었습니다. 우리의 어두운 테마 어두운 테마의 경우 밝은 테마에 대해 설정한 것이 작동하지만 너무 밝을 수 있으므로 좋은 명암비를 유지하기 위해 스펙트럼을 조금 더 낮추었습니다. 여기 명암비가 있는 원래의 밝은 테마 팔레트가 있습니다. 파란색을 제외하고 모두 통과합니다. 파란색을 수정한다는 것은 보라색과의 정확한 대비를 유지하면서 밝게 하는 것을 의미했습니다. 700이 유일한 옵션이었습니다. 그런 다음 어두운 테마와 더 잘 어울리도록 색상을 한 단계 낮추었습니다. 그런 다음 개념 증명(POC)으로 어두운 테마에 대한 몇 가지 색조를 추가했지만 4가지 색상이 명암비에 실패했습니다. 우리는 어두운 테마에 대한 더 나은 대비를 위해 더 아래로 내려갈 수 있었지만 아이러니하게도 우리는 대비율 검사에 실패했을 것입니다. 결론 이러한 모든 단계를 거친 후 우리는 현재 데이터 시각화 목적으로 완벽하게 작동하는 완전히 새로운 접근 가능한 색상 팔레트를 얻었습니다. 그러나 그 결과는 약간의 타협 없이는 달성할 수 없었습니다. 접근성 측면을 무시하지 않고 회사의 브랜딩이 존중되도록 선택해야 했습니다. 이 두 가지 우선 순위 사이에서 올바른 균형을 찾는 것이 확실히 가장 어려운 일이었습니다.