다크 모드 색상 전환 가이드 사용법
라이트 모드 색상(HEX)을 입력하면 다크 모드에 적합한 색상을 자동으로 제안합니다. 단순한 색상 반전이 아니라 HSL(색조·채도·밝기) 기반 조정으로 다크 모드에 어울리는 색상을 생성합니다.
기본 원칙: 매우 밝은 색상(배경 #FFFFFF)은 어두운 색(약 #121212)으로, 어두운 텍스트는 밝은 색으로 전환합니다. 채도가 높은 액센트 컬러는 채도를 약간 낮추고 밝기를 높여 다크 배경에서도 눈에 띄도록 조정합니다.
다크 모드 배경으로는 순수 검정(#000000)보다 Material Design의 #121212나 Apple의 #1C1C1E가 피로감이 적습니다. 실제 디자인에서는 WCAG AA 대비 비율(본문 4.5:1 이상)을 반드시 확인하세요.
자주 묻는 질문
다크 모드가 단순 반전이 아닌 이유는?
색상을 단순 반전하면 파란색이 주황색이 되는 등 의도치 않은 색상이 나타납니다. HSL 조정은 브랜드 색상 톤을 유지하면서 다크 모드에 맞는 색상을 만듭니다.
다크 모드 배경색으로 무엇을 쓰나요?
Material Design은 #121212, Apple HIG는 #1C1C1E를 권장합니다. 순수 검정(#000000)은 OLED 번인 위험과 과도한 대비로 피하는 것이 좋습니다.
WCAG 대비 비율은 어디서 확인하나요?
WebAIM Contrast Checker 등의 온라인 도구를 사용합니다. 본문 텍스트는 WCAG AA 기준 4.5:1 이상이어야 합니다.