Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse 색상 대비 감사에 실패하는 방식
  • 리소스

배경색과 전경색의 명암비가 충분하지 않습니다.

May 2, 2019 — 업데이트됨 Sep 19, 2019
Available in: Español, 日本語, Português, Русский, 中文, English
Appears in: 접근성 감사
이 페이지에서
  • Lighthouse 색상 대비 감사에 실패하는 방식
  • 리소스

명암비가 낮은 텍스트, 즉 밝기가 배경 밝기에 너무 가까운 텍스트는 읽기 어려울 수 있습니다. 예를 들어, 흰색 배경에 밝은 회색 텍스트를 표시하면 사용자가 문자의 모양을 구별하기 어렵게 되어 가독성이 떨어지고 읽는 속도가 느려질 수 있습니다.

이 문제는 시력이 약한 사람들에게 특히 어려운 문제이지만 대비가 낮은 텍스트는 모든 사용자의 읽기 환경에 부정적인 영향을 줄 수 있습니다. 예를 들어 야외에서 모바일 장치로 무언가를 읽은 적이 있다면 충분한 대비를 가진 텍스트가 필요하다는 것을 경험했을 것입니다.

Lighthouse 색상 대비 감사에 실패하는 방식 #

Lighthouse는 배경색과 전경색의 명암비가 충분히 높지 않은 텍스트에 플래그를 지정합니다.

배경색과 전경색의 명암비가 충분하지 않은 것을 보여주는 Lighthouse 감사

텍스트의 색상 대비를 평가하기 위해 Lighthouse는 WCAG 2.1의 성공 기준 1.4.3을 사용합니다.

  • 18pt 또는 14pt이고 굵게 표시된 텍스트는 3:1의 명암비가 필요합니다.
  • 다른 모든 텍스트에는 4.5:1의 명암비가 필요합니다.

감사의 특성상 Lighthouse는 이미지에 겹쳐진 텍스트의 색상 대비를 확인할 수 없습니다.

주의

버전 2.1에서 WCAG는 사용자 인터페이스 요소와 이미지를 포함하도록 색상 대비 요구 사항을 확장했습니다. Lighthouse는 이러한 요소를 확인하지 않지만 시력이 약한 사람들도 전체 사이트에 액세스할 수 있도록 직접 확인해야 합니다.
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

텍스트의 색상 대비가 충분한지 확인하는 방법 #

페이지의 모든 텍스트가 WCAG에서 지정한 최소 색상 명암비를 충족하는지 확인하세요.

  • 18pt 또는 14pt이고 굵게 표시된 텍스트의 경우 3:1
  • 기타 모든 텍스트의 경우 4.5:1

대비 요구 사항을 충족하는 색상을 찾는 한 가지 방법은 Chrome DevTools의 색상 선택기를 사용하는 것입니다.

  1. 확인하려는 요소를 마우스 오른쪽 버튼으로 클릭(또는 Mac에서 Command-클릭)하고 **Inspect(검사)**를 선택합니다.
  2. Elements(요소) 창의 Styles(스타일) 탭에서 요소의 color 값을 찾습니다.
  3. 값 옆에 있는 색상 축소판을 클릭합니다.

색상 선택기는 글꼴 크기와 두께를 고려하여 요소가 색상 대비 요구 사항을 충족하는지 여부를 알려줍니다.

색상 대비 정보가 강조 표시된 Chrome DevTools 색상 선택기를 보여주는 스크린샷

색상 선택기를 사용하여 대비가 충분히 높을 때까지 색상을 조정할 수 있습니다. HSL 색상 형식을 조정하는 것이 가장 쉽습니다. 선택기 오른쪽에 있는 토글 버튼을 클릭하여 해당 형식으로 전환합니다.

색상 형식 토글이 강조 표시된 Chrome DevTools 색상 선택기를 보여주는 스크린샷

기준을 통과하는 색상 값을 얻었으면 프로젝트의 CSS를 업데이트하세요.

그라디언트의 텍스트 또는 이미지의 텍스트와 같은 더 복잡한 경우는 UI 요소 및 이미지와 마찬가지로 수동으로 확인해야 합니다. 이미지에 있는 텍스트의 경우, DevTools의 배경색 선택기를 사용하여 텍스트가 나타나는 배경을 확인할 수 있습니다.

Chrome DevTools 배경색 선택기를 보여주는 스크린샷

다른 경우에는 Paciello Group의 Color Contrast Analyzer와 같은 도구의 사용을 고려하세요.

리소스 #

  • 배경색과 전경색의 명암비가 충분하지 않음에 대한 소스 코드
  • 텍스트 요소는 배경과 충분한 색상 대비를 가져야 합니다(Deque University).
  • Colour Contrast Analyser
마지막 업데이트: Sep 19, 2019 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.