글자색 배경색 명도 대비 확인하는 법, 기준은 4.5:1
글자가 읽히는지는 취향이 아니라 숫자로 정해집니다. 4.5:1 을 넘기면 통과예요.
회색 글씨가 안 보인다는 말을 듣고 제 화면을 다시 본 적이 있습니다. 잘 보이더군요.
큰 모니터에서, 밝은 실내에서, 그 색을 세 시간째 보고 있는 눈으로 보니까요.
숫자 하나로 봅니다
글자색과 배경색이 얼마나 다른지를 숫자 하나로 나타냅니다. 숫자가 클수록 잘 보여요.
- 검정 글씨에 흰 배경 = 21 (제일 큰 값)
- 흰 글씨에 흰 배경 = 1 (제일 작은 값, 아무것도 안 보임)
기준은 둘만 기억하시면 됩니다.
| 글씨 | 넘겨야 하는 값 |
|---|---|
| 본문처럼 작은 글씨 | 4.5 |
| 제목처럼 큰 글씨 (대략 24px 이상) | 3 |
넉넉하게 가고 싶으시면 7을 넘기세요. 밖에서 폰으로 보는 사람, 눈이 침침한 사람까지 포함하려면 그쯤 됩니다.
자주 걸리는 색
| 조합 | 값 | |
|---|---|---|
흰 배경 + #999999 회색 | 2.8 | 미달. 흔하게 쓰이는데 기준을 한참 못 넘습니다 |
흰 배경 + #767676 회색 | 4.5 | 딱 걸칩니다. 본문 회색의 하한선이 여기예요 |
흰 배경 + #595959 회색 | 7.0 | 넉넉합니다 |
| 노란 배경 + 흰 글씨 | 1.1~1.5 | 거의 안 보입니다. 노랑 위에는 검정이에요 |
| 파란 배경 + 검정 글씨 | 2~3 | 짙은 파랑일수록 나쁩니다 |
연한 회색은 왜 유행했나
화면에서 세련돼 보이기 때문입니다. 정보의 층을 나누는 데도 편하고요. 중요한 건 검게, 덜 중요한 건 연하게.
문제는 그게 만든 사람의 조건에서만 세련돼 보인다는 겁니다. 밝은 사무실의 좋은 모니터를 벗어나면 상황이 달라져요.
- 밖에서 햇빛 아래 폰으로 보면 연한 회색은 사라집니다
- 나이가 들면 눈이 받는 빛의 양이 줄어서 같은 화면이 더 어둡게 보입니다
- 싼 모니터는 색 표현 폭이 좁아서 연한 회색끼리 뭉갭니다
"덜 중요하니까 연하게"는 방향은 맞습니다. 다만 연하게 하는 대신 작게 하거나 여백을 주는 방법도 있어요. 층을 나누는 수단이 밝기 하나뿐인 게 아닙니다.
색맹·색약도 같이 걸립니다
한국 남성의 약 5%가 색을 구분하는 데 어려움이 있습니다. 스무 명 중 한 명이에요.
여기서 중요한 건 밝기 차이는 색과 상관없이 남는다는 점입니다. 빨강과 초록을 구분 못 하는 사람도 밝기가 다르면 구분해요. 그래서 대비 숫자를 챙기면 이 문제도 상당 부분 같이 풀립니다.
반대로 색으로만 구분하게 만들면 안 됩니다. "빨간 항목이 오류입니다"는 어떤 사람에게는 아무 정보도 아니에요. 색과 함께 글자나 아이콘을 붙여두면 그 사람도 읽습니다.
이 글이 안 다루는 것
- 투명도가 섞인 색: 반투명 위에 글자를 얹으면 실제 색이 배경에 따라 달라집니다. 겹쳐서 나온 최종 색으로 재야 해요
- 그라데이션 위의 글자: 자리마다 값이 다르니 가장 나쁜 지점을 기준으로 봅니다
- 이미지 위의 글자: 어두운 막을 한 겹 깔고 그 위에서 대비를 보는 게 보통입니다
글자색과 배경색 두 개만 넣으면 숫자와 통과 여부가 같이 나옵니다. 헥스 코드(#333333)와 RGB 값은 서로 변환되고요.
크롬·엣지에서는 화면 아무 데서나 색을 집어올 수 있습니다. 파이어폭스·사파리는 이 기능을 아직 지원하지 않아서 버튼이 흐리게 보여요.