썸네일 텍스트의 명암비는 얼마여야 하나요?

일반 웹 텍스트의 접근성 최소 기준인 4.5:1 이상을 목표로 하세요. 크고 굵은 텍스트는 3:1에서도 통할 수 있지만, 사진 위라면 높을수록 안전합니다.

밝은 색이 클릭을 늘리나요?

밝은 색은 피드 및 이미지의 나머지 부분과 대비를 만들 때만 도움이 됩니다. 차분한 배경 위의 채도 높은 강조색 하나가 대개 가장 효과적입니다.

썸네일이 다크 모드에서 잘 보이게 하려면?

검은 테두리와 매우 어두운 가장자리를 피하고, 평균 밝기를 약 22% 이상으로 유지하고, 거의 검은 배경에서 이미지 가장자리를 확인하세요.

RMS 대비란 무엇인가요?

이미지 휘도의 표준편차입니다. 0.20 이상이면 축소해도 살아남는 강한 명암 변화가 있다는 뜻입니다.

썸네일을 색각 이상 관점에서 어떻게 확인하나요?

색각 시뮬레이션과, 무엇보다 흑백 보기를 사용하세요. 주제가 밝기만으로 분리된다면 거의 모든 사람에게 통합니다.

어떤 색 공간으로 내보내야 하나요?

sRGB입니다. 다른 프로필은 브라우저와 앱이 예측할 수 없게 변환할 수 있습니다.

썸네일 색상·대비 가이드: 다크 모드, 라이트 모드, 흑백 테스트

빠른 답변

색보다 대비가 중요합니다. 이미지가 어두운 피드나 밝은 피드에 묻히지 않도록 평균 밝기를 약 22–80%로 유지하고, RMS 휘도 대비는 0.20 이상을 목표로 하며, 모든 텍스트는 뒤 배경과 최소 4.5:1의 대비를 갖게 하세요. 그런 다음 흑백과 색각 시뮬레이션으로 썸네일을 확인하세요. 주제가 여전히 배경과 분리된다면 모두에게 통하는 디자인입니다.

2통과해야 할 피드 테마

0.20강한 RMS 대비

22–80%안전한 밝기 범위

피드 크기에서 대비가 색을 이기는 이유

이미지가 168×94픽셀로 줄어들면 미세한 색 차이는 평균화됩니다. 밝기가 같은 채도 높은 두 색, 예를 들어 빨강과 초록은 우리가 가장자리와 형태를 볼 때 주로 쓰는 눈의 휘도 채널에서는 거의 같은 회색이 됩니다. 반면 밝음과 어둠의 대비는 축소, 화면 반사, 저가 디스플레이에서도 살아남습니다.

접근성 지침이 허용 색상 목록이 아니라 휘도 비율로 대비를 규정하는 이유도 이것입니다. 일반 웹 텍스트의 규칙은 최소 4.5:1, 큰 텍스트는 최소 3:1입니다. 썸네일 텍스트는 대개 크고 굵지만 단색 배경이 아니라 사진 위에 놓이므로, 4.5:1을 목표로 하면 안전 여유가 생깁니다.

“텍스트 및 텍스트 이미지의 시각적 표현은 최소 4.5:1의 명암비를 가져야 합니다”
Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2 · 영어 원문을 번역한 인용

밝기와 대비의 목표 수치

ThumbProof의 시각 점검은 대비와 관련된 세 가지 수치를 보고합니다. 평균 밝기는 0%(검정)부터 100%(흰색)까지 이미지 휘도의 평균입니다. RMS 대비는 휘도의 표준편차로, 밝고 어두운 변화가 얼마나 있는지를 안정적으로 측정합니다. 선명도는 168×94로 축소한 뒤의 미세한 가장자리 디테일을 측정합니다.

측정 항목	약함	보통	강함 / 목표
평균 밝기	< 22% 또는 > 80%	22–30% 또는 70–80%	30–70%
RMS 대비	< 0.12	0.12–0.20	≥ 0.20
텍스트 명암비	< 3:1	3:1–4.5:1	≥ 4.5:1
168×94에서의 선명도	< 0.05	0.05–0.09	≥ 0.09

이 기준은 도구가 쓰는 실용적인 목표치이지 플랫폼 규칙이 아닙니다. 극적이고 대부분 어두운 썸네일도 밝은 주제가 강한 대비를 만든다면 효과가 있을 수 있습니다. 밝기 점검은 어두운 피드에 묻힐 수 있다고 경고할 뿐입니다.

다크 모드와 라이트 모드

피드는 다크 모드에서는 거의 검은 배경, 라이트 모드에서는 흰색이나 밝은 회색 배경에 표시됩니다. 검은 테두리나 어두운 비네팅이 있는 썸네일은 다크 모드에서 가장자리를 잃고, 옅은 파스텔 썸네일은 라이트 모드에서 가장자리를 잃습니다. 많은 시청자가 저녁에는 휴대폰에서 다크 모드를, 낮에는 데스크톱에서 라이트 모드를 쓰므로 둘 다 통과해야 합니다.

가장 빠른 확인 방법은 미리보기에서 피드 테마를 전환하는 것입니다. 주제가 아니라 썸네일의 외곽을 보세요. 두 테마 모두에서 이미지와 페이지 사이에 분명한 경계가 있어야 합니다. 경계가 사라지면 그림자를 약간 올리거나, 더 밝은 배경 요소나 은은한 테두리를 넣으세요.

색각 이상

색각 이상은 흔합니다. 미국 국립안과연구소에 따르면 적록 색각 이상이 가장 흔한 형태이며, 여성보다 남성에게 훨씬 자주 나타납니다. 시청자가 많다면 상당수가 빨간 화살표와 초록 배경의 차이를 보지 못합니다.

ThumbProof는 제1색맹(적색맹), 제2색맹(녹색맹), 제3색맹(청색맹), 전색맹(색 구분 없음)을 시뮬레이션합니다. 모든 경우를 따로 디자인할 필요는 없습니다. 썸네일이 흑백 점검을 통과한다면, 즉 밝기만으로 주제가 분리된다면 거의 모든 색각 유형에서 통합니다.

시뮬레이션	달라지는 점	흔한 실패
제1색맹	빨강이 어둡고 갈색빛으로 보임	어두운 배경의 빨간 텍스트가 사라짐
제2색맹	빨강과 초록이 합쳐짐	초록 대 빨강 ‘좋음/나쁨’ 비교
제3색맹	파랑과 노랑이 변함	하늘색 위의 노란 텍스트
전색맹	밝기만 남음	밝기가 같은 모든 색 조합

다섯 단계로 색상과 대비 확인하기

01
썸네일 불러오기
이미지를 세이프 존 검사기나 피드 미리보기에 넣으세요.
02
스퀸트 테스트 실행
이미지를 흐리게 하세요. 주제가 분명한 형태로 남아야 합니다.
03
흑백으로 전환
색을 빼세요. 텍스트와 주제가 밝기만으로도 분리되어야 합니다.
04
어두운/밝은 피드 전환
두 배경 모두에서 썸네일 가장자리가 보이는지 확인하세요.
05
색각 모드 시험
네 가지 시뮬레이션을 차례로 바꿔 본 뒤, 점검 분석에서 밝기와 대비 행을 읽으세요.

돋보이는 팔레트 고르기

내 분야에 이미 무엇이 있는지 보세요. 게임 썸네일마다 채도 높은 보라와 파랑을 쓴다면, 또 하나의 네온 블루보다 따뜻한 노랑이나 주황 강조색이 더 돋보입니다. 팔레트는 작게 유지하세요. 지배적인 배경 톤 하나, 주제 하나, 텍스트나 핵심 디테일을 위한 강조색 하나면 됩니다.

채도는 모든 곳이 아니라 강조에만 쓰세요. 모든 것이 채도가 높으면 아무것도 돋보이지 않습니다. 차분한 배경에 채도 높은 주제 하나를 둔 이미지가 작은 크기에서는 전체가 고채도인 이미지보다 대개 더 잘 읽힙니다. 눈이 다른 곳과 다른 한 영역으로 곧장 가기 때문입니다.

배경 톤 하나, 주제 하나, 강조색 하나
분야에서 드문 강조색 고르기
차분한 배경, 채도 높은 주제

복잡한 사진 위의 텍스트

디테일이 많은 사진 위에 텍스트를 바로 올리면 글자 어딘가에서 거의 항상 대비 테스트에 실패합니다. 확실한 해결책은 네 가지입니다. 두꺼운 외곽선(글자 높이의 약 6–10%), 부드러운 그림자, 글자 뒤의 불투명하거나 반투명한 상자, 또는 하늘이나 무늬 없는 벽처럼 이미지의 차분한 영역으로 텍스트를 옮기는 것입니다.

결과를 흑백으로 확인하세요. 글자는 평균적으로만이 아니라 외곽 전체를 따라 주변보다 분명히 더 밝거나 어두워야 합니다.

이미지 하나가 아니라 채널 전체의 대비

시청자는 채널 페이지나 재생목록에서 여러분의 동영상 여러 개를 나란히 보는 경우가 많습니다. 모든 썸네일이 같은 어두운 팔레트를 쓰면 페이지가 한 덩어리처럼 보여 개별 동영상을 구분하기 어렵습니다. 글꼴, 강조색, 프레이밍 같은 스타일은 일관되게 유지하되, 이웃한 업로드끼리는 지배적인 배경 톤을 바꾸세요.

실용적인 규칙은 몇 편마다 어두운 배경과 밝은 배경을 번갈아 쓰고 강조색은 같게 유지하는 것입니다. 그러면 채널은 알아보기 쉽고 각 썸네일은 저마다의 윤곽을 갖습니다. 미리보기의 채널 페이지 보기로 새 업로드를 이전 동영상들 옆에 놓고 확인하세요.

채널 패턴	채널 페이지에서의 효과	해결책
모두 어두운 배경	동영상이 한 덩어리로 합쳐짐	어두운 배경과 중간 톤 배경 번갈아 쓰기
동영상마다 제멋대로인 색	알아볼 수 있는 스타일이 없음	강조색과 글꼴 하나를 유지
같은 레이아웃, 다른 톤	알아보기 쉽고 구별됨	이대로 계속하기

화면, 밝기, 압축

시청자는 밝은 OLED 휴대폰부터 어두운 사무실 모니터, 방 건너편에서 보는 TV까지 온갖 기기로 썸네일을 봅니다. 저가 화면이나 어두운 화면에서는 어두운 디테일이 가장 먼저 사라지고, 휴대폰의 야간 모드는 대비를 더 낮춥니다. 중요한 형태는 평평한 검정이 되어 버리는 가장 어두운 10% 톤 영역 밖에 두세요.

압축도 대비를 갉아먹습니다. JPEG 압축은 미세한 색 변화부터 매끄럽게 만들기 때문에 은은한 그라데이션과 저대비 질감은 블록처럼 됩니다. 디자인이 분리를 위해 은은한 글로나 부드러운 그라데이션에 의존한다면 더 강하게 하세요. 그렇지 않으면 플랫폼이 이미지를 다시 인코딩한 뒤 효과가 사라질 수 있습니다. 간단한 테스트는 JPEG 품질 70으로 내보내 디자인이 여전히 버티는지 보는 것입니다. 버틴다면 어떤 플랫폼 처리에도 살아남습니다.

핵심 형태를 가장 어두운 톤 밖에 두기
은은한 글로와 그라데이션 강화하기
품질 70으로 내보내 테스트하기

실전 예시: 대비가 낮은 시장 풍경

한 여행 크리에이터가 붐비는 시장 사진을 씁니다. 밝기가 비슷한 수백 개의 알록달록한 노점 위에 노란색 텍스트 “HIDDEN GEM(숨은 명소)”이 올라가 있습니다. 원본 크기에서는 생동감 있어 보입니다. 하지만 168×94에서는 회색 잡음이 되고, RMS 대비는 0.11, 노란 텍스트는 노점 대비 약 1.8:1입니다.

크리에이터는 배경을 30% 어둡게 하고, 노점 하나를 초점으로 밝게 하고, 텍스트를 어두운 상자에 넣습니다. RMS 대비는 0.24, 텍스트 명암비는 7:1로 올라가고, 스퀸트 테스트에서 하나의 분명한 형태가 보입니다.

측정 항목	수정 전	수정 후
평균 밝기	48%	36%
RMS 대비	0.11	0.24
텍스트 대비	1.8:1	7:1
스퀸트 테스트	잡음	분명한 초점

색상과 대비에서 흔한 실수

밝기가 같은 색 조합

초록 위의 빨강, 보라 위의 파랑은 선명해 보이지만 흑백에서는 합쳐집니다.

어두운 테두리와 비네팅

다크 모드에서 썸네일의 가장자리를 지워 버립니다.

사진 위의 가는 컬러 텍스트

외곽선이나 상자가 없으면 글자 어딘가에서 대비에 실패합니다.

모든 것을 과포화하기

모든 것이 소리치면 아무것도 돋보이지 않습니다. 강조색은 하나만.

라이트 모드 무시하기

다크 모드에서 빛나던 파스텔 디자인이 흰 배경에서는 사라질 수 있습니다.

광색역으로 내보내기

Display P3나 CMYK 파일은 색이 틀어질 수 있습니다. sRGB로 내보내세요.

썸네일 색상과 대비: 어두운 피드와 밝은 피드에서 돋보이기