디스플레이 배경 색상과 전경 색상이 충분히 높은 대비
모든 텍스트 요소가 전경 텍스트와 배경색 사이에 충분한 색상 대비가 있는지 확인하십시오.
성공 지침: 텍스트가 이미지의 일부인 경우에도 색상 대비 비율이 작은 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1 이상인지 확인하십시오. 요구 사항에 따라 큰 텍스트는 18pt(24 CSS 픽셀) 또는 14pt 굵은 텍스트 (19 CSS 픽셀) 로 정의됩니다. 참고: 요소의 색상 대비 비율이 1:1 인 경우 요소는 "불완전한" 것으로 간주되어 수동으로 검토해야합니다.
낮은 시력을 가진 일부 사람들은 낮은 대비를 경험합니다. 즉, 밝거나 어두운 부분이 많지 않습니다. 모든 물체는 동일한 밝기를 나타내는 경향이 있으므로 윤곽, 경계, 가장자리 및 세부 사항을 구별하기가 어렵습니다. 밝기가 배경에 너무 가까운 텍스트를 읽기가 어려울 수 있습니다.
시력이 낮은 사람의 수는 완전히 시각 장애인의 거의 3 배입니다. 12 명 중 1 명은 미국에서 남성의 약 8%, 여성의 0.4% 로 전체 색상을 볼 수 없습니다. 시력이 낮거나 색맹이있는 사람들은 대비가 충분하지 않을 때 배경의 텍스트를 구별 할 수 없습니다.
색상의 투명성과 불투명도는 배경에서 고려됩니다.
전경의 색상 투명성과 불투명도는 다음과 같은 이유로 고려하고 다루기가 더 어렵습니다.
- 전경과 배경은 같은 색입니다.
- CSS 배경 그라디언트.
- CSS 의사 요소의 배경 색상입니다.
- CSS 테두리로 만든 배경 색상입니다.
- 전경의 다른 요소와 겹침-때로는 까다로운 위치 때문에 발생합니다.
- 요소는 CSS를 통해 뷰포트 밖으로 이동합니다.
Adobe 색상 지원 도구 https://color.adobe.com/zh/create/color-contrast-analyzer 열기
그림과 같이 텍스트 색상과 배경 색상을 설정하십시오.
https://dequeuniversity.com/rules/axe/4.11/color-contrast?lang=zh
