핵심 아이디어

디자인 시스템에서 접근성을 충족하면서 여러 테마에 일관되게 적용할 수 있는 색상 램프를 만드는 체계적인 방법론에 관한 내용이다.

요약

Mineral UI 디자인 시스템 개발 팀은 모든 색상 값이 WCAG 2.1 Level AA 접근성 표준(4.5:1 대비)을 충족하면서도 테마 간 일관성을 유지하는 색상 시스템을 구축했다. 이들은 각 색상 테마의 동일한 값 단계(예: blue-60, red-60)가 그레이스케일로 변환했을 때 같은 명도값을 가지도록 설계함으로써 테마 전환 시 시각적 일관성을 확보했다. 또한 HSB 색상 모델에서 원형 또는 타원형 패턴을 활용해 라이트 모드와 다크 모드 모두에 적합한 색상 램프를 생성했다.

견해

이 접근 방식은 색상 선택이 임의적이거나 개인 취향에 의존하는 대신 명확한 원칙과 방법론을 통해 결정되어야 함을 보여준다. 특히 접근성을 디자인의 마지막 검토 단계가 아닌 기본값으로 설정한 점이 인상적이다.

출처

Designing Systematic Colors. How to make themable, flexible, WCAG… | by JeeyoungJung | UX Planet