웹 접근성을 고려하자 - 색 명암 분석
웹 접근성 - 색 명암 분석
프로젝트를 하다 보면 웹 접근성은 개나줘버리고 기능 구현에만 집중하는 경우가 많다.
물론! 나도 그랬다.
하지만 이번엔 웹 접근성을 고려하여 서비스를 제작하고 싶었기에 최대한 맞출 수 있는 부분은 맞출려고 한다.
그리고 그 첫 번째가 색 명암!
https://accessibility.naver.com/acc/guide_04
위의 사이트는 네이버의 접근성 명도 대비에 관한 가이드 페이지이다.
이걸 토대로 진행했다.
사이트를 보면 추천하는 명도 대비 평가 도구 리스트가 있다.
나는 여기서 두 번째인 Colour Contrast Check를 사용했다.
설치해서 열어보면, 아래와 같이 실행되는 것을 볼 수 있다.
내가 사용한 색상을 직접 작성하거나 스포이드로 찍어서 선택할 수도 있다.
그럼 그 결과로 웹 접근성 평가를 해준다.
나는 주로 흰 배경에 텍스트가 많아서 그 부분을 집중적으로 확인했다.
(사실 얼마 없다.)
원래는 위의 사진과 같이 placeholder에서 제공해주는 기본 텍스트 색상을 사용했다.
그런데 저 텍스트를 스포이드로 찍어서 확인하니,
오호 다 실패~
그래서 네이버에서 권장한 Contrast ratio 5.7:1이 나오기 위해 흰 배경에는 텍스트 #666666의 색상을 사용하기로 했다.
확실히 좀 더 뚜렷해지긴 했는데, 큰 차이는 없는 것 같다.
크기가 작은 텍스트의 경우를 제외하곤 모두 통과를 했다.
하나씩 확인을 했는데, 모두 통과를 받기가 쉽지가 않았다.
모두 통과를 받을려면 흰 배경에 검은 텍스트를 사용해야할 정도로 대비가 뚜렷해야 모두 통과가 뜬다.
모두 통과가 뜨려면 얼마나 대비를 줘야 하는지 색 변경을 해봤는데, 서비스에서 추구하는 이미지랑 어울리지 않게되어 모두 바꾸지는 않기로 했다.
채팅 웹 접근성 중 중요한 부분 중 하나는 역시 채팅 말풍선일 것이다.
말풍선 텍스트가 잘 보이지 않는다면?
채팅의 의미가 없다!
확인 결과는
다행히 모두 통과했다.
찬성 측 입장에 대한 말풍선도 확인했다.
모두 통과!
색 명암 분석기는 일정 기준으로 평가를 하기 때문에 실제 사용자가 보기에 괜찮아 보이는 정도도 기준에 충족되지 않으면 바로 실패가 뜨기 때문에 기준에 맞추기가 쉽지가 않은 것 같다.
그리고 이런 모든 경우에 대한 웹 접근성을 고려하여 서비스를 제작하는 기업들이 대단한 것 같다.
카텍캠을 하면서 카카오에서 특히 웹 접근성에 대해 깊이 고민한다는걸 알 수 있었다.
색상 대비, 텍스트 크기, 스크린 리더기를 위한 aria-* 설정 등 모든 방향에 대해 모든 사람들이 서비스를 사용할 수 있도록 제작하도록 한다.
사실 원래 카카오처럼 웹 접근성에 대해 진지하게 고민하고 적용하고자 해야한다.
장애인은 서비스를 사용하지 않는 고객이 아닌, 잠재 고객으로서 판단하여 모든 사람들의 접근을 생각해야한다.
물론 장애인 뿐만이 아닌 일반인도 특정 상황에서 행동에 제약이 생길 수 있기에 더욱 중요하게 생각해야 한다.
아무래도 디자인, 프론트 개발 모두 나 혼자 맡기 때문에 모든 상황에 대한 웹 접근성을 고려하기란 쉽지 않을 것이라고 생각한다.
하지만! 이번 프로젝트에선 최대한 할 수 있는 부분은 맞추고 싶다.
