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

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. 티스토리 스퀘어 스킨 각주[footnote] 아래 간격 띄우기 (Square Final 1.1.1)
  2. 워드프레스 전화번호 자동 링크 해제하기 (클릭 방지)
  3. 워드프레스 5개월간 살아남은 플러그인 (feat. 클라우드웨이즈)
  4. 티스토리, 색인 및 방문자 감소 후 회복중 (카카오 데이터센터 화재)
  5. 네이버 서치 어드바이저 웹페이지 수집 요청이 또 말썽이다 (색인)

댓글 남기기