📍 읽어주세요

텍스트 또는 텍스트 이미지의 시각적인 표현은 다음 예외사항을 제외하고 명도 대비 차이는 최소 4.5:1이 되어야 합니다.

• 큰 텍스트: 18px 이상의 굵은 텍스트 또는 24px 이상의 텍스트의 경우 최소 3:1의 명도대비를 허용 • 부수적: 텍스트나 텍스트 이미지가 비활성 UI 컴포넌트이거나, 순전히 장식용이거나, 숨겨져 있는 경우 명도 대비에 대한 요구사항이 없습니다. • 로고: 로고나 상표에 포함된 텍스트는 명도대비 요구사항이 없습니다.

목적

텍스트와 배경 사이에 충분한 대비를 제공하여 중간 정도의 시력을 가진 사람들이 읽을 수 있도록 제공하기 위한 항목입니다.

관련 장애

• 일부 저시력 사용자는 배경색과 낮은 대비를 이루는 텍스트를 인식하는데 어려움이 있습니다.

설명

저시력 사용자 혹은 노안이 있는 사용자들은 배경과 낮은 대비를 이루는 텍스트를 읽는데 어려움을 겪습니다. 색상 대비에 대한 색각 이상이 있는 경우라면 더욱 어렵게 됩니다.

다음 이미지처럼 정상 시력 사용자는 낮은 대비를 이루는 콘텐츠를 어느 정도 어렵지 않게 인식할 수 있으나, 낮은 대비 시력을 가진 사용자는 인식이 어려운 정도로 콘텐츠를 마주하게 됩니다.

[ 정상 시력 ]

[ 낮은 대비 시력 ]

이 문제를 해결하기 위해 다음과 같은 최소한의 대비가 요구됩니다.

• 텍스트가 굵지 않고 크기가 24px 미만이거나, 텍스트 굵고 크기가 18px 미만인 경우
  • 텍스트와 텍스트 뒤의 배경 사이에 4.5:1 이상의 명암비 제공
  • 또는 고대비로 전환할 수 있는 옵션 제공
• 텍스트가 굵지 않고 크기가 24px 이상이거나, 텍스트가 굵고 크기가 18px 이상인 경우
  • 텍스트와 텍스트 뒤의 배경 사이에 3:1 이상의 명암비 제공
  • 또는 고대비로 전환하는 스타일 전환기 제공

<aside> 🔑 최소한의 대비 요구사항은 “최소”를 의미하여 그 이상의 대비를 사용해야 함을 의미합니다. 즉, 4.5 : 1 의 요구사항을 준수해야 한다면, 최저점으로 설정 할 수 있는 대비가 4.5 : 1이고 4.5 : 1 미만으로 떨어뜨리지 않아야 함을 의미합니다.

</aside>

✅ 업무 진행 시 필수

Untitled

🙏 Do vs Don’t