[UI 디자인] 아이콘보다 텍스트를 더 진한 톤을 사용하는 이유

UI 디자인을 하다 보면 같은 계열의 색상을 쓰더라도
아이콘에는 500 톤, 텍스트에는 700 톤처럼 텍스트를 더 진하게 사용하는 경우가 많습니다.
이 방식은 단순한 취향이 아니라, 실제 디자인 시스템에서도 널리 쓰이는 실무적 기준입니다.

 

1. 왜 텍스트가 더 진해야 할까?

1️⃣ 텍스트는 아이콘보다 시각적으로 더 약하게 보임

 

아이콘은 면적이 넓고 형태가 뚜렷하지만,
텍스트는 가늘고 복잡한 형태라 같은 500 톤을 써도 더 연하게 보입니다.

그래서 텍스트를 더 진한 600~700 톤으로 사용하면 가독성이 크게 올라갑니다.

 

2️⃣ WCAG 접근성 기준 충족

 

텍스트는 WCAG 대비 기준(4.5:1)이 매우 엄격합니다.
이를 충족하기 위해 텍스트는 더 높은 대비(더 진한 톤)가 필요한 경우가 많습니다.

→ 아이콘: Gray 500
→ 텍스트: Gray 700
이런 조합이 실제로 안전하고 많이 사용됩니다.

 

3️⃣ 실제 디자인 시스템에서도 같은 전략 사용

 

Google Material, Apple HIG, Airbnb, Uber 등 다양한 디자인 시스템에서

• 텍스트는 Gray 700–900
• 아이콘은 Gray 500–600
• 보조 요소는 Gray 300–400

이런 식으로 색 단계가 자연스럽게 위계가 형성되도록 구성합니다.

 

 

정리하면

 

아이콘보다 텍스트를 더 진한 톤으로 사용하는 것은
접근성·가독성·UI 위계를 고려한 실무적으로 매우 타당한 디자인 방식이다.