저시력 사용자가 웹사이트나 모바일애플리케이션에 충분히 접근할 수 있도록 하기 위해 글자의 인식성과 가독성은 필수적이다. 보통은 글자의 크기, 전경색, 그리고 배경색의 명도 대비를 통해 이 부분을 충분히 패스했는지 알 수 있다.
이 부분이 그냥 넘어갈 수 없는 이유 중에 하나가 사용자가 글자를 제대로 인식하거나 읽지 못해서 (글자 사이즈가 작거나 낮은 색상대비) 법적인 문제가 발생했을 시 소송까지 가는 경우가 많기 때문이다. 물론 개인 웹사이트는 크게 상관없지만 있거나 상업적인 사이트들은 큰 문제가 될 수 있다.
그동안은 웹에서 제공하는 Contrast Checker 등을 이용하여 일일히 하나씩 글자의 색상을 복사 붙여넣기하며 확인했지만, 이제 훨씬 편하게 스케치앱에서 확인할 수 있는 방법이있다.
1. 깃허브 에서 Color Contrast Analyser를 설치
깃허브에 있는 Sketch Color Contrast Analyser 링크에 들어가서 Clone or Download 버튼을 클릭 후 Download ZIP 버튼을 클릭한다. 플러그인 파일을 설치 후 스케치 앱을 열어본다.
2. 테스트
스케치 앱을 오픈한 후 색깔이 있는 직사각형 오브젝트 상단에 글자를 만든 후 두 오브젝트를 동시에 선택한다.
그 후에 상단 메뉴의 Plugins > Color Contrast Analyser를 클릭한다. 바로 결과값이 나온다. 첫 번째 그룹은 ADA Compliant를 패스하지 못했다.
첫 번째, 두 번째, 그리고 세 번째 그룹을 번갈아가면서 검사해봤다. 이렇게 FAILED / LEVEL AA / LEVEL AAA 총 3단계의 결과가 나온다. LEVEL AA만 넘어도 웹 접근성 /ADA Compliant는 패스한다고 보면 본다. 보통 클라이언트의 규모나 법적인 부분에 근거해 ADA LEVEL은 달라질 수 있다.
하지만 보통은 AA만 패스해도 된다. Color Contrast Analyser 플러그인은 스케치 앱으로 디자인을 하며 정말 유용하게 사용될 수 있는 툴이기에 디자이너분들에게는 적극 추천한다.
추가로 최근에 발견한 Stark Color Contrast 플러그인을 적극적으로 추천한다. 스케치 앱, 피그마, XD에서 전부 이용할 수 있고, 위에 설명한 Color Contrast Analyser와 같은 기능이지만, 단축키 사용이 가능하여 여러 번 클릭 없이 바로 글자 명도 대비를 확인할 수 있다. 단축키 커맨드 + 시프트 + P
