AAA 대비 기준을 만족하는 중립 색상 팔레트
UI 디자인에서 명확한 명암 대비는 사용자 경험을 크게 좌우합니다. 특히 라이트/다크 모드를 지원하는 현대적인 디자인 시스템에서는 두 가지 테마 모두에서 높은 가독성과 접근성을 유지하는 것이 중요합니다.
아래는 AAA 접근성 기준(WCAG 2.1 기준 대비율 7:1 이상)을 충족하는 중립 색상 팔레트입니다. 라이트 모드와 다크 모드 각각에 맞는 색상코드를 정리하였습니다.
🌕 Light Mode 색상 코드
밝은 배경에서 어두운 텍스트를 사용할 때 적합한 명암 단계입니다.
- Base: #FFFFFF
- 50: #FAFAFA
- 100: #F5F5F5
- 200: #E5E5E5
- 300: #D4D4D4
- 400: #A3A3A3
- 500: #737373
- 600: #525252
- 700: #404040
- 800: #262626
- 900: #171717
- 950: #0A0A0A
🌑 Dark Mode 색상 코드
어두운 배경에서 밝은 텍스트를 사용할 때 활용할 수 있는 색상 단계입니다.
- Base: #000000
- 50: #0A0A0A
- 100: #171717
- 200: #262626
- 300: #373737
- 400: #525252
- 500: #8A8A8A
- 600: #A3A3A3
- 700: #D4D4D4
- 800: #E5E5E5
- 900: #F5F5F5
- 950: #FAFAFA
활용 팁
- 텍스트와 배경의 조합이 7:1 이상의 대비를 유지하는지 확인하세요.
- 디자인 시스템에 색상 단계를 그대로 등록하면 라이트/다크 모드 전환 시 유지 보수가 쉬워집니다.
위 색상 팔레트는 어떤 UI에서도 적용 가능하며, 웹/앱 환경 모두에서 AAA 등급 대비 기준을 만족합니다.
'Inspiration > Color Palette' 카테고리의 다른 글
| Color Palette (0) | 2025.10.16 |
|---|