현수막 색 조합: 느낌과 글자 대비를 따로 확인하기
밝은 노랑에 흰 글자를 쓰면 경쾌해 보이지만 작은 날짜가 흐려 보일 수 있습니다. 색상 이름이 다른 것만으로는 글자가 잘 구분되지 않습니다. 같은 문구를 놓고 글자색만 바꾼 결과부터 비교해 보세요.
1. 노란 배경을 유지하고 글자색만 바꿔 봅니다
흰 글자 + 노랑
#FFFFFF / #F59E0B
계산 대비 2.15:1
짙은 글자 + 같은 노랑
#111827 / #F59E0B
계산 대비 8.26:1
첫 번째 수정은 배경을 남기고 글자만 어둡게 만드는 방법입니다. 노란색의 분위기는 유지하지만 흰 글자의 가벼운 인상은 달라집니다. 흰 글자를 유지하고 싶다면 배경을 짙은 파랑 #1E3A8A로 바꿀 수도 있습니다. 이때 계산 대비는 약 10.36:1입니다.
2. 직접 계산한 세 가지 색 쌍
아래 값은 불투명한 단색을 sRGB로 해석해 WCAG 상대 휘도 식으로 계산했습니다. 값은 소수 둘째 자리로 반올림해 표시하며 기준 비교는 반올림 전 수치를 사용합니다.
| 글자 / 배경 | 대비 | 웹 일반 텍스트의 4.5:1 기준과 비교 |
|---|---|---|
| #FFFFFF / #F59E0B | 2.15:1 | 미달 |
| #111827 / #F59E0B | 8.26:1 | 충족 |
| #FFFFFF / #1E3A8A | 10.36:1 | 충족 |
3. 배경·제목·강조·보조색에 역할을 정합니다
색상 조합 시뮬레이션에서 기준색 하나와 추천 방식을 고르면 다섯 색의 후보를 볼 수 있습니다. 모든 색을 같은 면적으로 쓰기보다 배경은 넓게, 제목은 읽히는 색으로, 강조색은 가격이나 행동 한 곳에 배치해 보세요. 작은 날짜와 연락처도 실제 놓이는 배경과 한 쌍으로 비교해야 합니다.
예를 들어 짙은 파랑을 제목색으로 쓸 때는 밝은 면 위에 배치하고, 같은 파랑을 넓은 배경에 쓰는 시안에서는 제목을 밝게 바꾸어 비교합니다. 보색 조합이라는 이유만으로 모든 작은 글자에 두 색을 번갈아 쓰면 정보의 역할이 혼란스러워질 수 있습니다.
4. 사진 위 글자는 대표 배경색 하나로 판단할 수 없습니다
그라데이션이나 사진 위에서는 글자마다 뒤에 놓인 밝기가 달라집니다. 시뮬레이터에서 골랐던 배경 HEX 값 하나가 사진 전체를 대표하지 않습니다. 제목 뒤에 불투명한 단색 판을 넣으면 비교가 쉬워지지만, 반투명 판이라면 합성된 실제 색을 기준으로 다시 계산해야 합니다.
사진의 밝은 부분을 피하려고 글자를 옮길 때는 사람의 얼굴이나 상품을 가리지 않는지도 함께 살피세요. 색만 바꾸어 해결되지 않으면 배치·크기·굵기를 바꾸는 편이 나을 수 있습니다. 최종 선택은 작은 미리보기와 실제 재료의 견본을 함께 보고 결정하세요.
기준·계산식 출처: W3C WCAG 2.2 명도 대비 설명. 계산은 (밝은 상대 휘도 + 0.05) ÷ (어두운 상대 휘도 + 0.05)를 사용했습니다. 예시 색 쌍과 비교 레이아웃은 현수막랩에서 구성했습니다.