가이드
웹사이트의 낮은 대비 텍스트를 수정하는 방법
가독성이 낮은 텍스트를 빠르게 찾아 실무적으로 개선하는 단계별 방법입니다.
사용자가 텍스트가 잘 안 읽힌다고 말할 때, 전체 리디자인 없이도 대부분 빠르게 개선할 수 있습니다. 실패 조합을 찾고 안전하게 색을 조정하는 흐름을 소개합니다.
Audit the worst readability problems first
Start with body text, form labels, buttons, and links on high-traffic pages.
Collect failing pairs in a short list so your fixes stay focused.
- Homepage hero text
- Primary/secondary buttons
- Form helper and error text
Measure each text/background pair
Run each pair in a contrast checker and note failed AA/AAA targets.
Keep one table with current value, target, and proposed fix.
Adjust color without breaking brand style
Change lightness first before changing hue.
Small shifts can improve readability while keeping your visual identity recognizable.
Retest UI states and responsive layouts
Check hover, focus, disabled, and visited states.
Confirm results on mobile where smaller text magnifies contrast problems.
Ship and document new color tokens
After fixes pass, update your design system tokens and component docs.
This prevents the same low-contrast values from returning later.
When this guide helps
- Fixing readability complaints from users.
- Improving old pages before relaunch.
- Cleaning up inconsistent legacy color styles.
Fix contrast in controlled iterations
Work through the highest-impact text first, test each change, and lock improved values into your design tokens.