구글 블로그 백그라운드와 텍스트의 색상 대비율 문제를 해결해 보자.

참고로 오늘의 포스트는 작성하면서도 '이렇게까지 할 필요가 있을까?' 싶었다.

이 정도까지 하는 건 너무 완벽주의 아닌가? 싶었지만.. 어쨌든 필요한 사람이 있을지도 모르니 글로 정리해 본다.

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

블로그나 웹사이트의 속도를 측정해주고 개선점을 알려주는 사이트, PageSpeed Insights

PageSpeed Insights는 웹사이트 속도를 측정하고 개선점을 알려주는 웹사이트입니다. 이 글은 PageSpeed Insights를 소개하고, 어떻게 사용해야 하는지, 주요 지표는 무엇을 의미하는지 자세히 알려주는 가이드입니다.

지난 포스트에서 소개한 사이트인 페이지 스피드 인사이트^{PageSpeed Insights}에서 이 블로그를 측정해보니, '접근성' 항목에 다음과 같은 메시지가 있었다.

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

'많은 사용자가 저대비 텍스트를 읽는 데 어려움을 겪거나 전혀 읽지 못합니다.'라고 하는데..

이 캡처 이미지에서 문제로 지적한 부분을 직접 살펴보자.

파랗게 표시해 놓은 부분이 문제의 그 부분이다.

포스트 목록 페이지에서 포스트의 작성 날짜와 내용 미리보기 텍스트의 색상 대비율이 충분하지 않다고 한다.

내가 보기에는 아주 잘 보이는데, 이 정도가 대비율이 충분하지 않다고..?

정말 이 정도의 대비율로도 글씨가 잘 안 보이는 사람도 있는데, 내가 못 겪어봐서 이해를 못 하는 것인지, 아니면 이 PageSpeed Insights의 기준이 엄격한 것인지 모르겠다.

어쨌든 시작을 했으니 이 문제도 한 번 해결해 보도록 하자.

포스트 작성 날짜와 내용 미리보기 텍스트의 색상 변경

1. 포스트 작성 날짜 색상 변경

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 .post-meta를 검색한다.

이 클래스에 있는 컬러 값을 삭제해야 한다.

2. 포스트 내용 미리보기 색상 변경

그리고 캡처는 하지 않았지만 포스트 내용 미리보기 텍스트의 색상을 변경하기 위해서는 .post-snippet{ }에 있는 color도 삭제를 해야한다.

이렇게 두 개를 삭제하고 저장하자.

3. 푸터의 포스트 작성 날짜 색상도 변경

PageSpeed Insights에서 다시 측정을 해보니, 이번에는 푸터^Footer에 있는 포스트 작성 날짜가 너무 어둡다.

이건 인정..

알고보니 아까 CSS를 수정하면서 푸터에 표시되고 있는 글 목록 위젯의 작성 날짜도 같이 어두워진 것이다.

이것들은 같은 클래스를 공유하고 있었다.

아까 색상을 삭제했던 .post-meta 클래스의 아래에 .footer .post-meta 클래스를 만들자.

그리고 조금 밝은 색상을 넣었다.

푸터의 블로그 템플릿 사이트 링크 색상도 변경하자

다시 PageSpeed Insights에서 측정을 해보았다.

아직도 문제가 남아있다. 그런데 이게 마지막이다.

이번에는 푸터에 있는 이 템플릿을 만든 곳으로 이동하는 링크의 색상이 문제다.

무료 버전의 템플릿을 사용하고 있기 때문에 나타나는 텍스트인 것으로 아는데..

내가 블로그로 돈을 벌고 있다면 통 크게 질렀을지도 모르지만, 아직 애드센스 승인이 나지 않았다..

이번에는 푸터에 있던 텍스트 'Design by'로 검색을 했다.

여기 보이는 코드들이 푸터에 있던 템플릿 만든 곳으로 이동하는 링크의 코드다.

여기를 수정해야 하는데, 또 귀찮은 문제가 기다리고 있었다.

바로 이전에 작성한 포스트에서도 그런 일이 있었는데, 내가 직접 CSS를 수정할 수 없는 부분이 있었던 것이다.

개발자 도구를 열어서 확인해 봤다.

CSS 코드에서 !important가 무엇을 뜻하는 것인지 아는 사람들은 알 것이다.

다른 CSS 설정들은 무시하고 !important가 붙은 부분을 최우선으로 적용하는 것이다.

클래스나 id가 쓰여있지 않고 element.style이라고 쓰여있는 것에 느낌이 오겠지만, 이 CSS 코드들은 HTML 편집을 들어가도 없다.

템플릿을 제작한 사람이 걸어놓은 코드로, 내가 수정할 수 없는 것이다.

그런데 자바스크립트로는 가능하다.

먼저 HTML 코드를 다음과 같이 수정하자.

<div class='copyright-area'>
    <span class='copyright-text'>Design by 
        <a
            href='https://www.templateify.com/'
            id='mycontent'
            target='_blank'
            title='Templateify'
        >
            Blogspot Theme
        </a> | Distributed by 
        <a
            href='https://gooyaabitemplates.com/'
            rel='nofollow noopener noreferrer'
            style='color:#5ea2fc;font-weight:700;'
            target='_blank'
            title='Gooyaabi'
        >
            Gooyaabi
        </a>
    </span>
</div>

방문하신 분들이 보기 편하게 가독성 좋게 줄 바꿈과 들여쓰기를 했다.

일단 첫 번째 <a> 태그 링크에 target='_blank' 속성을 추가했다.

이게 없는 상태에서 블로그 방문자가 이 링크를 클릭한다면, 새 창이 뜨지 않고 현재 블로그 창에서 페이지 이동이 생겨버리기 때문에 꼭 넣어줘야 한다.

두 번째 링크에는 rel 속성을 nofollow noopener noreferrer로 수정하고, style 속성에서 색상을 수정했다.

두 번째 링크는 여기서 색상을 수정할 수 있는데, 아까도 말했듯 첫 번째 링크는 style 속성을 추가해도 수정이 안된다.

document.addEventListener('DOMContentLoaded', function() {
  const targetElement = document.querySelector('.copyright-text a');
  if (targetElement) {
    targetElement.style.color = '#5ea2fc';
    targetElement.setAttribute('rel', 'nofollow noopener noreferrer');
  }
});

이 자바스크립트 코드를 추가해야 한다.

그런데 이 코드에서 document.addEventListener('DOMContentLoaded', function() 이 부분은 바로 이전 포스트에서도 사용했었던 코드다.

그러니 혹시 이전 포스트도 보고 따라했던 사람은 기존의 코드를 재활용하도록 하자.

이런 식으로 말이다.

그리고 코드를 저장하면 HTML과 CSS 수정으로는 색상을 바꿀 수 없었던 첫 번째 링크의 색상을 바꿀 수 있게 된다.

이번에도 미션 컴플리트

참고로 나는 지금까지의 수정으로 페이지 스피드 인사이트에서 블로그의 접근성에 모든 문제가 사라져서 100%가 되었다.

(이전에도 언급했지만, 아직 이 블로그를 검색 사이트에 등록하지 않아서 검색엔진 최적화는 69%다.)

나처럼 블로그의 접근성을 100%로 만들고 싶은 분은 나의 모든 포스트들을 챙겨보시길 바란다.

그런데 처음에도 언급했지만, 수정하기 전의 색상도 충분히 사람 눈에 보이는 색상 대비였다.

내가 눈이 좋지 않은 사람의 입장을 이해하지 못한 것인지, 아니면 정말 아무런 문제 없는 색상 대비율이었지만 컴퓨터가 정한 기준이 너무 엄격한 것이었는지 모르겠다.

암튼 눈으로 보기에는 딱히 문제될 건 없어보였는데, 그걸 수정해 나가는 과정은 꽤 어려웠다.

게다가 템플릿 제작자가 수정할 수 없게 해놓은 색상을 내가 임의로 변경했다는 점도 좀 걸린다.

수정할 수 없게 해놓았다면 무료로 쓰고 있는 입장에서는 손대지 않는 것이 맞는 것 같은데, 그러면 유료 템플릿을 구매하기 전까지 접근성 문제는 계속 해결되지 않을 것이다.

그래서 원래 색상인 파란색은 그대로 살리고 밝기만 좀 밝게 했는데, 템플릿 제작자 님도 애교로 봐주시기를.. 💗

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.