본 블로그(blog.donghoonyoo.com)을 디자인하며 성능, 웹 접근성, 보안 그리고 SEO(검색 최적화)를 고르게 갖춰야 할 필요가 있었습니다. 속도 검사를 위해 Google SpeedInsight를 오래간만에 찾아보던 중 web.dev라는 웹 사이트도 새로 오픈되었다는 사실을 알게 되었습니다. 검사 결과에서 여러 제안 사항을 받아볼 수 있었고, 그 중에는 배경과 텍스트 색의 비율을 조정해야 한다는 내용이 있었습니다. 배경과 텍스트 색의 비율을 맞춰야 하는 것은 매우 당연한 Chromium에 색 비율의 적합성을 알려주고, 색 조정을 돕는 개발자 도구가 있다는 사실이 인상 깊어 글로 공유합니다.
Chromium에서 색 비율 적합성 검사하기
먼저 Chromium에서 개발자 도구를 열고 색 비율 적합성을 검사할 요소를 찾습니다. 필자의 경우 본 블로그의 태그를 눈에 띄게 보이게 하기 위해 색을 사용하였는데, 그 부분을 확인해 보았습니다.
개발자 도구의 Styles 탭에서 color의 색상 코드 좌측에 있는 정사각형의 색상을 클릭하면 색상 선택기가 열립니다. 여기에서 Contrast ratio를 확장하면 해당 요소의 배경 색상과 글자 색상이 함께 표시되고, 색 비율의 적합성을 확인할 수 있습니다.
색 비율이 적합하다고 표시되면 그대로 유지해도 됩니다. 반대로 색 비율이 부적합하다고 표시되는 경우 색상 표에 그려져 있는 두 곡선을 참조하여 적합한 색상을 찾아볼 수도 있습니다.
마치며
색 비율 적합성 확인 도구는 참고용으로만 사용하는 것이 좋습니다. 무조건적으로 색 비율 적합성을 따라가면 오히려 어색한 색 조합이 나오는 경우가 있을 거라고 생각합니다. web.dev를 알게되며 웹 최적화 스킬과 접근성 향상 방법을 익히기 위해 노력해야겠다는 생각이 듭니다. 앞으로도 인상 깊은 점은 블로그를 통해 공유해 보겠습니다.