이 화면에서 문의 버튼은 어느 것입니까
버튼 네 개가 저마다 다른 색으로 서 있습니다. 파란 문의하기, 초록 자세히 보기, 노란 가격 확인, 분홍 이벤트 신청입니다. 화면은 네 곳에서 동시에 「여기를 누르세요」라고 말하고 있고, 방문자는 어디를 눌러야 할지 화면이 아니라 스스로 찾아야 합니다.
중요한 것마다 색을 하나씩 줬기 때문입니다. 이벤트도 강조하고 싶고, 가격도 강조하고 싶고, 문의도 눌리게 하고 싶었습니다.
처음부터 아홉 개를 고른 사람은 없습니다
재현 화면 하나를 열어 색을 세어 보면 아홉 개가 나옵니다. 로고, 문의 버튼, 보조 버튼, 카드 머리 세 개, 이벤트 뱃지, 상담 링크, 회사 소개 링크입니다. 아홉 개를 고른 것이 아니라, 배너 하나 뱃지 하나 붙일 때마다 색이 한 개씩 따라온 결과입니다.
이 화면은 실제 고객사가 아니라 흔한 구성을 본떠 만든 재현 화면입니다.
개수를 세기 전에 역할부터 정합니다
색을 몇 개로 줄일지 정하는 것은 순서가 뒤바뀐 일입니다. 먼저 각 색이 무슨 일을 하는지 정합니다.
| 역할 | 이 페이지의 값 | 할 일 |
|---|---|---|
| 지면 | FAF9F5 | 화면의 대부분을 덮습니다. 눈에 띄면 안 됩니다. |
| 구분선 | E3DACC | 칸을 나누기만 합니다. |
| 글자 | 141413 | 읽히기만 하면 됩니다. 색으로 말하지 않습니다. |
| 강조 | D97757 | 눌러야 하는 자리 하나에만 칠합니다. |
색이 몇 개여야 한다는 규칙을 드리는 것은 아닙니다. 이 영상의 팔레트도 네 가지이고, 그중 강조가 하나입니다. 중요한 것은 개수가 아니라 강조가 한 곳이라는 점입니다.
강조색 위의 글자는 대비를 재서 고릅니다
강조색을 정했다면 그 위에 올릴 글자색이 남습니다. 눈으로 고르지 말고 대비를 재세요. WCAG 2.1 의 상대 휘도 식으로 계산하면 이렇습니다.
| 조합 | 대비 | 본문 크기 글자 기준 4.5 : 1 |
|---|---|---|
| 흰 글자 FFFFFF / 주황 D97757 | 3.1 : 1 | 미달입니다. 큰 글자 기준 3 : 1 만 통과합니다. |
| 잉크 글자 141413 / 주황 D97757 | 5.9 : 1 | 통과합니다. |
| 잉크 글자 141413 / 크림 FAF9F5 | 17.5 : 1 | 통과합니다. |
같은 브랜드 색을 그대로 두고 글자색만 바꿔도 통과하는 경우가 많습니다. 다만 이 값은 위 조합에 대한 것입니다. 큰 글자와 아이콘, 비활성 요소는 기준이 다르므로 실제 화면에서 다시 재야 합니다.
오늘 할 일은 색을 줄이는 것이 아닙니다
화면 하나를 열고 가장 중요한 버튼을 하나 고르세요. 그다음 그 색이 칠해진 다른 자리에서 색을 뺍니다. 상단 이벤트 배너, 가격 강조 뱃지, 본문 안의 보조 버튼 같은 자리입니다. 테두리만 남겨도 충분히 읽힙니다.
남은 강조색이 한 곳뿐이면 거기가 눌립니다. 개수는 그 뒤에 저절로 정리됩니다.
더블루캔버스의 랜딩페이지 뜯어보기입니다. 포함 항목과 예상 금액은 모의견적 화면에서 확인하실 수 있습니다.
