2026.09.20 - 다크 UI에서 회색 글씨가 안 읽히는 이유
다크 모드 UI를 만들며 겪은 대비 문제. 순수 검정 대신 쓰는 배경색, 텍스트 단계, 대비율 확인 방법을 정리했다.
다크 모드 화면을 하나 만들고 나서 모니터를 바꿔 보다가 깨달았다. 내 모니터에서는 예쁜 보조 텍스트가 다른 모니터에서는 거의 안 보인다. 이번 주는 이걸 고친 이야기다.
처음 만든 팔레트
처음엔 이렇게 잡았다.
- 배경:
#000000 - 본문 글씨:
#FFFFFF - 보조 글씨:
#555555
배경이 검정이면 제일 “다크”해 보일 줄 알았다. 그런데 막상 스크롤을 해보니 흰 글씨가 번져 보이고, 눈이 금방 피곤했다. 보조 글씨는 아예 묻혔다.
순수 검정과 순수 흰색을 피하는 이유
대비가 너무 높으면 오히려 읽기 힘들다. 검정 배경 위의 순수 흰색은 글자 주변이 빛 번짐처럼 보이는 현상이 생긴다. 그래서 바꿨다.
- 배경:
#121316(아주 살짝 푸른 기가 도는 검정) - 본문 글씨:
#E6E7EB - 보조 글씨:
#9CA0AB
배경에 아주 조금 색을 섞으면 면이 단단해 보이고, 카드 같은 올라온 면을 #1B1D22 정도로 한 단계 밝게 만들기도 쉬워진다. 그림자 없이도 깊이가 생긴다.
대비율 숫자로 확인하기
눈대중은 믿을 게 못 된다. WCAG 기준은 본문 텍스트가 4.5:1 이상이다. 계산해 보니 이랬다.
| 조합 | 대비율 | 판정 |
|---|---|---|
#555555 on #000000 | 약 2.8 : 1 | 탈락 |
#9CA0AB on #121316 | 약 7.1 : 1 | 통과 |
#E6E7EB on #121316 | 약 15 : 1 | 통과 |
처음의 #555555 는 숫자로 보면 확실히 탈락이었다. 눈이 느낀 불편함이 틀리지 않았던 셈이다.
대비율은 브라우저 개발자 도구의 색상 선택기에서도 바로 볼 수 있다. 값을 하나씩 바꿔 보면서 4.5를 넘기는 가장 어두운 회색을 찾으면 된다.
텍스트는 세 단계면 충분하다
처음엔 회색을 다섯 가지나 썼다. 화면이 지저분해지기만 했다. 지금은 CSS 변수 세 개로 정리했다.
1
2
3
4
5
:root {
--text-primary: #e6e7eb;
--text-secondary: #9ca0ab;
--text-disabled: #646873;
}
비활성 텍스트는 일부러 대비가 낮아도 된다. 클릭할 수 없다는 신호이기도 하니까. 다만 안내 문구처럼 읽어야 하는 내용에는 쓰지 않는다.
채도 높은 색은 한 단계 낮춘다
라이트 모드에서 쓰던 파란 버튼 #2563EB 를 그대로 다크 배경에 올렸더니 너무 쨍했다. 채도를 낮추고 명도를 올려서 #6B93F5 쯤으로 바꾸니 배경과 훨씬 잘 어울렸다. 다크 모드는 색을 그대로 뒤집는 게 아니라 다시 고르는 작업에 가깝다.
정리
- 배경은 순수 검정 대신 아주 어두운 유채색 회색
- 본문은 순수 흰색 대신 살짝 낮춘 밝은 회색
- 보조 텍스트도 4.5:1은 넘긴다
- 채도 높은 색은 명도를 올리고 채도를 내린다
다음 화면은 처음부터 이 팔레트 위에서 시작할 예정이다.