Hardcoded Hex 제거를 통한 Dark Mode 대응 및 Accessibility 확보

Stop Hardcoding Hex #d9d9d9 In Your CSS

safiullah2026년 6월 28일2분beginner

AI 요약

Context

레거시 코드베이스와 Figma 설계안에서 #d9d9d9 색상을 범용적으로 하드코딩하여 사용하는 관행 존재. 특정 색상에 의존한 설계는 다크 모드 전환 시 시각적 불균형을 초래하며 디바이스별 색상 렌더링 편차를 유발하는 한계점 보유.

Hardcoded Hex 값 제거를 통한 UI 일관성 확보 및 유지보수성 향상
Semantic CSS Variable 도입으로 컨텍스트 기반의 색상 매핑 구조 설계
Dark Mode 대응을 위해 @media (prefers-color-scheme: dark) 기반의 Dynamic Token 할당 로직 구현
WCAG AA 표준 준수를 위해 Gray-on-Gray 조합 지양 및 보조 지표(cursor: not-allowed 등) 병행 설계
Display P3와 sRGB 간의 렌더링 편차 해결을 위한 OKLCH 색 공간 활용 제안
Tailwind CSS의 gray-300 등 플랫폼 표준 디자인 토큰 체계로의 전환

실천 포인트

1. CSS 내 모든 Hardcoded Hex 값을 Semantic Variable로 치환했는지 검토

2. 다크 모드 전환 시 배경색과 경계선의 대비비가 적절한지 확인

3. 색상만으로 상태를 구분하는 UI 요소에 보조 아이콘이나 커서 상태를 추가했는지 점검

4. 디바이스별 색상 왜곡 방지를 위해 OKLCH 또는 표준 디자인 토큰 사용 고려

태그