등대 점수에서 배경색과 전경 색상이 대조적으로 충분히 높지 않다는 문제를 처리하는 방법

디스플레이 배경 색상과 전경 색상이 충분히 높은 대비

모든 텍스트 요소가 전경 텍스트와 배경색 사이에 충분한 색상 대비가 있는지 확인하십시오.

성공 지침: 텍스트가 이미지의 일부인 경우에도 색상 대비 비율이 작은 텍스트의 경우 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