라이트하우스로 검사 중에 접근성 점수에서 배경과 글자색에 대한 경고가 떠서 이걸 개선하는 중이었다. 실무에서는 아마 디자이너의 작업이 되겠지만 나는 지금 디자인도 개발도 함께 하고 있으니까 이번 기회에 열심히 챙겨봤다. 어느 대비가 맞는지 잘 모르겠어서 이 경고창에서 제공해주는 사이트에 들어가다가 문득 GPT 한테 물어보면 이것도 계산해주나? 싶어서 물어봤고 생각보다 답을 잘해줘서 기록해본다. 개발자도구에서 제공한 사이트
색상 대비를 충분히 맞추려면 WCAG(Web Content Accessibility Guidelines)의 기준을 따르는 것이 좋습니다. 일반적으로 텍스트와 배경 색상 사이의 명도 대비가 최소 4.5:1 이상이어야 합니다 (대형 텍스트는 3:1). 이를 위해 현재 사용하는 색상들의 명도 대비를 확인해보고, 필요하다면 텍스트 색상을 조정해야 합니다.
현재 사용 중인 색상
Mainblue (배경): rgba(10, 115, 249, 1) (파란색)
Maingreen (배경): rgba(72, 250, 117, 1) (녹색)
White (텍스트): #FFFFFF (흰색)
Mainblue (텍스트): rgba(10, 115, 249, 1) (파란색)
대비 계산 결과:
Mainblue 배경 vs White 텍스트:
대비: 4.74:1 (적합)
이 조합은 WCAG 최소 기준(4.5:1)을 만족합니다.
Maingreen 배경 vs Mainblue 텍스트:
대비: 1.97:1 (부적합)
이 조합은 명도 대비가 너무 낮아 WCAG 기준에 부적합합니다.
해결 방안:
Maingreen 배경에서 Mainblue 텍스트 사용: 이 조합의 대비를 개선하려면 Mainblue 텍스트 대신 더 어두운 색상을 사용해야 합니다. 예를 들어, 검정색 (#000000) 텍스트는 대비가 충분합니다.
더블 체크는 늘 필수적이고 너무 의존하지 않도록 신경을 곤두세우고 있어야하지만 이런 식의 서포트에는 정말 좋은 것 같다. 앞으로도 잘 사용하는 방법에 대해 고민해야겠다.
참고로 여기서 색상놀이하고 있으면 재밌다 전부 pass로 바꼈을 때 짜릿하다.
