앱 인터페이스에 적용하기 위해 선택한 색상은 사용자가 얼마나 쉽게 읽고 이해할 수 있는지에 영향을 줍니다. 충분한 색상 대비를 사용하면 텍스트와 이미지를 더 쉽게 읽고 이해할 수 있습니다.
충분한 색상 대비는 여러 종류의 시각장애가 있는 사용자에게 도움이 될 뿐만 아니라 직사광선에 노출되었거나 어두운 곳에 있는 등 극단적인 채광 조건에서 기기의 인터페이스를 볼 때 모든 사용자에게 도움이 됩니다.
구현
앱의 사용자 인터페이스를 구현할 때 충분한 색상 대비로 배경과 전면 색상을 지정합니다.
'명암비'는 디스플레이에 표시되는 두 가지 인접한 색상의 밝기 또는 빛 방출 강도의 차이를 계산한 것입니다. 명암비는 1~21이며(1:1~21:1로 표시되기도 함) 숫자가 증가할수록 고대비입니다. 색상 명암비 계산기와 같이 두 가지 인접한 색상의 명암비를 계산할 수 있는 다양한 도구가 있습니다.
TextView를 사용하여 텍스트를 표시할 때 android:textColor 및 android:background를 사용하여 전면 및 배경 색상을 높은 명암비로 정의할 수 있습니다. Compose에서 Text를 사용할 때 색상 변수 및 Modifier.background를 사용하여 전면 및 배경 색상을 높은 명암비로 정의할 수 있습니다.
W3C 권장사항은 다음과 같습니다.
- 작은 텍스트(18포인트 기본 또는 14포인트 굵게 이하)의 경우 최소 4.5:1
- 큰 텍스트(18포인트 기본 이상 또는 14포인트 굵게 이상)의 경우 최소 3.0:1
색상 대비 관련 참고사항
-
ImageView또는Image를 사용하여 그래픽 콘텐츠나 아이코노그래피를 렌더링할 때 전면 색상과 배경 색상의 대비가 권장 비율을 충족하거나 초과하는지 확인하세요. - 명암비는 요소의 전면 및 배경이 다른 요소 위에 중첩되었을 때 겉으로 표시된 색상을 바탕으로 측정됩니다. 정의된 색상이 ARGB 형식인 경우(16진수 값 #AARRGGBB), 불투명하지 않은 색상(알파 채널 값 255 이하)은 뒤에 렌더링된 콘텐츠와 섞여 겉보기에 다른 색상으로 표시될 수 있습니다.
- 글꼴 다듬기 및 안티 앨리어싱은 일부 콘텐츠 및 특히 획폭이 좁은 콘텐츠의 겉보기 색상에 영향을 미칠 수 있습니다. 가독성을 높이려면 명암비가 큰 색상 조합을 사용하거나 콘텐츠의 획폭을 넓힙니다.
디자인
사용자 인터페이스를 디자인할 때 인접한 색상에 충분한 색상 대비를 줄 수 있는 팔레트를 선택하세요.
- 특히 텍스트 및 아이코노그래피의 경우 W3C 가이드라인에서 최소 명암비를 참고하세요.
- 고대비 테마를 옵션으로 포함하거나 사용자가 메인 콘텐츠의 색상을 선택할 수 있도록 허용하세요.
자세한 내용은 Material Design 접근성 색상 및 대비 가이드라인을 참고하세요.
테스트
앱의 색상 대비를 직접 확인하려면 다음 단계를 따르세요.
- 앱을 엽니다.
- 스크린샷을 캡처합니다.
- 이미지 보기 또는 편집 소프트웨어에서 '스포이트 도구'를 사용하여 스크린샷에서 뚜렷한 색상 샘플을 추출합니다.
- 명암비 계산기로 인접한 색상의 명암비를 결정합니다.
- 명암비가 W3C 가이드라인에서 정의한 것보다 작은 경우 색상 대비를 높이면 인터페이스에 도움이 될 수 있습니다.
Android의 자동화된 테스트 도구는 여러 색상 대비 문제를 감지할 수 있습니다. 기기 내 앱을 수동으로 테스트하려면 Android용 접근성 검사기 사용을 고려해 보세요. 자동 테스트를 이용하려면 Espresso 및 Robolectric에서 접근성 확인을 사용 설정하세요.