다크모드를 위한 컬러 콘트라스트 가이드 - kirseia/study GitHub Wiki

컬러 콘트라스트 가이드

  • 다크모드를 iOS / 안드로이드 모두 지원하고 있음
  • 어떤게 좋은가?
    • 눈의 피로를 줄인다
    • 배터리를 아낄 수 있다 (oled 기준)
  • 적어도 야간엔 나이트모드를 쓰는게 눈에도 좋음

팁

  • 순수 black / white는 피하자
  • 색빠진 컬러는 피하자. WCAG의 컬러 가이드에 따라 4.5:1 이상을 유지하자 (https://webaim.org/resources/contrastchecker/ 를 활용)
  • 적어도 WCAG’s AA 가이드는 지키자
  • 텍스트의 블투명도 조절이 중요함 (보통 강조 문자는 87%의 불투명도, 보통은 60%, disable 상태는 38% 정도를 사용함)
  • 다크모드에서는 shadow는 사용하지 않는게 좋음

툴

기준

  • WCAG guide 에 가이드가 있음

  • 추가 룰 설명

  • 맥용 툴 - 유료

  • contrast 비율을

    • Level AAA - 7:1 - 강조 문자
    • Level AA - 4.5:1 - 보통 텍스트 (폰트 18 크기 이하)
    • Level AA Large - 3:1 - 큰 글씨에는 이정도도 가능 (폰트 18 크기 이상)
    • 기준 미달이면 fail - 큰 글씨도 3:1 안되면 사용하면 안됨

Ref.