[UX] 구글 머티리얼 디자인 – 3.5.머티리얼 기초(Material foundation) – 색상(Color): 문자 가독성(Text legibility)
색상은 문자 가독성에 있어 중요한 역할을 합니다. 이를 미루어 보아 머티리얼 디자인에서 문자의 가독성을 높이기 위해 단순히 글꼴의 크기나 스타일을 적용하는 것 외에 색상을 적극적으로 활용한다는 것을 알 수 있습니다.
출처: 원문보기
1. 가독성 표준 (Legibility standards)
1.1. WCAG 표준 (WCGA standards)
문자 가독성과 관련한 모든 사항은 접근성 표준을 만족해야 합니다. 접근성 표준이란 시각 장애인이나 노인들과 같이 시력이 부족한 사람들에게도 해당 콘텐츠를 전달하기 위한 최소한의 표준 규격이라고 생각하면 되겠습니다. 한국 뿐만 아니라 전세계적으로 해당 규격이 존재하며, 휴대폰의 설정에서도 이를 적용하기 위한 설정을 쉽게 확인할 수 있습니다.
웹 콘텐츠 접근성 지침(The web contents accessibility guidelines, WCAG 2.0)의 레벨 AA는 문자와 배경 사이의 색상 대비를 일반 문자의 경우 4.5:1, 크기가 큰 문자의 경우 3:1을 요구합니다.
색상, 대비, 접근성 디자인과 관련한 사항은 이후에 Material design accessibility에서 다시 별도로 다루겠습니다.
2. 문자 배경색 (Text backgrounds)
2.1. 색상이 적용된 배경색 위의 문자 (Text on colored backgrounds)
검정색 문자 사용시, 배경색은 밝은 색상의 사용이 권장됩니다. 당연한 이야기겠지만 반대로 흰색 문자 사용시, 배경색은 어두운 색상을 사용해야 합니다. 앱에서 밝은 테마(Light theme)와 어두운 테마(Dard theme)를 동시에 지원한다면 각각의 테마에서 문자가 배경색과 대비를 충분히 이루고 있는지 반드시 검토해야 합니다.
배경이나 문자에 따로 색상을 적용했다면 문자의 불투명도나 문자가 선택된 상태에 따라서 배경색과 관련된 규칙도 변경이 되어야 합니다.
다시 말해, 특정 테마에서 해당 문자와 배경이 색상 대비를 적절히 이루고 있다고 하더라도 다른 테마에서의 해당 문자와 배경이 색상 대비를 제대로 이루는지 검토를 위해 문자의 투명도나 상태(예: 마우스 오버 시 문자 색상이 변경되는 상태)를 같이 검토하라는 의미입니다.
2.2. 문자 불투명도 사용 (Using text opacity)
색상이 적용된 배경 위에서 회색 문자(Text)와 아이콘(Icon)을 사용하는 대신에 흰색이나 검정색 문자의 불투명도를 조절하여 회색 문자를 사용하는 것보다 더 나은 색상 대비 효과를 나타낼 수 있습니다. 설명이 조금 어렵지만 아래 예시 내용을 보면 이해할 수 있습니다.
예를 들어, 녹색 배경색 위에 출력된 75%의 불투명도를 가진 검정색 문자는 녹색 빛을 띄는 검정색으로 표현됩니다.
녹색 배경에 불투명도를 조절하지 않은 일반 회색을 출력하는 사례와 검정색의 불투명도를 조절한 차이는 다음과 같습니다.
그림에서 보는 바와 같이 배경색이 없이 흰색 배경 위에 문자가 출력될 경우, 회색과 검정색에 불투명도를 조절한 두 문자의 색상은 같은 색상으로 보이지만 녹색 배경에서 출력된 두 문자의 색상은 다릅니다. 실제 회색을 적용한 문자의 경우 배경색이 녹색인 경우에 배경색과 충분한 색상 대비를 이루지 못해 가독성이 떨어지는 것을 볼 수 있습니다.
이러한 이유에서 문자에 회색을 사용하기 보다는 검정색 문자 색상의 불투명도를 조절하여 회색 표현을 하라고 하는 것입니다.
위와 같이 검정색 글자의 불투명도를 조절하지 않고 실제 색상을 적용하고 싶다면 다음과 같은 대안을 생각해볼 수 있습니다.
- 녹색 배경 위에서 불투명도를 낮춘 검정색 글자를 위치시켜 봅니다.
- 이 녹색 빛을 띄는 검정색 문자의 hex 값을 확인합니다.
- 문자의 색상에 해당 hex 값을 갖는 색상을 사용합니다.
위 설명에서 두 번째 항목이 다소 이해가 안 될 수도 있을 것 같아 부연 설명을 하면 불투명도를 낮춘 검정색 문자는 흰색 배경에서는 회색으로 보이지만 녹색 배경색 위에서는 녹색빛을 띄는 검정색처럼 보인다고 위에서 설명했습니다. 배경에 녹색빛이 투영되어 검정색 처럼 보이는 이 문자의 hex 값을 찾는 것입니다.
이유는 흰색 배경에서는 회색을 그대로 사용하고, 녹색과 같이 배경색상이 별도로 지정된 상황에서 검정색의 불투명도를 조정하지 않고, 해당 색상을 직접 사용하고 싶다면 이와 같이 역으로 색상값을 찾아서 적용할 수 있다는 것입니다.
이 경우, 문자 뒤에 출력되는 표면의 색상값이 변경되면 문자의 hex 값도 같이 회색에서 해당 색상의 hex값으로 반드시 변경해줘야 합니다.
이처럼 문자의 가독성을 위해 향후 불필요한 프로그래밍이 늘어날 수 있는 요소가 있기 때문에 머티리얼에서는 문자를 회색으로 표현하는 방법으로 검정색의 불투명도를 조절하라고 안내하고 있는 것입니다.
담당자는 색상을 사용할 때, 이러한 내용을 반드시 검토할 수 있어야 하며, 기존과 같이 불투명도를 활용하지 않고, 실제 색상을 적용할 경우 이에 대한 추가적인 검토를 반드시 해야한다는 것을 명심해야 합니다.
이는 문자에 회색이 세련된 색상 표현 등을 위해 자주 사용되지만 이러한 검토를 제대로 하지 않는 경우가 많기 때문에 특히 주의를 하라는 것으로 머티리얼 디자인에서 별도로 안내하고 있는 것입니다.
2.3. 밝은 배경색상에서의 어두운 문자 사용 (Dark text on light backgrounds)
그렇다면 여기서 드는 의문은 도대체 검정색 문자에 불투명도를 얼마나 적용해야 밝은 배경색(기본값인 흰색)에서도 잘 색상 대비를 이루고, 배경색상이 적용되는 상황에서도 무난하게 색상 대비를 이룰 수 있는가 하는 것일 겁니다.
이러한 질문에 준비라도 했듯 머티리얼은 다음과 같이 안내를 하고 있습니다.
밝은 배경색 환경에서의 어두운 글자(여기서는 흰색, #FFFFFF위에 출력되는 검은색, #000000)는 다음과 같은 불투명도를 적용합니다.
- 강조가 많이 필요한 문자(High-emphasis text)는 87%의 불투명도(Opacity)
- 중간 정도의 강조가 필요한 문자(Medium-emphasis text)는 60%의 불투명도(Opacity)
- 불가능을 표현하는 문자(Disabled text)는 38%의 불투명도(Opacity)
위 그림은 각각의 문자가 흰색 배경에서 출력되는 것을 나타내고 있습니다.
여기서 중요한 것은 불가능을 표현하는 문자 표현입니다. 거의 모든 앱에서 사용되는 문자지만 실제로 제대로 문자 가독성을 지키는 경우는 실무에서 찾아보기 어렵습니다. 혹은 디자이너가 임의로 회색을 표현하는 경우가 많지만 38%의 불투명도 값을 적용해야 한다는 것을 머티리얼에서 정확히 안내하고 있으니 잘 기억해 두면 되겠습니다.
2.4. 색상이 있는 문자와 배경 사용 (Colored text and backgrounds)
색상이 있는 문자란 검정색이나 흰색이 아닌 다른 색상이 적용된 것을 의미합니다. 색상이 적용된 문자는 주의를 집중시키거나 선택적으로 강조를 하기 위해서 사용되어야 합니다. 색상이 적용된 문자는 헤드라인(제목과 같은 중요한 텍스트 개별 요소)이나 버튼, 하이퍼링크 등에 제한적으로 사용되는 것이 바람직합니다. 하지만 실무에서 이를 지키며 디자인 되는 경우는 매우 드뭅니다. 이에 따라 접근성 표준을 지키지 않는 것 중 다수의 사례가 문자의 색상을 적용하는 사례에서 발생합니다.
머티리얼 색상 도구(Material color tool)를 사용하여 배경색 위에서 접근성 표준을 충족할 수 있는지 판단할 수 있습니다.
위의 왼쪽 그림은 헤드라인(Headline) 영역에서 색상이 있는 문자가 적용된 사례를 나타냅니다. 오른쪽 그림은 본문(Body) 영역에 색상이 있는 문자가 적용되어 문자 가독성이 떨어지는 문제가 발생한 것을 나타냅니다.
본문의 경우 보통 폰트 사이즈가 작기 때문에 색상이 있는 문자를 잘못 적용하면 문자 가독성을 심각하게 저해하는 문제가 발생할 수 있기 때문에 가급적 기본 색상인 검정색, 흰색, 또는 투명도를 조절한 회색을 적용하는 것을 권장하는 것입니다.
3. 문자 형식 (Text type)
3.1. 도움말 문자 (Helper text)
도움말 문자(Helper text)는 입력창에서 어떤값을 입력하는 지에 대한 맥락(Context)을 설명합니다. 도움말 문자에는 브랜드 색상(Brand colors)이 적용될 수 있지만 WCAG 표준에 부합하는 가독성이 보장되어야 합니다.
예를 들어, 밝은 배경에서의 도움말 문자(Helper text)는 다음과 같은 불투명도 수준과 기본 hex값이 적용될 수 있습니다.
- 강조가 많이 필요한 도움말 문자(High emphasis helper): hex값이 #000000의 87% 불투명도(Opacity)
- 도움말 문자의 기본 색상(Default color helper text): hex값이 #000000의 60% 불투명도(Opacity)
- 기본 에러를 표현하는 도움말 문자(Default error helper text): hex값이 #B00020의 38%의 불투명도(Opacity)
도움말 문자의 경우 위 2.2. 문자 불투명도(Text opacity)에서 설명하는 것과 거의 동일하지만 에러를 표현하는 것에서 붉은색에 해당되는 #B00020 색상에 38% 불투명도를 적용한 색상을 사용한다는 점에서 차이가 있습니다. 에러를 표현하기 위한 문자 표현에 단순히 임의로 붉은색을 적용하지 않도록 해야 합니다.
3.2. 선택된 상태의 문자 (Selected text)
브랜드 색상을 반영하기 위해 문자가 선택되면 선택된 상태를 표현하기 위해 메인색상(Primary color) 또는 보조색상(Secondary color)을 적용합니다.
선택된 상태의 문자는 선택된 상태를 표현하는 색상에 대비하여 가독성이 보장되야 합니다. 또한 선택된 상태를 표현하는 색상(Selection color)은 배경색상과 충분한 색상 대비를 이뤄야 합니다. 선택된 상태의 문자 표현은 색상 외에도 외곽선(Outlines), 모션(Motion), 체크마크 아이콘(Checkmark icons), 또는 다른 방식으로 대체될 수 있습니다.
색상 대비에 대해 알고 싶다면 webaim.org에서 제공하는 색상 대비 분석기(Color contrast analyzer)를 사용해볼 수 있습니다.
위의 왼쪽 그림은 문자(Text), 문자가 선택된 상태를 표현하는 색상 영역(Text selection color), 배경(Background)간의 색상 차이를 나타냅니다. 위의 오른쪽 그림은 각 제품 및 서비스의 색상 팔렛트(Palette)에 따라 변경될 수 있다는 것을 보여줍니다.
3.3. 아이콘과 기타 기호 (Icons and other symbols)
아이콘과 기타 개별 요소는 WCAG 가독성 표준에 반드시 부합할 필요는 없습니다. 하지만 기능을 나타내거나 정보를 표현하기 위해 가능한 시각적으로 충분히 표현되어야 합니다.
예를 들어, 밝은 배경색(#FFFFFF)위의 어두운 색상의 아이콘(#000000) 또는 다른 개별 요소(Elements)는 다음과 같은 불투명도가 적용될 수 있습니다.
- 활성화된 상태의 아이콘(Active icons)은 87%의 불투명도
- 비활성화된 상태의 아이콘(Inactive icons)은 60%의 불투명도
- 불가능한 상태의 아이콘(Disabled icons)은 38%의 불투명도
위 그림은 검정색(#000000)의 불투명도가 적용되어 회색조로 표현된 아이콘과 기타 기호를 색상 대비로 나타내고 있습니다.
실무를 진행하다보면 비활성화된 상태(Inactive)와 불가능한 상태(Disabled)를 제대로 구분하지 못 하는 경우를 볼 수 있습니다. 비활성화된 상태는 상태가 변경되어 언제든지 활성화가 될 수 있는 요소라고 생각하면 됩니다. 예를 들어, 와이파이(WiFi) 스위치가 꺼져 있다가 켜졌다가 할 수 있는 것이 여기에 해당된다고 생각하면 됩니다. 스위치가 꺼져 있는 상태가 비활성화된 상태(Inactive)인 것입니다.
불가능한 상태(Disabled)는 안드로이드 시스템 설정에서 특정 메뉴를 보면 특정 설정이 활성화 되어야만 설정이 가능한 메뉴들이 있습니다. 이 경우 특정 메뉴가 설정되기 전까지 해당 메뉴는 불가능한 상태(Disabled)로 출력됩니다. 불가능한 상태의 요소(Elements)의 특징은 해당 요소를 선택하는 행위 만으로 해당 요소를 활성화 시킬 수 없으며, 상태 변화를 유도할 수 없다는 것에 있습니다.
5. 마무리
색상으로 문자의 가독성(Text legibility)을 표현하는 것은 접근성 표준을 위해 중요한 요소지만 디자이너들의 이해 부족으로 쉽게 간과되는 것 중 하나입니다.
디바이스에 유연하게 대응하기 위한 측면에서의 반응형 레이아웃을 고려한 것이 있었다면 색상을 통한 문자의 가독성을 표현하는 것은 일반 유저 외에도 시각적으로 불편함을 가진 유저에 대응하기 위한 측면의 의미를 갖습니다.
단순히 아름다운 디자인을 위해 임의로 색상을 적용할 게 아니라 다양한 사례에 대응할 수 있는 작업자가 되길 바랍니다.
다음 내용은 어두운 테마(Dark theme)를 적용하는 것과 관련한 내용을 설명하겠습니다. 어두운 테마 역시 접근성 표준과 관련이 있으며, 디바이스의 배터리 절약 효과를 볼 수 있기 때문에 제품의 확장성을 높이는데 영향을 주는 요소가 될 수 있습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기