가이드
UI에 쓰기 전에 색상 조합을 점검하는 방법
개발 전에 색상 조합을 빠르게 검증해 가독성과 일관성을 높이는 방법입니다.
단독으로 괜찮아 보이는 색도 실제 UI 조합에서는 문제를 만들 수 있습니다. 짧은 사전 점검이 재작업을 줄여줍니다.
Test the exact foreground-background pair
Always evaluate colors as a pair, not as separate swatches.
The same text color can pass on one background and fail on another.
Preview combinations in real components
Check buttons, badges, cards, and form hints using the real color pairing.
This shows whether hierarchy and readability still hold.
Check multiple UI states early
Do not validate only the default state.
- Default
- Hover/focus
- Disabled or subtle state
Compare with nearby colors in the same screen
A pair can be readable but still look disconnected from surrounding UI colors.
Quickly compare it against adjacent elements before finalizing.
Save approved combinations as reusable tokens
Once approved, store the pair in your style guide or token set.
This prevents accidental drift when new screens are added.
When to run this check
- Before shipping new button or alert styles.
- Before adopting brand colors in body text or labels.
- During final QA for a redesign.
Check combinations before they become expensive
A few minutes of color validation before implementation is faster than fixing inconsistent UI after release.