lighthouse 웹접근성 색상대비 문제 해결하고 점수 올리기

글제목

lighthouse 검사에서 웹접근성 항목인 Accessibility 점수를 올리기 위해 작업중에 아래와 같이 색상대비 문제를 개선하라는 메시지가 나왔습니다.

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

배경색과 글자색의 명암비가 충분하지 않아 나오는 메시지입니다. 저대비 텍스트는 많으면 저시력 또는 색맹인 사람은 텍스트를 배경과 구별할 수 없어서 개선하라는 내용입니다.

웹접근성 부분을 거의 다 개선해서 현재 점수가 97점이었는데 이 부분은 개선을 해야할 지 말아야 할지 엄청 고민했습니다. 

이 색상 자체가 템플릿을 구입하면서 들어있던 디자인의 기본 색상이었기 때문에 바꾸면 이상할 것 같았거든요. 그래서 계속 놔두고 있다가 한번 바꿔보기로 했습니다.

저대비 텍스트 모습

저대비 텍스트를 개선하기 위해서는 아래 사이트로 이동해서 색상 대비 분석기를 사용하여 원래의 색상을 집어넣고 밝기 조정을 통해 명암비가 허용치를 통과하는지 검사를 해봐야 합니다.

사이트 : 색상대비 분석기 사이트

색상대비 분석기 사이트에 접속하면 아래 그림처럼 색상 대비 분석기를 볼 수 있는데 제 블로그의 저대비 색상인 #4285F4를 넣고보면 결과값에 불합격이 3개가 나옵니다.

색상 대비 분석기 불합격

불합격 상태에서 색상 대비 분석기의 밝기를 조정해 보면 불합격이 점점 통과하다로 변하게 되는데 제 블로그는 최종적으로 #0B50C1 색상까지 밝기 조정을 하니 합격으로 변했습니다. 이제 이 색상을 블로그에 적용하면 됩니다.

색상 대비 분석기 합격모습

다시 lighthouse 검사를 해보면 경고메시지가 사라지고 점수가 100점으로 향상된 걸 볼 수 있습니다.