다크 모드 색상을 단순 반전으로 만들면 안 되나요?

단순 반전은 예상치 못한 색상을 만듭니다. HSL 기반 조정이 브랜드 톤을 유지하면서 다크 모드에 적합한 색상을 생성합니다.

다크 모드 배경색으로 추천하는 색은?

Material Design은 #121212, Apple은 #1C1C1E를 권장합니다. 순수 검정(#000000)은 피하는 것이 좋습니다.

본문 텍스트는 배경과 4.5:1 이상의 대비 비율(WCAG AA)을 유지해야 합니다.

라이트 모드 색상을 다크 모드에 적합하게 변환하는 방법 안내

라이트 모드 색상 (HEX)

라이트 모드 색상(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 이상이어야 합니다.