색 대비
연한 회색 글씨는 밝은 데서 그냥 사라져요. 글자와 배경의 밝기 차이를 충분히 벌리는 일이고, 안 읽히는 문구는 없는 문구예요.
이런 증상이면 맞게 오셨어요
밖에서 폰을 꺼내 내 화면을 봤는데 글씨가 안 읽혀요. 어머니께 보여드렸더니 "뭐라고 써 있는 거야" 하세요. 손님이 매장에서 폰을 내밀며 "예약하기가 어디예요" 하고 물어요. 사진 위에 올린 제목이 어떤 사진에서는 멀쩡하고 어떤 사진에서는 사라져요.
전부 같은 원인이에요. 글자와 배경의 밝기 차이가 부족한 거예요. 이걸 색 대비라고 불러요.
간판을 생각해 보세요. 흰 바탕에 연한 노란 글씨로 상호를 쓴 간판은 낮에 지나가면 아무것도 안 적힌 판처럼 보여요. 글씨는 분명히 있어요. 그런데 바탕과 밝기가 비슷해서 눈이 글자를 못 떼어내요. 색 대비는 그 밝기 차이예요. 간판 값을 냈는데 상호가 안 읽히면 그 돈은 그냥 나간 거죠. 화면 위 문구도 똑같아요.
먼저 알아 두실 것
이건 취향 문제가 아니에요. 사장님 눈에는 흐린 게 세련돼 보일 수 있지만, 손님 눈에는 그냥 빈칸이에요. 안 읽힌 안내문은 없는 안내문이고, 안 보인 버튼은 없는 버튼이에요.
왜 내 화면에서는 잘 보였을까
사장님이 확인한 조건이 손님 조건과 달라요. 네 가지가 겹쳐서 사장님만 잘 보이는 상태가 만들어져요.
- 1밝기가 최대예요. 작업하는 사람 화면은 보통 밝기를 올려놓고 써요. 손님 폰은 배터리 아끼려고 절반 아래인 경우가 많아요.
- 2실내에서 봤어요. 햇빛 아래에서는 화면이 하얗게 떠요. 연한 회색 글씨는 그 순간 완전히 지워져요.
- 3내용을 이미 알아요. 무슨 글자인지 알고 보면 흐려도 읽혀요. 처음 보는 사람은 못 읽어요.
- 4눈이 젊어요. 노안이 시작되면 흐린 글자를 눈이 스스로 보정하지 못해요. 그리고 지갑이 두꺼운 손님이 그 나이대예요.
실내에서는 읽혀요. 밖에서는 안 읽혀요. 그래서 6시 넘어 예약 문의 전화가 아니라 항의 전화가 와요.
색만 진하게 바꿨어요. 글자 크기도 문구도 그대로예요. 그런데 읽는 사람 수가 달라져요.
3분 점검법
숫자를 재는 도구 없이도 사장님이 직접 확인할 수 있어요. 손님 조건을 흉내내는 거예요.
- 1폰 밝기를 30% 정도로 낮춰요. 이게 손님 폰의 흔한 상태예요.
- 2창가로 가거나 밖으로 나가서 봐요. 여기서 사라지는 글씨가 제일 먼저 고칠 글씨예요.
- 3화면을 캡처해서 흑백으로 봐요. 사진 앱 필터로 색을 빼면 밝기만 남아요. 글자와 배경이 비슷한 회색으로 붙어 보이면 그 자리가 위험한 자리예요.
- 4눈을 가늘게 뜨고 화면을 봐요. 흐릿해질 때 먼저 없어지는 글씨가 손님이 못 읽는 글씨예요.
- 5안 읽힌 자리를 그대로 적어 둬요. "가격표 밑 작은 안내문", "사진 위 제목"처럼요. 이 메모가 다음 단계의 주문서가 돼요.
흑백으로 보는 게 왜 통하나
색 대비는 색깔 차이가 아니라 밝기 차이예요. 색을 빼 버리면 밝기만 남아서, 눈이 속지 않아요. 흑백으로 봤을 때 구분되는 조합은 색을 되돌려도 거의 항상 잘 읽혀요.
이럴 때 이렇게 말하세요
사장님이 색 이름이나 숫자를 외울 필요가 없어요. 보인 증상을 그대로 말하면 돼요. 아래 문장을 그대로 읽어 주셔도 됩니다.
| 내 눈에 보인 증상 | 이렇게 말하세요 |
|---|---|
| 밝은 데서 글씨가 사라져요 | "야외에서 보면 글씨가 안 읽혀요. 글자 색을 더 진하게 해서 배경과 확실히 구분되게 해주세요" |
| 회색 안내문이 흐려요 | "설명 글씨가 너무 연해요. 본문은 검정에 가까운 색으로 바꿔주세요" |
| 사진 위 제목이 묻혀요 | "사진 위에 올린 제목이 안 읽혀요. 사진을 어둡게 덮고 흰 글씨를 올려주세요" |
| 버튼 안 글씨가 안 보여요 | "버튼 색과 버튼 글씨 색이 비슷해서 안 읽혀요. 둘의 대비를 높여주세요" |
| 어르신이 못 읽으세요 | "눈이 침침한 분도 읽을 수 있게 본문 글씨를 키우고 색을 진하게 해주세요" |
| 어두운 화면에서 글씨가 사라져요 | "어두운 배경일 때 글씨가 안 보여요. 어두운 화면용 글자 색을 따로 정해주세요" |
| 입력창에 이미 답이 쓰인 줄 알았어요 | "입력창 안내 문구가 실제로 입력한 글씨처럼 보여요. 구분은 되게 하고 읽히기는 하게 해주세요" |
| 못 누르는 버튼인지 흐린 버튼인지 몰라요 | "지금 못 누르는 버튼이라는 걸 흐림 말고 글자로도 알려주세요" |
| 빨간 오류 문구가 안 읽혀요 | "오류 문구가 배경에 묻혀요. 더 진한 색으로 하고 표시도 같이 붙여주세요" |
한 자리만 고치는 게 아니라 전체를 훑고 싶으면 이렇게 말해요. "화면 전체에서 색 대비가 부족한 글씨를 찾아서, 본문은 4.5대 1, 큰 제목은 3대 1 기준에 맞게 고쳐주세요." 이 숫자는 아래에서 설명할게요. 외울 필요는 없고 필요할 때 여기서 복사해 가면 돼요.
브랜드 색을 지키면서 고치려면
"우리 색은 유지하고 싶어요"를 같이 말해 주세요. "브랜드 색은 버튼과 배경에 그대로 쓰고, 읽어야 하는 글씨만 진한 색으로 바꿔주세요." 이렇게 하면 분위기는 살고 글씨는 읽혀요. 색 정하기는 브랜드 기본 문서에서 더 다뤄요.
특히 사고가 잦은 다섯 자리
만들어 놓은 화면에서 대비가 무너지는 위치는 거의 정해져 있어요. 여기만 먼저 봐도 대부분 잡혀요.
| 자리 | 왜 여기서 무너지나 | 손님에게 생기는 일 |
|---|---|---|
| 작은 회색 안내문 | 덜 중요해 보이라고 흐리게 했는데, 하필 글씨까지 작아요. 작고 연한 조합이 가장 안 읽혀요 | 환불 규정, 영업시간 예외, 배송 기간 같은 분쟁 나는 내용이 전달되지 않아요 |
| 사진 위 흰 글씨 | 사진은 밝은 데와 어두운 데가 섞여 있어요. 하늘이나 벽 부분에 글자가 걸리면 그대로 사라져요 | 제일 중요한 첫 문구가 안 읽혀요. 첫인상을 놓쳐요 |
| 입력창 안내 문구 | 입력한 글씨와 구분하려고 연하게 하다가 아예 안 보이게 돼요 | 무엇을 넣어야 할 칸인지 몰라서 문의가 오거나 그냥 나가요. 입력 확인도 같이 보세요 |
| 못 누르는 상태의 버튼 | 흐림만으로 "지금은 못 눌러요"를 말하려 해요. 손님은 그냥 화면이 이상한 줄 알아요 | 계속 누르다가 포기해요. 이유를 글자로 알려주면 해결돼요 |
| 어두운 화면 모드 | 밝은 화면 기준으로만 색을 정하면, 어두운 배경에서 진한 글씨가 배경에 잠겨요 | 폰을 어둡게 쓰는 손님에게만 화면이 비어 보여요. 사장님은 끝까지 모를 수 있어요 |
다섯 자리 중에 첫 번째와 세 번째가 돈과 직결돼요. 읽히지 않은 규정은 지켜지지 않고, 채워지지 않은 칸은 주문이 되지 않아요.
숫자 기준은 이렇게 생겼어요
세계적으로 쓰는 기준이 있어요. 밝기 차이를 배율로 재고 "몇 대 1"로 적어요. 흰색과 검정이 21대 1이고, 같은 색끼리는 1대 1이에요.
| 무엇 | 필요한 대비 | 쉽게 말하면 |
|---|---|---|
| 본문, 작은 글씨 | 4.5대 1 이상 | 흰 배경이면 중간 회색으로는 부족하고 진한 회색부터 안전해요 |
| 큰 제목, 굵은 큰 글씨 | 3대 1 이상 | 글자가 크고 굵으면 조금 덜 진해도 읽혀요 |
| 버튼 테두리, 아이콘, 그래프 선 | 3대 1 이상 | 글자가 아니어도 눈에 띄어야 하는 것에는 기준이 있어요 |
| 로고, 장식 무늬 | 기준 없음 | 읽으라고 놓은 게 아니면 예외예요 |
직접 계산하지 마세요
이 숫자는 AI에게 말할 때 쓰는 단어예요. 사장님이 계산기를 두드릴 일은 없어요. "4.5대 1 기준으로 맞춰주세요"라고 말하면 그 기준을 아는 쪽이 계산해요. 사장님 몫은 고친 뒤에 밝기 낮추고 다시 보는 것이에요.
사장님이 실제로 겪는 장면
장면 1 · 인쇄소에서 들은 말
“흰 종이에 이 노란 글씨는 안 보여요. 인쇄는 화면보다 정직해서, 흐린 건 그냥 안 나와요.”
종이에서 안 읽히는 조합은 화면에서도 위험한 조합이에요. 화면은 스스로 빛을 내니까 실내에서는 봐줄 만해 보여요. 그 관대함이 밖에 나가면 사라져요. 전단지에 올릴 수 있는 조합인지 따져 보는 게 좋은 기준이에요.
장면 2 · 손님이 폰을 내밀며 묻는다
“여기서 예약하는 거 맞죠? 어디를 눌러야 하는지 안 보여서요.”
이건 운이 좋은 경우예요. 물어봐 준 손님이니까요. 대부분은 안 보인다고 말하지 않고 그냥 창을 닫아요. 항의도 후기도 남지 않아서 사장님은 사고가 났다는 사실조차 몰라요. 그래서 대비 문제는 손님을 조용히 잃는 방식으로 손해를 내요.
장면 3 · 화면을 손봐 준 사람이 말했다
“전체 톤을 부드럽게 하려고 글자 색을 회색으로 낮췄어요. 이게 요즘 느낌이에요.”
의도는 맞아요. 방법이 비싼 거예요. 차분한 느낌은 여백과 글꼴에서 만들고, 읽어야 하는 글씨는 진하게 두는 게 정석이에요. 톤을 낮추고 싶으면 글자 대신 배경과 구분선을 손대라고 말해 보세요. 글꼴 쪽은 글꼴 문서에 있어요.
고쳤는데 또 흐려졌을 때
한 번 잡아 놓아도 다시 무너지는 자리가 있어요. 무너지는 계기가 정해져 있으니 미리 알아 두면 놀라지 않아요.
- 1새로 붙인 부분에서 다시 나요. 나중에 추가한 섹션은 예전에 정한 색 규칙을 안 물려받는 경우가 있어요. 새 화면을 붙였으면 그 부분만 다시 밝기 낮춰 보세요.
- 2사진을 갈았을 때 나요. 어두운 사진 기준으로 흰 글씨를 얹어 뒀는데 밝은 사진으로 바꾸면 그 자리만 사라져요. 어두운 막을 깔아 두면 사진을 갈아도 안전해요.
- 3어두운 화면 모드를 켠 손님에게만 나요. 사장님 폰이 밝은 모드면 끝까지 못 봐요. 한 번은 폰 설정에서 어두운 모드로 바꿔 놓고 확인해 보세요.
- 4글자 규칙을 색으로만 정해 뒀을 때 나요. "연한 회색은 보조 설명"처럼 규칙을 정해 두면, 보조 설명이 늘어날 때마다 안 읽히는 글이 같이 늘어요. 보조라는 표시는 색보다 크기와 위치로 하는 게 안전해요.
한 번에 규칙으로 박아 두려면
자리마다 고치는 대신 이렇게 말해 보세요. "본문 글자 색과 배경 색을 하나로 정해서 화면 전체에 똑같이 쓰게 해주세요. 앞으로 추가되는 부분도 그 색을 따르게요." 색을 한 곳에서 정해 두면 새 화면이 붙어도 같은 색을 물려받아요. 이 규칙을 어디에 적어 두는지는 스타일 문서에 있어요.
자주 묻는 것
- Q. 브랜드 색이 연한 파스텔이에요. 포기해야 하나요?
- 아니에요. 색을 쓰는 자리를 바꾸면 돼요. 파스텔은 넓은 면적, 배경, 카드 바탕에서 예뻐요. 그 위에 얹는 글씨만 진하게 하면 브랜드도 살고 글씨도 읽혀요. 반대로 파스텔로 글씨를 쓰면 색도 안 살고 글씨도 안 읽혀요.
- Q. 흐린 글씨가 세련돼 보이는데, 정말 문제인가요?
- 세련됨과 안 읽힘은 다른 것이에요. 잘 만든 화면을 보면 글자는 진하고, 대신 여백이 넓고 글꼴이 정돈돼 있어요. 명암을 낮추는 건 세련되게 만드는 가장 값싼 방법이면서 대가가 가장 큰 방법이에요.
- Q. 제 폰에서는 잘 보이는데 왜 고쳐야 하나요?
- 사장님 폰은 밝기가 높고, 실내에 있고, 무슨 글자인지 이미 알고 봐요. 조건 셋이 전부 유리해요. 밝기를 30%로 낮추고 창가에서 다시 보시면 다른 화면이 보여요.
- Q. 색을 구분하기 어려운 손님도 있잖아요. 그건 대비랑 다른 문제인가요?
- 이어져 있어요. 그런 손님에게는 색으로만 알리는 정보가 전부 사라져요. 예약 가능은 초록 칸, 마감은 빨강 칸으로만 표시하면 두 칸이 똑같아 보여요. 칸 안에 "예약 가능", "마감" 글자를 같이 넣으면 해결돼요. 더 넓은 이야기는 누구나 쓸 수 있게에 있어요.
- Q. 그림 안에 들어간 글씨도 같은 문제인가요?
- 더 위험해요. 그림 속 글씨는 손님이 확대해도 뭉개지고, 화면을 읽어 주는 기능도 못 읽어요. 중요한 문구는 그림에 넣지 말고 글자로 넣으세요. 그림에 대한 설명글은 대체 텍스트 문서를 보세요.
- Q. 고치라고 말했는데 이번엔 너무 새까매졌어요.
- 정도를 같이 말해 주면 돼요. "순수한 검정은 좀 딱딱해요. 아주 진한 회색 정도로 해주세요"처럼요. 한 번에 한 가지씩 말하는 게 빨라요. 요령은 프롬프트 문서에 정리돼 있어요.
확인해 보세요
흰 배경에 연한 노란 글씨로 쓴 상호가 밖에서 안 보여요. 무엇을 바꿔야 할까요?
하나 더
사진 위에 올린 흰 제목이, 하늘이 밝은 사진에서만 사라져요. 어떻게 말할까요?
직접 해보기
밝기를 낮추고 내 화면을 다시 열어 보세요
폰 밝기를 30% 정도로 내리고 창가에서 열어 보세요. 안 읽히는 자리를 하나만 찾아서, 위 표의 문장을 그대로 말해 보시면 됩니다. 3분이면 끝나요.
내 작업물 열기더 깊이 (안 읽어도 괜찮아요)
대비는 색깔 차이가 아니라 밝기 차이예요 · 여기서 대부분 헷갈려요. 노랑과 흰색은 눈에 보기에 전혀 다른 색인데도 대비는 1.1대 1 수준이에요. 반대로 짙은 파랑과 흰색은 색 계열이 붙어 보여도 대비가 10대 1을 넘어요. 기준이 되는 건 그 색이 내는 빛의 양이에요. 그래서 색을 빼고 흑백으로 보면 판단이 정확해져요. 노랑은 흑백으로 바꾸면 거의 흰색이 되고, 짙은 파랑은 거의 검정이 돼요. 색 고를 때 "흑백으로 만들면 얼마나 어두운 회색이 될까"를 한 번 상상해 보는 습관이 도움이 돼요.
4.5대 1이라는 숫자는 어디서 왔나 · 노안이 시작되거나 시력이 좀 떨어진 눈, 대략 안경 없이 흐릿하게 보이는 수준을 기준으로 잡은 국제 지침에서 왔어요. 즉 평균이 아니라 평균보다 조금 불편한 눈을 기준으로 정한 숫자예요. 큰 글씨에 3대 1을 허용하는 이유도 같아요. 글자가 크고 굵으면 획이 넓어서 같은 밝기 차이로도 눈이 형태를 잡아요. 한국에도 이 기준을 반영한 웹 접근성 지침이 있고, 공공기관과 일정 규모 이상 사업자는 준수 대상이에요. 작은 가게라면 법보다 매출 이야기로 받아들이는 게 실용적이에요.
사진 위에 글씨를 얹는 정석 · 글자에 그림자를 넣거나 테두리를 두르는 방법이 많이 쓰이는데, 이건 응급처치예요. 사진이 바뀌면 또 무너져요. 정석은 두 가지예요. 하나는 사진 전체에 어두운 막을 한 겹 덮는 것이고, 다른 하나는 글자 뒤에만 판을 하나 깔는 것이에요. 어두운 막은 사진 분위기를 유지하면서 어떤 사진이 와도 통해서 가장 안전해요. 글자 뒤 판은 사진을 가리는 대신 대비가 확실해서, 가격이나 영업시간처럼 반드시 읽혀야 하는 문구에 알맞아요. 손님이 올리는 사진을 그대로 보여주는 화면이라면, 사진을 고를 수 없으니 반드시 이 중 하나를 깔아 둬야 해요.
이것만 기억하세요
- ·안 읽히는 문구는 없는 문구예요. 취향이 아니라 손해 문제예요
- ·대비는 색깔 차이가 아니라 밝기 차이예요. 흑백으로 보면 바로 드러나요
- ·점검은 밝기 30%, 창가, 캡처 흑백, 눈 가늘게 뜨기 네 가지로 끝나요
- ·고칠 때는 증상을 그대로 말하세요. "야외에서 글씨가 안 읽혀요, 진하게 해주세요"
- ·브랜드 색은 배경과 버튼에, 읽어야 하는 글씨는 진한 색으로 나눠요