백그라운드 및 포그라운드 색상의 대비율이 충분하지 않습니다

Color contrast recommend improvement


PageSpeed Insights에서 '접근성 > 대비' 항목에서 확인할 수 있는 메시지로 다음을 들 수 있다. 글자색과 배경색의 대비가 떨어져 가독성에 문제가 생길 수 있다는 의미가 되겠다.

백그라운드 및 포그라운드 색상의 대비율이 충분하지 않습니다. 많은 사용자가 저대비 텍스트를 읽는 데 어려움을 겪거나 전혀 읽지 못합니다.

Background and foreground colors do not have a proper contrast ratio. Low-contrast text is difficult or impossible for many users to read.

글자와 배경의 색상 대비(color contrast)가 낮으면 저시력자 뿐만 아니라 정상적인 시력을 가진 사람도 읽기 어려워지는 건 당연지사. 웹 페이지들은 일반적으로 정보 전달이나 교환을 위해 작성된 경우가 많은데 이를 위해 기본적으로 전제되어야 할 가독성에 문제가 있다면 곤란하다.

그동안 글을 쓸 때 특정 글자를 강조하기(highlight) 위해 너무 튀지 않고 적당히 잘 보인다고 느껴지는 색을 주관적 판단으로 골라 사용해 왔었다. 하지만 이것도 나름대로의 기준이 있었다. 작은 글자는 4.5:1, 큰 글자는 3:1의 최소 대비를 가지고 있어야 한다. (웹 콘텐츠 접근성 지침 (WCAG) 2.1)

사실 말이 쉽지 대비 값을 확인하는 것 자체도 어렵고, 배경색이 달라지면 다시 찾아야 한다. 예를 들어 기본적인 글쓰기는 흰색(#FFFFFF) 바탕 위에서 쓰지만 종종 회색 배경(#F0F0F0)을 가진 글 상자를 사용할 수도 있다. 이 경우 두 가지 상황에 각각 맞는 색을 찾아 두거나, 두 상황을 모두 만족하는 색을 적용해야 한다.

그나마 다행히 사용자가 글자색(Foreground color)과 배경색(Background color)을 설정하면 두 색의 대비 값을 보여주며 최소 대비 값의 통과 여부를 Pass, Fail을 알려주는 유용한 페이지가 있었다.


Elements must meet minimum color contrast ratio thresholds

Color contrast
글자색과 배경색 설정
Color contrast result
색깔 대비 결과


이 사이트를 이용하면 생각보다 빠르고 편하게 여러 상황에서 쓸 수 있는 색깔을 찾을 수 있다. 특히나 HEX, RGB, 컬러 피커(color picker), 프리셋 색상, 그리고 밝기를 조정할 수 있는 바(bar)가 있어 원하는 색을 선택하고 조정해 가며 색 대비 결과를 즉각적으로 확인할 수 있어 꽤 유용하다.

이렇게 내가 사용할 글자 강조색을 찾았다면 워드프레스 '디자인(구 외모) > 사용자 정의 > Colors > Global Colors'에 등록해 사용하거나, 기존에 사용 중인 강조색을 교체함으로써 발행한 모든 포스트에 자동 적용하는 방법도 가능하다. (생각보다 매우 편리한 시스템인데, 이제야 제대로 된 사용법을 알게 된 것이 안타까울 뿐)

다만 이렇게 최소 대비 값을 맞추어 글자색을 골라 보면, 많은 경우 색깔이 발랄하지 않고 칙칙해진다는 것이 고민이다. 반대로 생각해 보면 전체적으로 차분하고 안정감 있어 보이게 된다고도 할 수 있겠다. 사실 처음에는 차분한 느낌의 강조색이 마음에 들지 않았지만 이 역시 적응하게 되는 것 같다. 오히려 그동안은 글자를 강조한답시고 가독성이나 어울림 따위는 신경 쓰지 않았던 것 같아 반성하게 되는 느낌.


카테고리의 다른 글

  1. apple-touch-icon.png 404 에러 탈출기 (feat. precomposed, 120x120, favicon)
  2. HTML 앵커 <a> 태그 속성으로 alt는 없었구나
  3. 구글 애널리틱스 내부 트래픽 설정하기 (분석 제외 IP 설정)
  4. 구글 애널리틱스와 태그 매니저 페이지뷰 중복측정 방지하기
  5. 구글 애드센스 클릭은 있지만 수익은 없는($0.00) 원인

댓글 남기기