라이트 모드다크를 뒤집으면 라이트가 되지 않는다
구분
DESIGN 03 · 색 · 결정, 구현 전
색 · 접근성
상태
결정 · 구현 전
2026
역할
설계 · 판정 · 운영
코드는 AI
분야
설계
색 토큰 · WCAG · 재설계
DSN-03설계
2.59:1
흰 배경 위 성공 초록 #1DB954 대비
개요
라이트 모드
앱은 다크 한 가지였습니다. 라이트 모드를 준다면 색을 어떻게 구성할지 정해야 했습니다. 배경만 뒤집어 보니 안 됐습니다. 성공 초록 #1DB954는 흰 배경 위에서 대비 2.59:1, 프리셋 12색 중 9색이 4.5:1 미달, 하드코딩된 Color.white가 288곳 · 60파일이었습니다.
01
과정
외부 사례 10건을 리서치하고 3안(Paper · Clean · Moonlit)을 받았습니다. 대비는 눈으로 보지 않고 스크립트로 독립 검산했습니다. 원칙 넷이 나왔습니다. 액센트를 채움용과 글자용 두 토큰으로 나눈다 · hue는 고정하고 명도만 옮긴다 · 중립은 틴트 캔버스 위 흰 카드(Apple grouped 패턴) · 다크의 "밝게 틴트"를 라이트에선 "캔버스를 낮추고 카드를 희게"로 부호만 뒤집는다.
02
결정
C Moonlit. 배경 #F3F4F9(남청 4% 틴트) · 카드 #FFFFFF · 헤어라인 #E1E3EE · 잉크 #14142A. 양보 불가는 하나, 배경의 남청 hue. 회색 #F2F2F7로 타협하면 다른 안이 됩니다. 빛 탭 4개 화면은 다크 고정으로 남기고 테마를 셋으로 늘리지 않습니다. 구현 착수는 로드맵 판단으로 보류했습니다. 토큰 치환 범위가 커서 별도 PR 분해가 필요합니다.
기록
잰 숫자와 출처
측정 · 스크립트 검산
2.59:1흰 배경 위 성공 초록 #1DB954 대비
측정 · 스크립트 검산
9/124.5:1에 못 미치던 프리셋 색
측정 · 코드 검색
288곳하드코딩된 Color.white · 60파일
측정 · 외부 사례 10건
3안WCAG 검산을 거친 안 · Paper · Clean · Moonlit
결과
3안 WCAG 검산 완료 · 토큰 표 확정 · 착수 시 Must(중립 9 + 액센트 2) → Nice(프리셋 틴트) 순서까지
배운 것
라이트 모드는 재설계였습니다. 다크를 뒤집는 것으로는 되지 않았습니다. 색 대비는 취향 대신 숫자로 판정하는 문제라 눈 대신 스크립트에 맡겼습니다.
