인프런 커뮤니티 질문&답변

1. 보통 페이지가 구현이 된 경우는 툴을 사용하여 체크하는 것이 좋습니다. 웹페이지 관련 접근성 툴과 크롬 플러그인은 매우 다양합니다. 대표적으로 전반적인 접근성을 체크할 수 있는 크롬 내 인스펙터의 Lighthouse가 있습니다.
   
   유료 툴도 사용한 만한 가치가 있습니다. 예를 들어, 아래와 같은 도구가 있습니다.

https://www.getstark.co/support/

2. BBC 출신의 접근성 전문가가 였던 제 동료 말로는아래 웹사이트를 강력 추천 했습니다. 이 사이트는 제안하려는 색을 빠르게 체크 할 수 있습니다.

https://webaim.org/resources/contrastchecker/

3. 하지만 만약 피그마에서 체크할 경우 몇가지 제한이 있습니다.

대부분이 텍스트와 바깥 배경 강의 대비를 확인하는데, 초점이 많습니다. 제 강의에서는 페이지 전체를 체크 해주는 플러그인을 사용합니다. 이 플러그인의 한계점은 위에서 언급한데로 텍스트와 바깥 프레임 배경 사이의 대비만 체크한다는 점입니다. 다만, 보통 아이콘과 텍스트가 같은 색깔을 가진다면, 무리가 없을 것 같습니다. (도형과 배경은 3:1, 텍스트와 배경은 4.5:1)
https://www.figma.com/community/plugin/911262488575486588

4. 컬러 시스템 구축시

강의에서도 언급했듯이 사실 처음부터 완벽하게 AA를 통과하는 컬러 시스템을 구축하는 것은 불가능합니다. 처음에 브랜딩만 고려하다 접근성이 떨어지는 색을 선택하는 경우도 있습니다. 또한 컴포넌트에 색을 적용하면서도 아무리 토큰을 통해서 의미론적인 색을 정한다 할지라도 사실 완벽한 접근성은 불가능합니다. 심지어 구글 유투브의 카테고리도 접근성이 충족이 안되서 접근성 웨비나에서 탈탈 털린적이 있습니다.

결국 디자이너가 접근성이 중요하다는 인지해야합니다. 그래서 개발로 핸드오프 하기전에 접근성 체크리스트를 만들어서 항상 체크 하는 방법 등 회사 내에서 문화를 만드는 것이 중요합니다. 또한 웹표준 컬러 뿐만 아니라 키보드 포커스 등 고려할게 참 많습니다.

질문에 답변에 도움이 되셨으면 좋겠습니다. 더 궁금하신 부분 있으면 알려주세요!