웹 접근성의 명도 대비 확인을 수월하게 해주는 Contrast Grid

#1946

Contrast Grid UI

https://contrast-grid.eightshapes.com/

웹 접근성 프로젝트를 진행할 때 지켜야 하는 항목 중에 색상 문제가 있습니다. 저시력자들을 위하여 배경색과 본문 텍스트의 색상을 읽기 쉽도록 가능한 고대비를 사용하는 방식을 나타내는 항목인데요. 판단 기준은 색상에 따라서 AA(4.5), AAA(7)의 기준을 충족시켜야만 통과가 가능합니다.

기본적으로는 4.5:1을 충족하면 문제가 없지만, AAA(7:1)를 충족시키기 위해선 대비가 더 높아지게 됩니다. 이러한 작업을 할 경우 매번 컬러를 찍어가면서 하는 방법이 있을 수 있지만, 해당 서비스를 사용하여 초기부터 컬러 가이드가 잡혀 있다면 해당 색상을 일괄적으로 반영시킨 뒤에 하나의 화면에서 기준에 부합하지 않는 경우에 대하여 사전에 파악이 가능할 것 같습니다.

주요 메뉴

Rows & Columns

대비를 확인하기 위한 색상값과 사용되는 요소에 대한 타이틀을 적용시킬 수 있는 textarea로 되어 있습니다. '샘플텍스트'처럼 한글로 변경도 가능합니다.

Tile Size

오른쪽 화면의 타일 요소들의 크기를 조정할 수 있는 메뉴로 80, 100, 150의 3가지 사이즈를 제공하고 있습니다.