블로그 스킨을 쓰다 보면 기본 글자 색이 너무 연해서 읽기 힘든 경우가 꽤 있죠? 특히 #666 이하의 회색조는 눈이 침침한 분들에게는 정말 쥐약이에요. 이게 단순히 보기 불편한 걸 넘어서 구글이 중요하게 보는 웹 접근성이나 검색엔진 점수에도 안 좋은 영향을 준다는 사실, 알고 계셨나요? 오늘은 억지로 고정된 흐린 글자 색을 CSS로 깔끔하게 해결해서 가독성을 높이는 꿀팁을 알려드릴게요.
검색엔진과 방문자 모두 좋아하는 글자 색상 만들기
티스토리나 워드프레스 기본 스킨을 그대로 쓰다 보면 가끔 글자 색상과 관련해서 경고등이 켜질 때가 있어요. 구글 서치 콘솔이나 속도 측정 도구에서 “글자가 너무 흐립니다”라는 이야기를 듣게 되죠. 도대체 왜 스킨 제작자들은 글씨를 잘 안 보이게 #666 같은 연한 회색으로 설정하고, 심지어 `!important`까지 붙여서 수정도 못 하게 막아놨을까요?
왜 굳이 수정하기 힘들게 만들어 놨을까요?
보통 개발자들은 디자인의 통일성을 해치지 않으려고 강제 속성을 걸어두곤 해요. 사용자가 마음대로 색을 바꾸면 레이아웃이 어색해질까 봐 그런 건데, 사실 이게 글을 읽는 사람 입장에서는 참 불편하거든요. 명도 대비가 낮아서 접근성 기준에도 못 미치고, 시력이 안 좋은 분들은 글을 읽다가 지쳐서 나가버리게 돼요.
개발자가 의도한 디자인을 유지하려는 마음은 알겠지만, 굳이 흐린 색상까지 강제하는 건 사용자 경험 측면에서 아쉬운 부분이에요. 글자 색이 흐리면 아무리 좋은 내용을 써도 아래와 같은 문제가 생길 수밖에 없거든요.
- 접근성 문제: 눈이 편하지 않아서 웹 접근성 방법라인(WCAG) 기준에 걸려요.
- 가독성 저하: 글이 눈에 팍 들어오지 않으니 방문자가 금방 창을 닫게 되죠.
- SEO 불이익: 방문자가 빨리 나가버리면 검색엔진은 “이 글은 별로인가 봐”라고 판단해서 점수를 깎을 수 있어요.
웹 접근성 방법라인에서는 텍스트와 배경의 명도 대비가 최소 4.5:1은 되어야 한다고 권장해요. 흐린 회색은 이 기준을 맞추기 어려워서 아무리 정성스럽게 쓴 글이라도 전달력이 떨어질 수밖에 없어요. 아래 이미지처럼 최소한의 진하기는 유지해 주는 게 중요해요.
CSS 한 줄로 흐린 글자 찐하게 바꾸는 꿀팁
강제로 설정된 색상 덮어쓰기
스킨에 `!important`가 붙어 있어서 색이 안 바뀐다고 포기하지 마세요. CSS에는 ‘나중에 쓴 코드가 이긴다’는 법칙이 있거든요. 스킨 편집 창 맨 아래에 우리가 원하는 진한 색상을 강제 속성으로 한 번 더 적어주면 간단하게 해결된답니다.
CSS 편집 창 가장 마지막 줄에 아래 코드를 복사해서 넣어보세요. #222 같은 진한 회색을 쓰면 눈도 편하고 글씨도 훨씬 또렷해져서 가독성 문제를 한 번에 날려버릴 수 있어요.
/* 가독성을 높이는 글자색 변경 코드 */
#content, .article-content, p, span, li, div, body {
color: #222 !important; /* #222 또는 #333 정도가 눈에 가장 편해요 */
}
이렇게 하면 기존에 아무리 강력하게 설정된 흐린 색이라도 우리가 정한 진한 색으로 덮어쓸 수 있어요. 이제야 글이 좀 시원시원하게 보이실 거예요.
어떤 색을 써야 눈이 가장 편할까요?
무조건 검은색이라고 다 좋은 건 아니에요. 배경색과의 조화를 생각해서 적절한 진한 회색을 고르는 게 포인트예요.
| 텍스트 색상 | 배경색 | 명도 대비 느낌 | 추천 점수 |
| #222 (진한 회색) | #ffffff (흰색) | 눈이 편하고 잘 보임 | ●●●●● |
| #333 (중간 회색) | #f9f9f9 (연한 회색) | 부드럽게 읽힘 | ●●●●○ |
| #999 (흐린 회색) | #ffffff (흰색) | 잘 안 보여서 답답함 | ●○○○○ |
정리하자면, 기본 스킨의 흐린 글자 색은 가독성도 떨어뜨리고 검색엔진 점수에도 안 좋아요. CSS 맨 아래에 덮어쓰기 코드를 추가해서 적어도 #444 이상의 진한 색으로 바꿔주세요. 글씨가 선명해지면 방문자들도 더 오래 머물게 될 거예요.
자주 묻는 질문 정리 (Q&A)
Q1. 명도 대비가 검색 순위랑 진짜 상관있나요?
A1. 네, 직접적인 점수는 아니더라도 간접적으로 엄청 커요. 글이 잘 안 보이면 사람들이 바로 뒤로 가기를 누르잖아요? 그럼 체류 시간이 확 줄어드는데, 구글은 이걸 보고 “아, 이 글은 사용자에게 도움이 안 되는구나”라고 생각하거든요. 결국 보기 편한 글이 검색 결과에서도 유리해요.
Q2. 그럼 아예 새까만 #000을 쓰는 게 제일 좋나요?
A2. 꼭 그렇지는 않아요. 흰 배경에 완전 검은 글씨는 대비가 너무 강해서 오히려 눈이 쉽게 피로해질 수 있어요. 그래서 전문가들은 #222이나 #333 정도의 짙은 회색을 추천해요. 이게 장문의 글을 읽을 때 눈이 훨씬 편하거든요.
Q3. 글자 크기를 키우면 해결되지 않나요?
A3. 글자가 커지면 좀 낫긴 하지만, 근본적인 해결책은 아니에요. 작은 글씨로 된 설명이나 메뉴들도 다 잘 보여야 하니까, 색상 자체를 진하게 잡아주는 게 가장 확실한 방법이에요. 폰트 크기 조절보다는 색상 변경을 먼저 시도해 보세요.
