구글 매터리얼 디자인 Foundations / Accessibility 접근성 Part 2. Patterns

Color & Contrast 색상과 대비 

색상 및 대비를 사용하여 사용자가 어플리케이션의 내용을 보고 해석하고 올바른 요소와 상호작용하며 작업을 이해하는 것을 도울 수 있다. 색상은 분위기, 색조 및 중요한 정보를 전달하는 데 도움을 줄 수 있다. 기본 색상과 보조색상 및 강조 색상은 사용성을 지원하도록 선택할 수 있다. 요소 간의 충분한 색상 대비는 저시력 사용자가 어플리케이션을 보면서 사용하는데 도움을 줄 수 있다. 

1. Contrast ratios 대비 비율 

색상 대비는 사용자들이 다양한 텍스트 요소와 비텍스트 요소를 구분하는데 중요한 역할을 한다. 낮은 대비의 이미지는 어떤 사용자들에게는 해가 쨍쨍한 밝은 날이나 밤이라 어두운 환경 조건 아래에서 구분하기 어려워 보이는 반면 더 강한 대비는 알아보기 쉬운 이미지를 만들어낸다. 

대비 비율은 하나의 색상이 다른 색상과 얼마나 다르게 표현되는지를 보여주는 지표로 보통 1:1 또는 21:1로 쓰여진다. 비율에서 두 숫자 사이의 차이가 클수록 색상 간의 상대적인 휘도 차이가 커진다. W3C에 따르면 색상과 배경의 명암비는 휘도(방출되는 빛의 강도)에 따라 1부터 21까지이다. 

W3C에서 권장하는 본문 및 이미지 텍스트에 대한 대비 비율은 아래와 같다. 

비활성화된 상태와 작동 불가능한 상태에서는 대비 요구 사항을 충족할 필요는 없다. 

2. Clustering elements 군집 요소 / 요소 군집

버튼 컨테이너와 같은 비텍스트 요소들 중 일부는 컨테이너의 색상과 배경 색상 간의 대비 비율이 3:1이어야 한다. 요소와 색조를 결합하려면 다음 패턴을 고려해 보도록 한다. 요소를 결합할 때의 대비와 기능적 변화에 대한 매터리얼의 연구에 기초해 요소와 색조를 결합하는 방법을 생각해 보기 바란다. 

버튼 그룹과 같이 다른 버튼과 군집되어 있는 요소들은 사용자가 그룹에서 각각의 버튼을 구별할 수 있어야 한다. 이런 요소들은 요소 자체와 배경 간의 3:1 대비비를 준수할 때 이점을 얻는다. 

+ 좌: 버튼을 포함하는 컨테이너의 색상(버튼의 배경색)이 배경색상에 비해 3:1보다 낮아 표준에 부합하지 않는다. + 우: 버튼을 포함하는 컨테이너의 색상(버튼의 배경색)이 배경 색상과 3:1 비율을 이룬다.  

FAB와 같이 화면의 다른 요소와 별개로 독립적으로 사용되는 요소는 이미 눈에 띄기 때문에 사용자가 구별할 수 있다. 이러한 요소는 요소 자체와 배경간의 3:1 대조로 이점을 얻지 않는다. 

요소들을 모아서 함께 배치할 때에는 구성 요소 또는 각 구성 요소들의 유형을 사용하여 구성 요소과 배경 간에 최소 3:1의 대비를 이루도록 한다. 

Text Resizing 텍스트 리사이징 

1. Background 배경

저시력자 또는 큰 텍스트를 선호하는 사용자는 UI에서 텍스트 크기를 키울수 있어야 한다. 이러한 조정은 종종 디바이스 OS 설정이나 인앱 옵션을 통해 이루어지디호 한다. UI는 최소 200%의 텍스트 배율을 지원해야 한다. 

대부분의 컴포넌트들은 텍스트 크기가 조정되어도 동일하게 작동한다.

• 텍스트 및 선의 두께가 비례적으로 확대되고, 축척 값이 곱해진다. 
• 패딩은 기본 크기의 1배로 일정하기 유지된다.
• 컴포넌트의 각격은 기본 크기의 1배로 일정하게 유지된다. 

디바이스의 OS에서 텍스트 크기를 컨트롤하지 않을 때 사용자가 텍스트 크기를 키울 수 있도록 1.5배 또는 2배와 같은 승수를 제공한다. 승수를 사용하여 텍스트 크기를 조정하면 소수점 값이 나올 수는 있지만 이 방법으로 구현하는 것이 더 효율적이다. 곱셈을 사용하여 글꼴 크기를 계산하려면 기본 글꼴 크기(밀도=0)를 선택하고 축척 값을 곱한다. 

예를들면, 1배 표준 화면에서 폰트 크기가 14pt일 경우 2배로 키우면 28pt가 된다.

프로그레스바나 체크박스 또는 라디오 버튼과 같이 텍스트가 포함되지 않은 구성 요소는 텍스트 크기 조정의 영향을 받지 않는다. 

2. Methods 방법 

컨테이너 크기를 키우거나, 레이아웃을 변경하거나, 스크롤을 만들거나, 툴 팁을 추가하여 일반적인 텍스트 크기 조정 문제를 방지할 수 있다. 

1) 비반응형 컨테이너, 의도치 않게 덱스트가 잘려버림 2) 비반응형 텍스트 크기 3) 요소와 겹침 4) 원치 않는 잘림

1) Increase container size 컨테이너의 사이즈를 키운다. 

컨테이너의 크기를 조정하면 텍스트가 겹치거나 잘리거나 잘리는 것을 방지할 수 있다. 시선이 한 줄의 끝에서 다음 줄의 시작까지 따라 다시 흘러갈 수 있는지 고려해야 한다. 

1) 1배 비율의 UI에서는 버튼이 나란히 옆으로 놓여지는 것이 표준 레이아웃이다. 2) 2배 비율의 UI에서는 텍스트 크기가 변경되어 버튼들이 가로 너비의 한계에 맞게 쌓여서 표현된다.

2) Reflow the layout 배치를 바꾼다. 

컴포넌트가 특히 길어질 경우에는 레이아웃을 다시 적용하는 것을 고려해야 한다. 더 큰 텍스트를 수용하기 위해 컴포넌트들을 나란히 고정하여 배치할 것이 아니라 세로로 줄바꿔 겹쳐 쌓을 수 있다. 

3) Enable content to scroll 스크롤되도록 만든다. 

확대된 텍스트의 긴 문자열이 한 화면에 다 들어오지 않을 때 스크롤을 추가하여 더 많은 콘텐츠에 접근 가능하도록 해야 한다. 세로 스크롤이 가로 스크롤보다 더 좋다. 사용자에게 세로 스크롤과 가로 스크롤을 동시에 사용하게 할 것이 아니라 한 방향으로만 스크롤하도록해야 한다. 

4) Use long press tooltips to provide enlarged labels 확장된 설명(이름표, 레이블)을 제공하기 위해 길게 누르는 툴팁을 사용한다. 

네비게이션 바 및 툴바 등과 같은 일부 컴포넌트는 공간 및 글자 수의 제한이 엄격한 공간에 텍스트를 배치한다. 이런 상황에서 UI에 확대된 내용을 표시하기 위해서는 툴팁을 추가할 수 있다. 이 경우 축소된 텍스트를 길게 누르면 도구 설명에 표시되는 동안 컴포넌트의 텍스트 크기는 1배로 유지된다. 확대된 텍스트를 표시하기 위해 툴팁을 사용하는 최적의 선택은 다음과 같다. 

• Top app bar 상단 툴바, 앱바
• Navigation bar 네비게이션 바 
• Navigation rail 네이게이션 레일 (바 형태랑 무엇이 다른가?) 
• Tabs, when fixed to the top of a screen and don’t move off-screen upon scrolling 화면 상단에 고정되어 있고 스크롤 시 화면 밖으로 이동하지 않는 경우의 탭

 

사실 이 내용을 다 지키려면 지금 작성한 디자인을 갈아 엎어야 할 것 같습니다만, 내일 다시 생각해 보기로 하겠습니다. 어휴, 이제 적용을 위한 디자인 한 챕터 남았습니다. 접근성, 이제 더는 궁금하지 않을 것 같습니다.