배경색에는 밝고 채도가 높은 색상을 피해야 한다.
사용자의 시선을 끌만한 색상을 찾고 있는가? 밝고 채도가 높은 색상을 배경색을 사용하고 있다면, 사용자가 그 페이지를 오래 보고 있기가 힘들 것이다.
밝고 채도가 높은 색상은 사용자의 주의를 잘 끌 수 있다. 그러나 넓은 영역에 너무 많이 사용한다면 망막을 자극하여 사용자의 눈을 긴장시키게 된다.
예를 들면, 위의 색상표를 바라보아라. 좌측은 가장 높은 명도와 채도로 이루어진 색상들이고, 우측은 80%의 명도와 채도를 적용한 색상들이다. 밝고 채도가 높은 색상은 눈에 자극을 주기 때문에 좌측 색상을 더 오래 보고 있기가 힘들 것이다.
명도 Vs. 채도
명도와 채도는 서로 다른 색상의 속성이다. 전자는 색상에 흰색이나 검은색이 얼마나 많이 섞여있는지에 대한 것이고, 후자는 색상에 포함된 회색의 양이다.
명도를 증가시키는 것은 채도를 감소시키는 것과 같다. 채도를 감소시키는 것은, 색상을 회색과 비슷하게 만드는 것이다. 명도를 증가시키는 것은 색상을 회색과 같이 만들지 않으면서 밝게 만드는 것이다.
주의와 자극에 대한 색상의 효과
"색상과 채도, 명도의 효과에 대한 연구"에 따르면, 명도와 채도가 높은 색이 가장 주의를 끌 수 있다고 한다. 그리고 색상보다는 명도와 채도가 주의를 끄는데 더 중요하다고 한다.
그리고 "채도에 따른 자극 효과"와 "색상과 감정"에 대한 연구에서는, 밝고 채도가 높은 색상이 자극과 높은 관련이 있다고 한다. 그리고 색상도 물론 자극과 관련이 있지만 채도와 명도가 더 큰 영향을 미친다고 한다.
명도와 채도가 높은 색상이 반전된 버튼 색상
밝고 채도가 높은 배경색이 사용자의 관심은 끌 수 있지만, 오래 잡아두지는 못한다. 그러한 색을 사용하는 것은 사용자가 앞에 두고 소리를 지르는 것과 같다. 주의를 끌 수는 있지만, 귀찮아서 금세 도망가버릴 것이다.
배경색으로는 어둡고 채도가 낮은 색상을 사용하라.
배경색은 어둡고 채도가 낮은 색상으로 만드는 것이 좋다. 배경을 어둡게 하면 색상에서 흰색이 줄어들고 채도를 낮추면 회색이 더해진다. 이렇게 하면 색상이 눈에 주는 자극을 완화해 준다.
그것뿐만이 아니라, 페이지의 콘텐츠나 텍스트와 부딪히지 않는다. 이렇게 색상을 부드럽게 해 주면 사용자는 시각적으로 방해받지 않고 페이지를 쉽게 읽을 수 있다.
좋은 배경색과 나쁜 배경색의 예
아래는 눈을 긴장시키는 배경과 편안하게 해주는 배경을 사용하는 홈페이지의 예이다. 좋은 예와 나쁜 예 사이에서 어느 페이지를 더 오래 바라보기 편한지 테스트해 보아라.
Bad greens Panic / Prismic, Good greens FreshDesk / Sigstr
Bad reds Telepath / Meat, Good reds AppFigures / Jackie
Bad blues Compose / DareIt, Good blues Republic / MailTag
심미성과 사용성
앞으로는 배경색을 정하기 전에, 그 색상이 사용자의 눈에 어떻게 느껴질지를 생각해 보자. 명도와 채도의 레벨이 적합한가? 사용자가 텍스트를 쉽게 읽을 수 있는가?
색상은 디자인의 심미성에 영향을 주지만 또한 사용성에도 영향을 준다. 디자이너는 둘 다 고려를 해야 하며 두 가지 요소가 조화를 이루어 사용자의 눈을 즐겁게 해 주어야 한다. 뛰어난 인터페이스를 위해 두 가지를 모두 만족시킬 수 있다면 심미성을 위해 사용성을 희생할 필요는 없을 것이다.
원문 출처 : https://uxmovement.com/content/why-you-should-avoid-bright-saturated-background-colors/
