by
Jul 16. 2020
텍스트의 명도를 대비하라
명도 대비 - 텍스트의 인지
흰 배경에 검정 글씨는 명도 대비가 가장 높은 색 조합이다. 배경과 전경의 구분이 명확하다는 뜻이므로 가독성이 좋다고 볼 수 있는 이 조합은 우리가 주변에서 흔히 보고 읽는 글씨의 대부분을 차지하기도 한다.
흰 것은 종이요 검은 것은 글씨라
물론 수치로 표현되는 명도의 대비 값이 높다고 해서 가장 좋은 색 조합이라고 하기엔 무리가 있다. 명시성이 높은 조합인 '노랑/검정'은 '흰/검' 조합보다도 명도 대비가 낮지만 주목이 필요한 위험상황에서 자주 쓰이기 때문에 목적과 상황에 맞게 색상을 조합해야 한다.
가장 적절한 색상과 명도를 찾는 것도 중요하지만 우리가 주의해야 할 부분은 가독성이 나쁜 조합을 피하는 것이다. 일반적인 UI 환경에서는 흰색과 검은색으로 괜찮은 명도 대비를 표현할 수 있지만 문제는 색상이 있는 경우이다.
1. 브랜드 컬러
내 경우엔 로고에 사용된 브랜드 컬러를 그대로 UI 가이드의 프라이머리 컬러로 지정했을 때 문제가 발생했다. 특히 채도가 높은 색상을 로고에 사용하는 경우에는 반드시 가독성이 좋은 글꼴용 색상을 따로 지정해둬야 한다.
색상으로 구분이 될 뿐 명확하게 강조되지는 않는다.2. 긍정과 부정, 경고
색상으로 의미를 전달해야 하는 서브 컬러를 가이드할 때, 배경색으로 사용하는 경우와 폰트 색으로 사용하는 경우를 고려하여 두 경우 모두 만족시킬 수 있는 적절한 명도를 주어야 한다.
3. 정보 우선순위
사용자가 정보를 습득하는 순서를 의도하고 싶을 때 명도 대비를 활용하기도 한다.
크롬 시작페이지에 다양한 콘텐츠를 보여주는 서핏은 콘텐츠 카드 안의 제목과 내용의 폰트를 크기뿐만 아니라 명도에도 차이를 두어 위계를 더욱 명확히 한다. 또한, 채용공고 영역 글씨의 명도를 더 높게 두어 콘텐츠보다 채용정보가 더 강조되도록 디자인했다.
출처 - Surfit.io경험이 많은 디자이너라면 어렵지 않게 명도 대비에 대한 문제가 없게 하겠지만 아직 명확하게 구분이 안 되는 사람이나, 만약 대비가 낮은 색상을 사용한 동료 디자이너에게 논리적인 피드백을 주고 싶은 사람이라면 아래와 같은 방법을 활용해봐도 좋겠다.
1. 명도 대비율 측정
웹 접근성 기준에 부합하기 위해선 명도 대비가 4.5점 이상이어야 한다. 아래 사이트에서 측정이 가능하며 점수가 가독성의 절대적인 기준이 될 수는 없겠지만 만약 디자인 한 UI의 텍스트 강약이 조금 애매하다면 활용해 봐도 좋을 것 같다.
https://webaim.org/resources/contrastchecker/
2. 블렌딩 옵션 활용
여러 색상 간의 명도 밸런스를 맞출 때 비교할 수 있는 방법이다. 블렌딩 옵션의 'Color'를 활용하여 비교하고 싶은 색상 위에 올려주면 어떤 색이 명도가 낮고 높은 지를 한눈에 확인할 수 있다.
PC에서 클릭해서 봐야 제대로 보입니다!