배경 위 글자가 읽혀야

KRDS CP-203 — 이미지에 텍스트를 합성하여 사용하는 경우 배경 이미지와 텍스트를 구분하여 사용하고 있다.

0. 들어가며 — 사진 위에 얹은 글자

이번 323편은 이미지에 텍스트를 합성할 때 배경 이미지와 텍스트를 구분하여 사용하라는 규칙입니다.

배너·히어로 영역에서 사진 위에 제목·문구를 얹는 경우가 많죠. 그런데 배경 이미지의 색·무늬와 텍스트가 섞여 구분이 안 되면 — 글자가 안 읽힙니다. 밝은 하늘 사진 위 흰 글자, 복잡한 무늬 위 글자처럼요. CP-203은 배경과 텍스트를 명확히 구분해 텍스트가 읽히게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 배경 이미지와 텍스트 구분

CP-203 (컴포넌트 > 이미지) “이미지에 텍스트를 합성하여 사용하는 경우 배경 이미지와 텍스트를 구분하여 사용하고 있다.”

이미지 위에 텍스트를 얹어 표시할 때, 배경 이미지와 텍스트가 시각적으로 명확히 구분되어 텍스트가 또렷이 읽히게 하라는 뜻입니다.

정리: 이미지 위 텍스트는 배경과 구분되게 해 읽히게 하라. 이게 CP-203입니다.

2. 왜 배경과 텍스트를 구분하나

이미지 위에 텍스트를 얹는 것(text over image)은 흔한 디자인입니다 — 배너, 히어로 영역, 카드 등에서 사진을 배경으로 제목·문구를 표시하죠. 시각적으로 멋지지만, 가독성 함정이 있습니다. 배경 이미지는 단색이 아니라 다양한 색·명암·무늬를 가져, 그 위의 텍스트가 묻히기 쉽죠.

구분이 안 될 때:

명암 충돌 — 밝은 배경(맑은 하늘, 흰 눈) 위 밝은 글자(흰색)는 거의 안 보입니다. 어두운 배경 위 어두운 글자도 마찬가지죠.

부분적 충돌 — 배경 이미지는 영역마다 명암이 다릅니다. 텍스트가 걸친 부분이 밝다 어둡다 하면, 글자 일부만 읽히고 일부는 묻히죠.

복잡한 무늬 — 디테일이 많은 배경(군중, 나뭇잎, 패턴) 위 텍스트는 무늬와 섞여 형태가 흐려집니다.

텍스트가 안 읽히면 — 그 텍스트가 전하려던 정보(제목, 안내)가 전달 안 되죠. 특히 저시력·고령 사용자, 밝은 환경(야외)에서는 더 심각합니다. 이는 명도 대비(브레드크럼 CP-075, 배지 CP-191 등에서 반복된) 가독성 문제의 이미지 배경 버전입니다.

그래서 CP-203은 — 배경 이미지와 텍스트를 명확히 구분해 텍스트가 또렷이 읽히게 하라고 합니다. 방법:

오버레이(overlay) — 배경 이미지 위에 반투명한 어두운(또는 밝은) 레이어를 깔고 그 위에 텍스트를 얹습니다. 어두운 오버레이 + 흰 텍스트면, 배경이 무엇이든 일정한 대비가 확보되죠. 가장 흔하고 안전한 방법입니다.

텍스트 배경 박스 — 텍스트 뒤에 반투명·불투명 색 박스를 깔아 텍스트 영역을 배경과 분리.

그림자·외곽선(text shadow/stroke) — 텍스트에 그림자나 외곽선을 줘 배경과 경계를 만듦. (단 강한 그림자는 지저분할 수 있어 보조적으로.)

이미지 영역 분리 — 텍스트를 이미지 위가 아니라 단색 영역에 배치(이미지는 옆·아래).

명도 대비 확보 — 어떤 방법이든, 최종적으로 텍스트와 그 바로 뒤 배경의 명도 대비가 기준(텍스트 4.5:1, WCAG SC 1.4.3)을 충족해야 합니다. 배경이 변하는 이미지 위에서는 오버레이로 대비를 ’보장’하는 게 안전하죠.

근본 가능하면 실제 텍스트로. CP-202에서 봤듯, 텍스트는 가능한 한 실제 텍스트(HTML) 로 구현하는 게 좋습니다 이미지에 텍스트를 ‘구워 넣으면’(텍스트가 이미지 픽셀의 일부) 검색·번역·확대·스크린 리더 접근이 안 되죠. 그래서 ’이미지 위 텍스트’는 보통 배경은 이미지, 텍스트는 그 위에 얹은 실제 HTML 텍스트로 구현하고, CP-203의 구분(오버레이 등)을 적용합니다. 이러면 텍스트가 접근 가능하면서도 배경과 구분돼 읽히죠.

정리하면 — 이미지 위에 텍스트를 얹을 때는 오버레이·박스·그림자 등으로 배경과 텍스트를 명확히 구분하고 명도 대비를 확보해, 배경이 무엇이든 텍스트가 또렷이 읽히게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

구분 명확성 — 이미지 위 텍스트가 배경과 명확히 구분되어 읽히는가.

대비 확보 — 텍스트와 배경의 명도 대비가 기준(4.5:1)을 충족하는가(영역 전체에서).

실제 텍스트 — 텍스트가 이미지에 구워지지 않고 실제 HTML 텍스트인가.

개선 방향

배경 이미지 위에 반투명 오버레이·텍스트 박스 적용해 대비 보장.

텍스트를 실제 HTML로(이미지 굽기 지양). 대비 측정으로 검증.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	오버레이·텍스트 구분·대비 정의
퍼블리셔/개발	오버레이·실제 텍스트·대비 구현

기관 유형	CP-203 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (이미지 위 텍스트 사용 시)

배너·히어로 등 이미지 위 텍스트를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이미지 위 텍스트가 배경과 명확히 구분되어 읽히나요?

□ 텍스트와 배경의 명도 대비가 기준(4.5:1)을 충족하나요(영역 전체)?

□ 텍스트가 이미지에 구워지지 않고 실제 HTML 텍스트인가요?

❓ FAQ

Q1. 사진 위 흰 글자가 안 보여요. 밝은 배경엔 흰 글자가 묻힙니다. 어두운 반투명 오버레이를 깔거나 텍스트 박스를 줘 대비를 확보합니다. Q2. 어떤 방법이 안전한가요? 반투명 오버레이가 가장 흔하고 안전합니다. 배경이 무엇이든 일정한 대비를 보장하죠. Q3. 텍스트를 이미지에 넣으면 안 되나요? 검색·번역·확대·접근성이 안 됩니다. 배경만 이미지, 텍스트는 실제 HTML로 얹는 게 좋습니다.

6. 마무리

CP-203의 메시지:

배경 위 글자가 읽혀야 — 이미지 위 텍스트는 배경과 명확히 구분하라.

이미지 위 텍스트는 배경 색·무늬와 섞여 묻히기 쉽습니다. 오버레이·박스·그림자로 배경과 구분하고 명도 대비를 확보해야 또렷이 읽히죠. 텍스트는 실제 HTML로 구현하는 게 좋습니다. 다음 편은 모바일 환경을 고려한 이미지 사용입니다.

다음 편 예고 ▶ 「324. (CP-204) [모바일] 사용자의 화면 크기, 접속 환경을 고려하여 이미지를 사용하고 있다.」

ViewCheck는 이미지 위 텍스트가 배경과 구분되어 읽히는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 이미지(Image) 가이드 — https://www.krds.go.kr/html/site/component/component_19.html

WCAG 2.1 SC 1.4.3 Contrast (Minimum) — https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준