명도 대비와 가독성 기준

디자이너는 좋은 모니터를 어두운 실내에서 봅니다. 방문자는 저가 모니터나 야외에서 햇빛을 받으며 봅니다. 같은 색이 전혀 다르게 보입니다.

또 나이가 들면 밝기 구분이 어려워집니다. 연한 회색 글자는 특히 잘 안 보입니다.

일반 텍스트

본문 크기 글자. 가장 높은 대비가 필요합니다.

큰 텍스트

제목처럼 큰 글자는 기준이 조금 완화됩니다.

UI 요소

버튼 테두리, 입력칸 경계, 아이콘도 대비 기준이 있습니다.

검사 도구

색 코드 두 개를 넣으면 통과 여부를 알려줍니다.

브라우저 도구

개발자 도구에서 요소를 선택하면 대비를 보여주기도 합니다.

대비 문제가 자주 생기는 자리가 정해져 있습니다. 시안 검토 시 이 부분을 먼저 확인하세요.

특히 브랜드 색이 밝은 경우 그 위의 흰 글자가 문제가 됩니다.

대비가 부족할 때 대응

글자색을 조금 더 진하게 · 배경을 조금 더 연하게 · 글자 크기를 키움 · 굵기를 올림 · 이미지 위에는 어두운 레이어 추가

피해야 할 대응

'모니터를 밝게 하면 보인다' · '우리 고객은 젊으니 괜찮다' · '디자인이 우선이다' — 실제 사용 환경을 무시한 판단입니다

□  본문 글자와 배경의 대비를 검사 도구로 확인했는가

□  연한 회색 보조 텍스트가 기준을 통과하는가

□  브랜드 색 배경 위 글자의 대비를 확인했는가

□  이미지 위 텍스트에 어두운 레이어가 있는가

□  비활성 요소가 아예 안 보이지는 않는가

□  실제 저가 모니터나 야외에서 확인해 봤는가