검사항목 1.4 콘텐츠의 명도 대비

화면에 표시되는 모든 정보는 전경색과 배경색을 분명하게 구분될 수 있도록 제공되어야 한다.

필요성

저시력, 노안이 있는 사용자는 시력이 낮고 색상을 구분하는 능력이 떨어지기 때문에 배경색과 콘텐츠(텍스트, 아이콘 등) 간의 색상 차이가 분명하지 않은 경우, 콘텐츠를 인식하는 것이 매우 어렵거나 불가능할 수 있다. 그러므로 시각적으로 표시되는 모든 정보는 배경색과의 명도 대비가 최소 3:1 이상으로 제공되어야 한다. 저시력 사용자에게 실질적인 도움이 되기 위해서는 4.5:1 또는 7:1 이상을 권장한다.

참고: 배경색과 콘텐츠의 색상의 차이는 명도(밝기) 값으로 비교하고, 명도 값의 차이는 명도 대비로 표시한다.

대상

시각장애
색각이상
노약자

체크리스트

텍스트와 의미가 있는 아이콘, 버튼, placeholder 등의 콘텐츠도 명도 대비 3:1 이상을 준수하였는지 확인
내부에서 제작 관리하는 광고의 텍스트 명도대비 3:1 이상을 준수하였는지 확인
- 로고, 장식 목적의 콘텐츠, 비활성화되어 사용할 수 없는 요소는 명도대비 항목의 적용 대상에서 제외
애플리케이션 내에서 명도 대비를 높일 수 있는 설정 기능을 제공하였는지 확인

주의사항

설정에서 고대비 테마와 같이 높은 명도대비로 변경할 수 있는 옵션을 제공하고 있을 시 준수
고대비 테마를 제공하고 있으나, 충분한 명도대비를 제공하지 않을 경우, 미준수

테스트 방법

모바일기기에서 화면을 캡쳐한다.
캡쳐한 이미지를 PC로 가져온다.
이미지를 열고 명도대비 검사툴(Colour Contrast Analyser)을 사용해서 의미가 있는 콘텐츠(텍스트, 아이콘 등)와 배경 간의 명도 대비를 측정한다.

일반적으로 Colour Contrast Analyser를 이용하여 확인

QA 지표

오류 수

의미가 있는 콘텐츠(텍스트, 아이콘, 버튼, placeholder 등)와 배경 간의 명도 대비가 3:1 미만인 콘텐츠 수
배경색이 그라데이션과 같이 고르지 않을 때 명도 대비가 가장 낮은 곳이 3:1 미만인 콘텐츠 수

예외사항

다음의 경우는 오류 수에 포함하지 않음

정보가 없이 단순히 장식 목적으로 사용된 콘텐츠
사용할 수 없음 (disabled)을 나타내기 위해 명도대비를 낮춘 컨트롤 또는 입력서식 등의 콘텐츠
기업 UI의 고유 색상인 경우, 수정 권장

적용기술

의미와 기능을 갖는 모든 객체는 최소 3:1 이상의 명도대비를 준수해야 하며, 저시력인에게 실효성을 가지기 위해서 주요 콘텐츠는 4.5:1 또는 7:1 이상이 되는 것이 바람직하다.
명도 대비를 높게 제공하기 어려운 경우에는 운영체제에서 제공하는 고대비 기능을 활용할 수 있도록하거나 애플리케이션 내에서 명도 대비를 높일 수 있는 설정 기능을 제공해야 한다.

편집창 내부 placeholder의 준수

편집창 내부에만 용도, 입력양식 등을 표시한 경우 반드시 준수해야 함

ex) 아이디입력, 8자 이상 숫자만 포함, id@domain.com

예외: 편집창 외부에 동일한 정보가 있고, 편집창 내부에 중복 또는 단순한 지시가 제공된 경우

ex) 아이디를 입력하세요

iOS

편집창 내부 placeholder 색상 조절 방법

UItextField (텍스트 필드)

placeholder 제공방법

_textfieldtext.placeholder=@"아이디";

색상 변경 방법

// 색상값 사용
[_textfieldtext setValue:[UIColor blackColor] forKeyPath:@"_placeholderLabel.textColor"];

// RGBA 사용
[_textfieldtext setValue:[UIColor colorWithRed:255.0 green:255.0 blue:255.0 alpha:1.0] forKeyPath:@"_placeholderLabel.textColor"];

UIsearchBar (검색창)

placeholder 제공방법

_searchtext.placeholder=@"검색";

색상 변경 방법

// 색상값 사용
[_searchtext setValue:[UIColor blackColor] forKeyPath:@"_searchField.placeholderLabel.textColor"];

// RGBA 사용
[_searchtext setValue:[UIColor colorWithRed:255.0 green:255.0 blue:255.0 alpha:1.0] forKeyPath:@"_searchField.placeholderLabel.textColor"];