잘 보이는 UI디자인 팁 - 색상 대비 검사로 더욱 선명한 디자인하기

 

 

모두가 편리하게,

더욱 선명한 디자인으로!

 

UI 디자인을 하다 보면 놓치기 쉬운 색상 대비 체크!

 

그동안의 프로젝트에서는 웹 접근성을 엄격하게 지켜야 하는 경우가 잘 없어서 거의 감(?)으로 색상을 골랐었는데, 이번에 고령자 대상 서비스를 디자인하면서 '잘 보이게'라는 것을 객관적으로 수치화해야 했다. '잘 보이게'하는데 중요한 요소 중 하나인 색상은 색상대비 검사로 잘 보이는지 아닌지를 객관적으로 판단할 수 있다. 색상대비 검사 방법이 생각보다 간단하고 결과물도 선명하게 잘 표현이 되어서 다른 프로젝트에서도 습관처럼 쓰면 좋을 것 같아 포스팅으로 남겨둔다.

 

 

 

 

 

 

1. 왜 색상대비 검사를 해야할까?

디자이너인 내 눈에는 잘 보이지만 누구에게나 이 '안보이지롱'글자가 잘 보일까?

이 회색 컬러(#EAEAEA)로 색상대비 검사를 해보면 아래와 같은 결과가 나온다.

 

 

결과는... FAIL! FAIL! 💀

TEXT와 배경의 컬러 대비(contrast ratio)가 4.5:1 이상 되어야 정보 접근성 기준에 만족된다.

플레이스 홀더 텍스트나 도움말 텍스트 등 덜 중요한 정보에 회색을 쓰는 경우가 많은데, 너무 연한 회색을 쓰지 않도록 주의!

 

 

 

로고나 아이콘 등 텍스트가 아닌 요소들도 가급적 색상대비 검사를 통해 Fail이 되지 않도록 하고, 최소 3.5:1 이상은 나오도록 하는 게 좋다. 

 

 

 

 

2. 어떻게 색상대비 검사를 해야 할까?

출처 : 네이버 접근성 가이드

네이버 접근성 가이드에 텍스트와 배경색, 아이콘과 배경색 관련해서 엄청 이해하기 쉽게 잘 설명되어 있다. 👍🏻

링크는 아래에!

네이버 접근성 페이지 : 명도 대비

 

출처 : 네이버 접근성 가이드

이런 식으로 내부 UI시스템 가이드라인에서 예외 경우를 정의해 두는 것도 좋다.

 

 

 

 

3. 색상대비 검사 도구 추천

프로그램 다운로드 필요 없이 웹에서 바로 컬러 코드만 입력하면 적합한 색상 대비 값인지 바로 나오는 WebAIM의 Contrast Checker. 입력한 컬러 값에서 명도를 바로바로 조절해 볼 수 있어서 유용하다.

WebAIM: Contrast Checker

 

아래는 피그마 플러그인

① Able

Figma - Able – Friction free accessibility | Able makes accessibility easy, while looking and feeling like Figma! Add color c

 

②A11y

Figma - A11y - Color Contrast Checker | Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Gu

피그마로 UI디자인을 하고 있다면  Color Contrast Checker 플러그인 설치는 필수! (2개 중에 하나만 있으면 되고 나는 Able을 쓰고 있다. 조금 더 편한 느낌?)