UXUI디자인, 웹접근성이란? (웹접근성 플러그인 'Contrast')

회사에서 폰트 컬러에 대한 피드백을 받을 때면 '웹접근성' 이야기가 자연스럽게 나오는데요. 도대체 웹접근성이 무엇일까요? 네이버에 검색했습니다. 덤으로 피그마에서 관련 플러그인 추천도 해드릴게요. 

 

네이버 '웹접근성' 검색

 

폰트들끼리 위계를 부여하기 위해 컬러를 조정하는 일이 잦은데요. 그럴 때면 저도 모르게 연한 그레이 색을 쓰게 될 때가 종종 있어요. 시각적으로는 예쁠지 몰라도, 이렇게 작업했을 때 '장애인이나 고령자'가 웹사이트 또는 모바일앱을 이용할 때 불편함을 야기할 수 있기에 누구나 접근할 수 있는 환경을 만들어야 한다는 개념으로 '웹접근성'이라는 키워드가 등장했습니다.

 

종종 유튜브에서 마디아님(UIUX디자이너)의 영상을 보는데요.  영상에서도 '웹접근성'이라는 말이 자주 등장한다는 사실을 알 수 있어요. 알고 있지만 방심하면 놓치기 쉬운 요소라 요즘엔 피그마 내에 있는 플러그인을 사용하고 있답니다. 비활성화(disabled) 버튼이나, 폰트 컬러가 걸릴 때면 무조건 키는 플러그인, 바로바로 'Contrast'입니다.

피그마 > 마우스오른쪽버튼 > 플러그인 > Contrast

 

'이 폰트 컬러가 고령자/장애인들에게도 잘 보일까?' 걱정된다면, Contrast 플러그인을 연 후 확인하고 싶은 폰트 또는 버튼을 클릭해 주세요. 그럼 우측 창이 뜨는데요. Normal 칸에 AA, AAA가 위 사진처럼 초록색으로 나오는 게 가장 좋다고 해요. 부득이한 경우에는 최소 AA는 나와야 하고요. 아래 이미지처럼 FAIL이 두 개 뜨면 안 되니까 UIUX디자이너 분들은 참고하셔서 좋은 UXUI디자인을 만들어봐요, 신입 UIUX디자이너 모두 화이팅!!