엘리먼트는 반드시 충분한 명도 대비를 가져야 합니다

이 규칙이 확인하는 내용

전경색과 배경색 사이의 대비가 WCAG 2 AA 명암비 기준치를 충족하는지 확인하세요.

중요한 이유

WCAG 1.4.3은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1의 대비율을 요구합니다. 흐릿한 가격, 배지, 배너는 저시력인 사람은 물론, 밝은 빛 아래에서는 누구에게나 읽기 어렵습니다.

수정 방법

모든 웹사이트에서

1. 대비가 낮은 텍스트를 찾아 텍스트 색상과 배경색을 기록하십시오. 대비 검사 도구나 브라우저의 개발자 도구에서 두 색상을 모두 확인할 수 있습니다.
2. 테마 CSS에서 텍스트 색상이나 배경색을 바꿔 대비율을 4.5:1 이상으로 만드십시오(24px 이상 텍스트 또는 18.66px 이상 굵은 텍스트는 3:1).
3. 세일 배지, 플레이스홀더 텍스트, 푸터 링크, 이미지 위의 버튼에 특히 주의하십시오.

수정 확인 방법

• 스캔을 다시 실행해 color-contrast 항목이 더 이상 나타나지 않는지 확인하십시오.
• 정확한 색상 값을 대비 검사 도구에 넣어 직접 확인해 보십시오.

FixReports가 찾아내는 방법

저희 스캔은 테스트하는 모든 페이지에서 실제 Chrome 브라우저로 axe-core 규칙 color-contrast을(를) 실행하고, 실패한 요소마다 해당 페이지와 마크업, 그리고 해당하는 경우 스크린샷을 함께 보고합니다.

자동화 테스트는 이 특정 문제가 있다는 것을 확인할 뿐, 페이지의 나머지 부분이 접근 가능한지는 알 수 없습니다. 어떤 장벽은 사람이 페이지를 확인해야만 드러납니다.