가이드
버튼, 링크, UI 텍스트를 위한 대비 모범 사례
인터랙티브 요소와 작은 UI 텍스트에서 바로 적용할 수 있는 실전 대비 규칙입니다.
버튼·링크·보조 텍스트는 행동 전환에 직접 영향을 줍니다. 여기서 대비가 약하면 사용자는 쉽게 놓치고 이탈합니다.
Set minimum contrast targets by component type
Define baseline targets for body text, link text, button labels, and meta text.
Shared targets reduce debates and speed up reviews.
Design interactive states as complete sets
Plan default, hover, focus, active, and disabled states together.
A complete state system prevents hidden accessibility failures.
Prioritize link readability in content blocks
Links should remain clear without relying only on color differences.
Use underline or stronger weight where needed for clarity.
Protect small text in dense interfaces
Captions, form hints, and secondary labels often fail first.
Give small UI text extra contrast margin instead of aiming for the bare minimum.
Review with real backgrounds and themes
Test components on cards, tables, banners, and dark/light themes.
One passing pair on white does not guarantee full UI accessibility.
Great for
- Design system standards.
- Component library QA.
- Product interface refresh projects.
Make contrast a component requirement
Define contrast expectations inside component specs so teams do not need to re-decide rules in every sprint.