HIG Reading Series | Foundations - Accessibility(8)

최승용·2022년 7월 14일
1

HIG Reading Series

목록 보기
9/46
post-thumbnail

Content

오늘은 Color and effects에 대해 읽어보도록 하자.(2)

Color and effects

  • 뷰에서 Invert Colors에 정확하게 응답하는지 확인하세요.
  • 사용자들은 어두운 배경에서 아이템들을 보고 싶을 때 Invert Colors 기능을 켤 수 있습니다.
  • Invert Colors의 Smart Invert 모드에서, 이미지, 비디오, 그리고 full-color 아이콘(앱 아이콘 및 논템플릿 이미지)은 색상 반전되지 않습니다, 그리고 어두운 UI는 어두운 상태를 유지합니다.
  • 사용자 지정 뷰에서 사진과 같이 이미지가 반전되는 것을 막아야 하는 위치를 찾기 위해서 앱 또는 게임을 테스트하세요.

  • 가독성을 향상시키기 위해서 대비가 강한 색상들을 사용하세요.
  • 글꼴의 크기나 두께, 색의 밝기, 화면 해상도, 그리고 빛의 상태를 포함하여 많은 요소들이 색 인식에 영향을 줍니다.
  • 만약 텍스트, 글리프, 그리고 제어 장치와 같은 시각적인 요소들의 색 대비를 증가시킨다면, 사용자들이 더 많은 상황에서 앱을 사용할 수 있도록 도울 수 있습니다.
  • UI에서 인접한 색의 대비가 최소한으로 허용되는 수준인지 확인하기 위해서는, Xcode의 Accessibility Inspector 또는 Web Content Accessibility Guidelines (WCAG) 색 대비 공식을 기반으로 하는 온라인 색 계산기를 사용할 수 있습니다.
  • 일반적으로, 더 작은 크기 또는 더 얇은 두께의 텍스트는 읽기 쉽게 하기 위해서 더 큰 대비가 필요합니다.
  • 아래 값을 가이드로 사용하세요.

텍스트 크기텍스트 두께최소 대비 비율
17 포인트 이하모두4.5 : 1
18 포인트 이상모두3 : 1
모두두껍게3 : 1

Summary

사용자들이 색 반전 (접근성)기능을 사용할 때, 이미지처럼 반전 되지 않아야 하는 요소들은 반전 되지 않고 UI는 어둡게 또는 밝게 제대로 변하는지 확인하라.
가독성을 위해 글꼴의 크기나 두께, 색의 밝기, 화면 해상도 등을 고려해 적절히 대비되는 색을 사용해야 한다.

Review

경험상 앱을 개발할 때 다크 모드를 고려하는 것은 생각보다 시간이 필요하다. 하지만 과거와 달리 이제는 선택이 아닌 필수가 되어버린 수준이고, 이를 위해서는 오늘 읽은 내용처럼 색 반전이 필요한 요소와 아닌 요소를 구분하여 적절히 적용할 수 있어야 할 것이다.
흔하게 글꼴의 크기나 두께를 조절하여 강조를 하긴 하지만 이에 따라 색의 대비 정도를 조절해야 한다고는 생각해본 적이 없었는데 좀 새롭게 다가왔고, 참고할 자료가 많이 제공되는 점도 좋다.


  • 번역은 개인적인 능력에 추가로 papago의 도움을 받았다.
    의미가 틀린다거나하는 중대한 문제에 대한 지적은 감사히 받고 수정하겠지만 (영어 공부가 목적이 아니기 때문에) 약간의 실수는 넘어가주길 바란다.
profile
안녕하세요. 최승용입니다.

0개의 댓글