Handy 컬러시스템 구축과정
디자인시스템 구축기#5
기존의 브랜드 컬러
기존의 브랜드컬러는 #816DEC로 WCAG 2.0 명도대비 접근성에서 어긋나는 컬러였다.
다음과 같이 UI에서 보이는 포인트 컬러 텍스트들의 가독성이 매우 떨어짐을 알 수 있다.
특히나 '삭제'버튼의 가독성이 매우 떨어짐을 알 수 있는데 해당 문제로 인해 전체적인 컬러시스템 개선의 필요성을 알 수 있었다.
색 대비 기준
1. 명암비 4.5:1
대상: 일반 텍스트
설명: 일반 텍스트와 그 배경 사이의 대비 비율은 최소 4.5:1이어야 합니다. 이는 일반적인 크기와 두께의 텍스트가 쉽게 읽히도록 하기 위함입니다.
2. 명암비 3.0:1
대상: 큰 텍스트 및 굵은 텍스트
설명: 큰 텍스트(최소 18포인트 또는 14포인트 굵은 텍스트)와 그 배경 사이의 대비 비율은 최소 3.0:1이어야 합니다. 큰 텍스트는 일반 텍스트보다 가독성이 높기 때문에 낮은 대비 비율을 허용합니다.
디자인팀은 기존 유어슈의 브랜드컬러인 보라색의 명도대비 문제 해결을 위한 새로운 컬러시스템을 위한 테스트를 진행했다.
하지만 컬러테스트를 진행해보니 한 가지 문제점을 확인할 수 있었다. 바로 눈의 피로감이었다. 똑같이 채도가 100이더라도 파란색은 눈의 피로감이 덜한 반면 보라색은 채도가 높으면 눈의 피로감을 느낄 수 있었다. 따라서 최소 명도대비 규칙만 준수한 상태에서 이전의 칙칙한 보라색은 걷어내고 더욱 유쾌하고 즐거움을 상징할 수 있는 컬러로 개선을 진행했다. 최종적으로 우리의 새로운 브랜드컬러는 #6B5CFF가 되었다.
컬러시스템 구축하기
최대한 간결하게 브랜드컬러, 그레이스케일, 에러로만 구성했다. 추후 필요하다고 생각되는 컬러는 그때그때 필요에 따라 추가해도 된다고 생각했으며, 처음부터 너무 많은 컬러가 정립되면 헷갈릴 수 있기 때문에 최대한 간결한 컬러시스템으로 구축했다.
텍스트 컬러는 총 4가지로 선정했다. 가장 메인이 되는 블랙컬러, 본문에 사용되는 서브컬러 2개, 그리고 비활성화 컬러이다. 메인, 본문 컬러는 모두 최소 4.5:1 명암비 기준을 충족했고, 비활성화 컬러만 예외적으로 2.8:1명암비를 선택했다.
