브랜드 가이드에는 대개 색이 두세 개 적혀 있습니다. 그 색으로 화면을 그리기 시작하면 곧 부족해집니다. 버튼에 마우스를 올리면 조금 어두워져야 하고, 누르면 더 어두워져야 하고, 그 색으로 된 배지 배경은 훨씬 옅어야 글자가 읽히고, 비활성 상태는 또 달라야 합니다. 브랜드색 하나가 실제로는 대여섯 개의 값을 요구합니다.
이것을 화면마다 눈으로 고르면 사이트에 미묘하게 다른 초록이 열 개 생깁니다. 규칙으로 뽑으면 하나도 안 생깁니다.
역할별로 필요한 변형
변형을 만들 때는 명도 축을 먼저 움직입니다. 색상(hue)을 함께 돌리면 호버 상태가 다른 색으로 읽혀서 브랜드가 흔들립니다. 채도는 비활성 상태에서만 크게 내립니다 — 그것이 “지금 누를 수 없다” 의 시각적 신호이기 때문입니다.
회색 축도 같이 정합니다. 순수 중성 회색을 쓰면 브랜드색과 따로 노는 화면이 되므로, 회색에 브랜드 색조를 아주 조금 섞으면 화면 전체가 한 벌로 읽힙니다. 텍스트 · 보조 텍스트 · 경계선 · 옅은 면 정도로 네다섯 단계면 충분합니다.
대비를 검증하고 나서 이름을 붙입니다
여기서 가장 흔한 사고가 나옵니다. 브랜드색이 밝은 계열이면 흰 배경 위의 본문 글자색으로는 쓸 수 없습니다. 배경으로는 훌륭한데 글자로 쓰면 대비가 모자라 읽히지 않습니다. 그런데 시안에서는 큰 제목에만 써 봤기 때문에 발견되지 않고, 나중에 본문 링크에 적용되는 순간 문제가 됩니다.
접근성 점검은 디자인의 제약이 아니라 디자인의 검산입니다. 대비가 통과하지 못한 조합은 실제로 잘 안 읽히는 조합이고, 그것을 시안 단계에서 아는 편이 언제나 쌉니다.
단계를 몇 개나 만들 것인가
팔레트 생성기를 돌리면 색상마다 열한 단계를 뽑아 줍니다. 전부 토큰으로 등록하고 싶어지지만, 쓰지 않는 단계는 다음 사람이 아무렇게나 씁니다. 목록에 있으면 허가받은 값처럼 보이기 때문입니다.
필요해서 만든 단계만 남깁니다. 브랜드색 계열 네 단계, 회색 계열 다섯 단계, 상태색(성공 · 경고 · 위험 · 정보)은 각각 배경과 전경 한 쌍씩이면 대부분의 사업 사이트가 그려집니다. 부족하면 그때 규칙에 맞게 하나를 더합니다.
색과 대비가 실제 점수에 어떻게 반영되는지는 테마 · 플러그인 아카이브에서 이어지고, 접근성 · 성능 점검을 함께 받고 싶다면 최적화 지원 사업의 진단에 포함돼 있습니다.
다음 회차
색이 정리됐으면 간격 차례입니다. 다음 회차는 4의 배수 척도 — 그리고 그 척도를 무너뜨리는 예외 하나가 실제로 얼마짜리인지 다룹니다.