•
웹 접근성을 고려한 텍스트 컬러 시스템 가이드 만들기(아티클)
•
컬러 시스템
Primary, Secondary, Tertiary, Gray/Neutral, Blue, Green, Red, Yellow 로 구성
•
Accent color : Primary, Secondary, Tertiary
브랜드 정체성과 관련 있는 색상, Primary 하나만 사용하거나 Secondary, Tertiary를 함께 사용하기도 한다.
화면에서 가장 강조되는 액션을 Primary 색상으로 표시한다. UI 위계에 따라 색상을 설정하여 중요도를 인식시킬 수 있다.
•
Neutral : Gray, Black
배경, 구분선, 텍스트 등 레이아웃을 구성하고 계층 구조를 전달하기 위해 가장 일반적이고 다양한 방식으로 사용되는 색상이다.
•
Semantic color : Blue, Green, Yellow, Red
긍정과 부정같이 색상 자체에 의미를 포함하는 색상이다. 보통 Blue, Green, Yellow, Red 4가지 색상으로 제공된다. 파란색은 정보, 초록색은 성공, 노란색은 주의, 빨간색은 경고를 표시한다. 색각이상자를 위하여 명확한 의미 전달을 위해 주로 아이콘과 함께 사용된다.
•
Data visualization color
브랜드 감성과 사용 목적이 명확하지 않은 비주얼 컬러도 있다.
뱃지 또는 시각화 구분이 필요한 UI에 사용된다. 각 색상들은 저시력자를 위하여 철저한 대비를 고려하여 구성되는 편이다.
•
Neutral scale
Neutral, Gray 팔레트는 디자인에서 가장 많이 사용되는 색상이다. 텍스트, 아이콘, 배경, 구분선 등 레이아웃을 구성하고 인터페이스 위계를 표현하는 데에 중요한 색상이다.
웹 접근성 지침(WCAG)
•
명암비(Contrast radios)는 한 색상과 다른 색상 간의 차이를 나타낸다. 빛의 강도에 따라 1~21 값을 가진다. 1~21: 1 형식으로 표현한다. 명암비가 높을 수록 잘 보인다. 요소 사이의 색상과 대비가 충분해야 저시력자가 문제없이 서비스를 이용할 수 있다.
•
레벨 AA(최소 대비)
•
일반 텍스트 = 최소 4.5:1
•
큰 텍스트(최소 18pt) 또는 굵은 텍스트(최소 14pt) = 최소 3:1
•
레벨AAA(향상된 대비)
•
일반 텍스트 = 최소 7:1
•
큰 텍스트(최소 18pt) 또는 굵은 텍스트(최소 14pt) = 최소 4.5:1
•
예) Adobe spectrum
기본 배경 색상 Gray-100 기준으로 4.5:1 명암비를 충족하는 범위를 Gray-600 이상,
3:1 명암비를 충족하는 범위를 Gray-500 이상으로 표시
범위 내에서도 통일성 있는 디자인을 위하여 총 4가지 색상만 텍스트에 사용하는 것으로 가이드 되어있음.
•
Gray-900 : Heading (주로 타이틀)
•
Gray-800 : Text (기본)
•
Gray-700 : Subdued Text (서브 텍스트)
•
Gray-500 : Disabled text (비활성 텍스트)
Gray-500의 경우 비활성화 텍스트, 플레이스홀더 또는 꾸밈요소로 사용하는 목적이기 때문에 최소 대비값 4.5:1을 충족하지 않는다. 비활성화된 텍스트는 고객에게 상호 작용을 할 수 없다는 것을 명확하게 나타내야하기 떄문에 기본 정보보다 위계를 낮게 표시할 수 있다.
•
Google Material design도 웹 접근성을 고려한 색상 팔레트를 구성하고 있다.
색상 팔레트에서 40단계가 차이 나면 3:1, 50단계 차이는 4.5:1, 70단계 이상 차이는 7:1 차이가 난다.
•
Contrast 체크하기
•
명암비 체크 사이트
•
•
•
•
피그마 플러그인 :
•
시멘틱 컬러 참고(아티클)
•
Semantic 컬러
시멘틱은 '의미'를 뜻한다. 시멘틱 컬러는 색상에 사용 목적을 부여하여 이름 짓는 방식이다.
Black, Gray처럼 실제 색상 자체의 의미는 없는 색상들도 정책적으로 네이밍 할 수도 있다.
시멘틱 네이밍은 색상, icon, size, spacing, shadow 등 디자인 기본 요소에 적용할 수 있다.
•
예) Gray 900 (Base color : 특정 기준으로 정렬된 색상 범위) --> Text_default (Semantic Color : 색상의 용도, 사용 목적)
•
시맨틱 컬러로 가이드 만들기
•
Text, Icon, Border, Divider, Background 5가지로 구분
•
색상 이름 외에도 구체적으로 어떻게 사용할 수 있는지 이해할 수 있도록 우측에 Role 추가
•
사용 목적에 따라서 네이밍 하기 때문에 동일한 Base color가 다른 이름의 Semantic color로 생성되어 다소 많아 보일 수 있다.
•
실제 색상을 적용할 때 UI 요소에 따라 그룹핑 되므로 선택지가 줄어들고, 색상 카테고리와 이름을 확인하고 용도에 맞게 디자인에 적용할 수 있게 된다.
•
나의 생각
컬러 시스템이 웹 접근성 기준으로 구성할 수 있다는 것을 배웠다. 구글 머터리얼 디자인에서 컬러 팔레트 도구를 이용해서 만들어 본 적이 있는데, 웹 접근성을 고려해서 구성됐다는 것은 몰랐던 것 같다.
비활성화 텍스트는 상호 작용 할 수 없기 때문에 4.5:1을 충족하지 않아도 된다. 3:1 명암비 정도로 사용하는 사례(어도비 스펙트럼 컬러 시스템)를 참고해서 적용해보려고 한다.
컬러 파레트 도구에 의존하다가 기준을 이해하지 못하고 사용하는 경우가 있었는데, 웹 접근성 기준이 사용된다는 것을 알게되어 도움이 됐다.
•
출처 :