영상 속 글자·그래프도 보여야

KRDS CP-437 — 정보를 전달하기 위한 목적의 시각적 요소를 삽입할 때 명도 대비를 준수하고 있다.

0. 들어가며 — 영상 속 자막·그래프가 흐릿하면

이번 557편은 정보를 전달하기 위한 시각적 요소를 삽입할 때 명도 대비를 준수하라는 규칙입니다.

영상에 — 정보를 전하는 시각 요소(화면 속 텍스트, 그래프, 강조 표시)를 넣을 때, 그 요소가 배경과 대비가 낮아 흐릿하면 저시력 사용자가 못 읽죠. CP-437은 영상 내 정보 시각 요소의 명도 대비를 규정합니다. WCAG 대비 기준의 미디어 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 정보 시각 요소 명도 대비 준수

CP-437 (컴포넌트 > 접근 가능한 미디어) “정보를 전달하기 위한 목적의 시각적 요소를 삽입할 때 명도 대비를 준수하고 있다.”

영상에 정보 전달용 시각 요소(텍스트·그래프 등)를 넣을 때, 배경과 충분한 명도 대비를 지키라는 뜻입니다.

정리: 영상 속 정보 시각 요소는 배경과 충분한 명도 대비로. 이게 CP-437입니다.

2. 왜 시각 요소 명도 대비인가

영상(비디오)에는 — 촬영 화면뿐 아니라, 정보를 전하기 위해 삽입한 시각 요소가 있습니다:

화면 속 텍스트 — 영상에 넣은 자막·제목·설명 글자, 화면에 띄운 연락처·날짜·키워드.

그래프·도표 — 통계, 차트, 다이어그램.

강조 표시 — 화살표, 동그라미, 하이라이트.

이런 — 정보 전달용 시각 요소는, 사용자가 읽고 이해해야 합니다. 그러려면 — 그 요소가 배경(영상 화면)과 충분히 구별돼 또렷이 보여야 하죠. CP-437은 이 명도 대비를 요구합니다.

대비가 낮을 때의 문제:

영상 배경과 묻힘 영상 위에 흰 글자를 띄웠는데 배경도 밝으면(밝은 하늘 위 흰 자막), 글자가 묻혀 안 보입니다. 영상은 장면마다 배경 밝기가 바뀌어, 고정 색 텍스트가 어떤 장면에선 안 보일 수 있죠.

저시력 사용자 — 저시력 사용자는 — 대비가 낮은 텍스트·그래프를 더욱 못 읽습니다.

정보 손실 — 정보 시각 요소가 안 보이면 — 그 정보를 못 얻죠(특히 화면 텍스트는 대체 정보 CP-436에도 담아야 하지만, 영상 자체에서도 보여야 함).

그래서 CP-437은 — 정보 시각 요소가 배경과 충분한 명도 대비를 갖게 하라고 합니다:

텍스트 대비 — 영상 위 텍스트(자막·화면 글자)가 — 배경과 충분한 명도 대비(텍스트 기준 4.5:1 권장)로. 일반 웹 텍스트 대비(WCAG 1.4.3) 정신을 영상 내 텍스트에 적용하죠.

배경 처리 영상 배경이 장면마다 바뀌어 대비를 보장하기 어려우면, 텍스트 뒤에 반투명 배경 띠(자막 박스)를 깔거나, 외곽선·그림자를 줘 어떤 장면에서도 글자가 보이게 합니다.

그래프·강조 요소 — 그래프 선·색, 강조 표시도 — 배경과 충분한 대비로 또렷이.

색만으로 정보 전달 금지도 함께. 대비(437)에 더해 — 그래프 등에서 색만으로 정보를 구별하지 말고(색 무관 인식, WCAG 1.4.1), 형태·레이블도 함께 주면 색맹 사용자도 이해하죠. 다만 — 이 규칙의 핵심은 명도 대비입니다.

대체 정보와의 관계. CP-436(대체 정보 완전성)은 못 보는 사용자를 위해 화면 텍스트를 대체 정보(원고)에도 담으라는 것이고, CP-437은 영상 자체에서 그 시각 요소가 저시력 사용자에게도 보이게 하라는 것입니다. 둘이 함께 전맹(대체 정보)·저시력(대비) 사용자를 모두 배려하죠.

이 규칙은 접근 가능한 미디어의 ’시각 요소 가독성’을 담당합니다 — 영상 내 정보 시각 요소를 충분한 대비로(437), 저시력 사용자도 영상 속 텍스트·그래프를 읽게 하죠. 일반 웹의 대비 기준을 미디어에 적용한 것입니다.

정리하면 — 영상에 삽입한 정보 시각 요소(텍스트·그래프)가 배경과 대비가 낮으면 저시력 사용자가 못 읽으므로, 충분한 명도 대비(필요시 배경 띠·외곽선)로 또렷이 보이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

텍스트 대비 — 영상 위 텍스트가 배경과 충분한 명도 대비(4.5:1 권장)인가.

장면 변화 대응 — 배경이 바뀌어도 텍스트가 보이는가(배경 띠·외곽선).

그래프·강조 대비 — 그래프·강조 표시가 배경과 충분한 대비인가.

개선 방향

영상 내 텍스트에 충분한 대비. 배경 변화 대응 위해 반투명 띠·외곽선.

그래프·강조 요소 대비. 색만으로 정보 전달 금지(형태·레이블 병행).

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

역할	책임
콘텐츠/영상	영상 내 시각 요소 대비 제작
QA/접근성	영상 시각 요소 대비 검증

기관 유형	CP-437 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (정보 영상 사용 시)

정보 전달용 영상을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 영상 위 텍스트가 배경과 충분한 명도 대비(4.5:1 권장)인가요?

□ 배경이 바뀌어도 텍스트가 보이나요(배경 띠·외곽선)?

□ 그래프·강조 표시가 배경과 충분한 대비인가요?

❓ FAQ

Q1. 영상 배경이 계속 바뀌는데 어떻게 대비를 보장하나요? 텍스트 뒤에 반투명 배경 띠(자막 박스)나 외곽선·그림자를 줘, 어떤 장면에서도 글자가 보이게 합니다. Q2. 대체 정보(CP-436)가 있으면 영상 대비는 안 챙겨도 되나요? 아닙니다. 대체 정보는 전맹용, 영상 대비는 저시력 용입니다. 둘 다 챙겨야 하죠. Q3. 그래프 색만으로 구별하면 안 되나요? 색맹 사용자가 못 구별합니다. 형태·레이블을 함께 줘야 하죠(색 무관 인식).

6. 마무리

CP-437의 메시지:

영상 속 글자·그래프도 보여야 — 정보 시각 요소는 배경과 충분한 명도 대비로.

영상에 삽입한 정보 시각 요소가 배경과 대비가 낮으면 저시력 사용자가 못 읽습니다. 충분한 명도 대비로(필요시 배경 띠) 또렷이 보이게 하는 게 핵심이죠. 다음 편은 자막 가림·흐림 방지입니다.

다음 편 예고 ▶ 「558. (CP-438) 자막은 주변 요소에 가려지거나 흐리게 표시되게 구현하고 있지 않다.」

ViewCheck는 영상 내 정보 시각 요소의 명도 대비를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 접근 가능한 미디어(Accessible multimedia) 가이드 — https://www.krds.go.kr/html/site/component/component_44.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컴포넌트,웹표준