다크 모드는 이제 단순한 트렌드가 아닌 필수 접근성 기능입니다. iOS, Android, macOS, Windows 모두 시스템 수준의 다크 모드를 지원하고, 사용자의 약 80%가 가능한 경우 다크 모드를 선호한다는 조사 결과도 있습니다. 하지만 다크 모드를 제대로 설계하는 것은 단순히 배경을 검은색으로 바꾸는 것이 아닙니다.
다크 모드 설계 시 가장 흔한 실수
Nielsen Norman Group의 연구에 따르면, 다크 모드에서 사용자가 가장 자주 겪는 문제는 과도한 대비(Too Much Contrast)입니다. 순수 흰색(#FFFFFF) 텍스트를 순수 검은색(#000000) 배경 위에 올리면 오히려 눈의 피로도가 높아집니다. 어두운 환경에서 과도한 밝기 대비는 눈부심(Halation) 현상을 유발합니다.
권장 접근법: 배경은 #121212~#1E1E1E, 기본 텍스트는 #E0E0E0~#F5F5F5 정도로 설정해 대비를 충분히 유지하되 극단적인 흑백 대비는 피하는 것이 좋습니다.
다크 모드 컬러 설계 원칙
- 배경 레이어 구분: 배경, 카드 표면, 팝업/모달은 각각 다른 명도의 어두운 색을 써야 깊이감이 생깁니다. 예: Background #121212 → Surface #1E1E1E → Elevated #272727
- Primary Color 조정: 라이트 모드의 Primary Color를 그대로 다크 모드에 쓰면 너무 밝게 보일 수 있습니다. 채도를 약간 낮추거나 명도를 조정하는 것이 좋습니다.
- 그림자 대신 엘리베이션: 다크 배경에서 그림자는 잘 보이지 않습니다. 상위 레이어는 배경보다 약간 밝은 색을 사용해 엘리베이션(깊이감)을 표현합니다.
- 색상 의미 유지: 라이트 모드에서 빨간색이 '오류'를 의미했다면, 다크 모드에서도 동일한 의미 체계를 유지해야 합니다. 다만 색상 값은 다크 배경에서 가독성 있도록 조정합니다.
접근성 기준 충족
다크 모드에서도 WCAG 2.1 명도 대비 기준(일반 텍스트 4.5:1 이상)을 반드시 충족해야 합니다. Smashing Magazine의 2025년 접근성 다크 모드 가이드는 저시력 사용자를 위해 텍스트 색상을 단순히 흰색 하나로 고정하지 말고, 정보 위계에 따라 High/Medium/Disabled 세 가지 텍스트 색상 토큰을 별도로 정의할 것을 권장합니다.