ADA compliant

스케치앱 웹 접근성 글자 명도 대비 (ADA Compliant)

저시력 사용자가 웹사이트나 모바일애플리케이션에 충분히 접근할 수 있도록 하기 위해 글자의 인식성과 가독성은 필수적이다. 보통은 글자의 크기, 전경색, 그리고 배경색의 명도 대비를 통해 이 부분을 충분히 패스했는지 알 수 있다.

이 부분이 그냥 넘어갈 수 없는 이유 중에 하나가 사용자가 글자를 제대로 인식하거나 읽지 못해서 (글자 사이즈가 작거나 낮은 색상대비) 법적인 문제가 발생했을 시 소송까지 가는 경우가 많기 때문이다. 물론 개인 웹사이트는 크게 상관없지만 있거나 상업적인 사이트들은 큰 문제가 될 수 있다.


그동안은 웹에서 제공하는 Contrast Checker 등을 이용하여 일일히 하나씩 글자의 색상을 복사 붙여넣기하며 확인했지만, 이제 훨씬 편하게 스케치앱에서 확인할 수 있는 방법이있다.






1. 깃허브 에서 Color Contrast Analyser를 설치

깃허브에 있는 Sketch Color Contrast Analyser 링크에 들어가서 Clone or Download 버튼을 클릭 후 Download ZIP 버튼을 클릭한다. 플러그인 파일을 설치 후 스케치 앱을 열어본다.






2. 테스트


스케치 앱을 오픈한 후 색깔이 있는 직사각형 오브젝트 상단에 글자를 만든 후 두 오브젝트를 동시에 선택한다. 


color contrast test




그 후에 상단 메뉴의 Plugins > Color Contrast Analyser를 클릭한다. 바로 결과값이 나온다. 첫 번째 그룹은 ADA Compliant를 패스하지 못했다. 


ADA Compliant Test — Failed

 


첫 번째, 두 번째, 그리고 세 번째 그룹을 번갈아가면서 검사해봤다. 이렇게 FAILED / LEVEL AA / LEVEL AAA 총 3단계의 결과가 나온다. LEVEL AA만 넘어도 웹 접근성 /ADA Compliant는 패스한다고 보면 본다. 보통 클라이언트의 규모나 법적인 부분에 근거해 ADA LEVEL은 달라질 수 있다.

하지만 보통은 AA만 패스해도 된다. Color Contrast Analyser 플러그인은 스케치 앱으로 디자인을 하며 정말 유용하게 사용될 수 있는 툴이기에 디자이너분들에게는 적극 추천한다.


Color Contrast Analyser로 글자 명도 대비 검사 중
Color Contrast Analyser



추가로 최근에 발견한 Stark Color Contrast 플러그인을 적극적으로 추천한다. 스케치 앱, 피그마, XD에서 전부 이용할 수 있고, 위에 설명한 Color Contrast Analyser와 같은 기능이지만, 단축키 사용이 가능하여 여러 번 클릭 없이 바로 글자 명도 대비를 확인할 수 있다. 단축키 커맨드 + 시프트 + P

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top