웹 접근성을 준수하는 컬러 파운데이션 설계하기
'웹 접근성 : Web accessibility'
웹 접근성은 장애 유무에 제약 없이 모두가 웹 사이트를 사용할 수 있게 하는 것을 의미한다.
웹 기반의 제품을 만드는 디자이너라면 익숙할 개념이지만, 막상 국내 웹 사이트의 웹 접근성 수준이 미흡하다는 기사를 종종 찾아볼 수 있다.
웹 접근성 준수를 위해 고려해야 하는 여러 기준이 있지만, 디자인 시스템 컬러 파운데이션 설계에서 고려할 수 있는 부분에 대해 얘기해보고자 한다.
인식의 용이성(Perceivable)
정보와 사용자 인터페이스 요소는 사용자가 인식할 수 있는 방법으로 제시되어야 한다는 지침이다.
지침 1.4 식별 가능(Distinguishable)
: 배경으로부터 전경을 분리하는 것을 포함해, 콘텐츠는 사용자가 더 쉽게 보고 들을 수 있도록 제작되어야 한다.
색상 관련 지침을 요약하자면 아래와 같다.
*로고 컬러나 disabled 상태의 경우 예외로 한다.
[텍스트 컬러 접근성 기준]
배경색과의 명도 대비 최소 4.5 : 1
18pt(24px) 이상 또는 14pt(18.5px) 이상의 굵은 폰트 사용 시 3 : 1까지 낮출 수 있다.
[텍스트가 아닌 콘텐츠 컬러 접근성 기준]
배경색과의 명도 대비 최소 3 : 1
위 지침을 기존 디자인 시스템의 파운데이션 컬러가 준수하는지는 확인할 수 있는 2가지 방법이 있다.
1. 피그마 플러그인 사용하기
Able : 배경과 텍스트 색이 될 컬러가 지정된 레이어를 각각 선택 시 대비를 확인할 수 있는 플러그인으로, 피그마 내에서 바로 대비를 확인하기에 편리하다.
2. 색상 대비 검사기 사용하기
Contrast Finder : 배경색과 글자색을 입력 후 원하는 명암비를 선택 시 현재 명암비를 알려주고, 기준에 맞지 않을 시 명암비에 맞는 새로운 색상을 추천해 주어 색상 변경이 필요할 때 용이하다.
색상 지정 시 소소한 팁 !
1. 디자인 시스템 상에서 semantic 컬러 중 배경에 사용할 목적으로 지정해 둔 색상이 있다면, 해당 컬러들과의 대비를 모두 확인하는 것을 추천한다.
background-normal, background-alternative 등 배경색으로 사용할 수 있는 토큰값을 규칙화하면 접근성 기준을 확인할 때 고려하지 못한 케이스를 방지할 수 있다.
2. 만약 text semantic 컬러를 따로 지정하지 않았다면, 추가하는 것을 추천한다.
위 지침에서 확인할 수 있듯 텍스트와 텍스트가 아닌 콘텐츠의 최소 명도 대비 기준이 다르기 때문에 텍스트 컬러를 구분하여 관리하는 것이 용이하다. (텍스트 기준에 모든 콘텐츠 대비를 맞추기엔 디자이너의 의도대로 화면 내 위계를 표현하거나, 시각적 아름다움을 유지하기에 어려울 수 있다.)
3. 디자인 시스템 내 컴포넌트에 투명도(transparent)를 적용하는 것은 추천하지 않는다.
컴포넌트 배경 컬러에 투명도가 있다면 화면 내 배경 컬러와 합쳐져 명암비에 준수하지 못하는 경우가 생길 수 있다. 모든 경우를 미리 측정할 수 있다면 괜찮지만, 다양한 경우를 고려하며 골머리를 앓게 될 수 있다..*경험담)
[참고자료]
웹 접근성 지침 원문
웹 접근성 지침 번역본
구글 material design 웹 접근성 지침
네이버 접근성 지침 널리
