텍스트가 읽기 어려울 때 조정 순서 – ZenBlocks buttonBasic
결론
가독성 문제는 **대비 -> 폰트 설정 -> 텍스트 그림자 -> 배경 오버레이** 순서로 조정하면 가장 효율적입니다.
—
원인
1. 텍스트와 배경의 대비 부족
2. 작은 폰트 크기
3. 복잡한 배경 이미지 위에 직접 텍스트 배치
4. 줄간격/자간 설정 부적절—
해결 절차
### 1단계: 대비 확인
1. 텍스트색과 배경색을 점검합니다.
2. 명도 차이를 충분히 확보합니다.
3. WCAG AA 기준(4.5:1)을 참고합니다.### 2단계: 폰트 조정
1. `폰트 크기`: 모바일 최소 14px 권장
2. `Font 두께`: 복잡한 배경에서는 600~700 권장
3. `줄 높이`: 1.4~1.8 범위 권장
4. `자간`: 필요 시 0.02~0.05em 추가### 3단계: 텍스트 그림자 활용
1. 텍스트 그림자 설정을 엽니다.
2. 블러를 2~4px 정도로 설정합니다.
3. 불투명도는 0.3~0.5부터 시작합니다.### 4단계: 배경 오버레이 추가
1. 배경 설정에서 오버레이를 활성화합니다.
2. 알파값을 0.3~0.6 범위에서 조정합니다.### 5단계: 반응형 재검증
1. PC -> 태블릿 -> 모바일 순으로 확인합니다.
2. 필요하면 기기별 폰트 값을 개별 조정합니다.—
주의사항
– 마이크로텍스트/서브텍스트도 읽을 수 있는 수준은 유지해야 합니다.
– 마이크로카피/서브카피는 버튼 외부 요소이므로 페이지 실제 배경에서 가독성을 확인하세요.—
관련 설정
– [스타일 설정](../style/)
– [폰트 설정](../font/)
– [배경 설정](../background/)
– [Microtext Settings](../microtext/)
– [Subtext Settings](../subtext/)