웹 접근성 준수 지침 - 인식의 용이성 - 5. 텍스트 콘텐츠의 명도 대비

웹 접근성에서 텍스트 콘텐츠의 명도 대비는 사용자가 텍스트를 쉽게 읽을 수 있도록 하는 중요한 요소입니다. 텍스트와 배경 간의 명도 대비가 충분하지 않으면 저시력자나 색각 이상자 등 다양한 사용자들이 콘텐츠를 인식하는 데 어려움을 겪을 수 있습니다. 따라서 웹 접근성 지침에서는 텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 대 1 이상이어야 한다고 규정하고 있습니다. 이 기준은 텍스트의 크기와 용도에 따라 다를 수 있습니다.

1) 텍스트

텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 대 1 이상이 되도록 제공해야 합니다. 이는 일반 텍스트의 경우 기본적으로 적용되는 기준입니다. 명도 대비를 확인하려면 다양한 도구를 사용할 수 있습니다.

예시

텍스트와 배경 색상의 명도 대비를 계산할 수 있는 다양한 온라인 도구가 있습니다. 이를 통해 텍스트와 배경의 명도 대비를 확인하고, 적절한 색상 조합을 선택할 수 있습니다.

.text-content {
  color: #000000; /* 텍스트 색상 */
  background-color: #FFFFFF; /* 배경 색상 */
}

2) 이미지 내부 텍스트

이미지 내부에 포함된 텍스트 역시 배경과의 명도 대비가 4.5 대 1 이상이 되도록 제공해야 합니다. 이는 이미지에 포함된 중요한 정보가 사용자에게 명확하게 전달되도록 하기 위함입니다.

예시

이미지 내부 텍스트가 명확하게 보이도록 대비를 충분히 확보합니다.

<div style="background-image: url('example-image.jpg'); color: #FFFFFF; padding: 20px;">
  <span>이미지 내부 텍스트</span>
</div>

3) 의미 있는 이미지

의미 있는 이미지와 배경 간의 명도 대비도 4.5 대 1 이상이 되도록 제공해야 합니다. 이는 이미지가 단순 장식이 아니라 중요한 정보를 전달하는 경우에 해당합니다. 명도 대비를 확보하여 이미지를 통해 전달하려는 정보가 명확하게 인식될 수 있도록 해야 합니다.

예시

의미 있는 이미지가 배경과 충분한 대비를 이루도록 합니다.

<div style="background-color: #FFFFFF;">
  <img src="example-meaningful-image.jpg" alt="의미 있는 이미지" style="border: 1px solid #000000;">
</div>

명도 대비는 웹 콘텐츠의 가독성과 접근성을 높이는 데 중요한 역할을 합니다. 명도 대비를 준수함으로써 더 많은 사용자가 웹 콘텐츠를 쉽게 접근하고 이해할 수 있도록 노력해야 합니다.