본 블로그(blog.donghoonyoo.com)을 디자인하며 성능, 웹 접근성, 보안 그리고 SEO(검색 최적화)를 고르게 갖춰야 할 필요가 있었습니다. 속도 검사를 위해 Google SpeedInsight를 오래간만에 찾아보던 중 web.dev라는 웹 사이트도 새로 오픈되었다는 사실을 알게 되었습니다. 검사 결과에서 여러 제안 사항을 받아볼 수 있었고, 그 중에는 배경과 텍스트 색의 비율을 조정해야 한다는 내용이 있었습니다. 배경과 텍스트 색의 비율을 맞춰야 하는 것은 매우 당연한 Chromium에 색 비율의 적합성을 알려주고, 색 조정을 돕는 개발자 도구가 있다는 사실이 인상 깊어 글로 공유합니다.


Chromium에서 색 비율 적합성 검사하기

본 블로그의 태그 리스트 사진

먼저 Chromium에서 개발자 도구를 열고 색 비율 적합성을 검사할 요소를 찾습니다. 필자의 경우 본 블로그의 태그를 눈에 띄게 보이게 하기 위해 색을 사용하였는데, 그 부분을 확인해 보았습니다.

Chromium 개발자 도구에 색상 선택기가 열려있는 사진

개발자 도구의 Styles 탭에서 color의 색상 코드 좌측에 있는 정사각형의 색상을 클릭하면 색상 선택기가 열립니다. 여기에서 Contrast ratio를 확장하면 해당 요소의 배경 색상과 글자 색상이 함께 표시되고, 색 비율의 적합성을 확인할 수 있습니다.

색 비율이 적합하다고 표시되면 그대로 유지해도 됩니다. 반대로 색 비율이 부적합하다고 표시되는 경우 색상 표에 그려져 있는 두 곡선을 참조하여 적합한 색상을 찾아볼 수도 있습니다.


마치며

색 비율 적합성 확인 도구는 참고용으로만 사용하는 것이 좋습니다. 무조건적으로 색 비율 적합성을 따라가면 오히려 어색한 색 조합이 나오는 경우가 있을 거라고 생각합니다. web.dev를 알게되며 웹 최적화 스킬과 접근성 향상 방법을 익히기 위해 노력해야겠다는 생각이 듭니다. 앞으로도 인상 깊은 점은 블로그를 통해 공유해 보겠습니다.