웹사이트 가독성 개선

Sofia Emelianova
Sofia Emelianova
GitHub

저대비 텍스트를 사용하면 모든 사용자가 웹사이트를 쉽게 읽을 수 없으며, 시각 장애가 있는 사용자의 경우 더욱 가독성이 떨어집니다. DevTools는 저대비 문제를 자동으로 찾아 문제 해결에 도움이 되는 더 나은 색상을 추천합니다.

DevTools를 사용하여 다음 작업을 할 수 있습니다.

저대비 텍스트 살펴보기

저대비 텍스트를 찾으려면 다음 단계를 따르세요.

  1. 페이지에서 DevTools를 엽니다. 이 튜토리얼에서는 이 데모 페이지를 사용할 수 있습니다.

  2. 다음 세 가지 패널 중 하나를 사용하여 모든 대비 문제 목록을 확인하세요.

CSS 개요 패널의 대비 문제

개요를 보는 방법은 다음과 같습니다.

  1. CSS 개요를 엽니다.
  2. 개요 캡처.
  3. 색상 섹션을 열고 대비 문제로 스크롤한 후 문제가 있는 경우 클릭합니다.

  4. 대비 문제 표에서 요소 위로 마우스를 가져간 다음 옆에 있는 링크를 클릭합니다.

    CSS 개요의 대비 문제 목록입니다.

  5. 저대비 텍스트 수정 섹션에 설명된 대로 문제를 해결합니다.

(미리보기) '문제' 탭의 대비 문제

문제 목록을 보려면 다음 단계를 따르세요.

  1. 문제 탭에서 대비 문제 보고를 사용 설정합니다.
    1. 설정 > 실험용을 엽니다.
    2. 필터 표시줄에서 contrast issue를 검색합니다.
    3. 문제 패널을 통해 자동 대비 문제 보고 사용 설정을 선택합니다. 대비 문제 보고를 사용 설정합니다.
    4. 상단의 프롬프트에서 Reload DevTools를 클릭합니다.
  2. 문제 탭을 엽니다.

  3. DevTools가 찾은 대비 문제를 펼친 다음 요소 표를 펼치고 요소 옆에 있는 링크를 클릭합니다.

    문제 탭에 대비 문제가 있는 요소 표

  4. 저대비 텍스트 수정 섹션에 설명된 대로 문제를 해결합니다.

Lighthouse 보고서의 대비 문제

보고서를 실행하려면 다음 안내를 따르세요.

  1. DevTools에서 탭 더보기 탭 더보기 > Lighthouse를 엽니다.
  2. 다음 설정으로 Lighthouse 보고서를 생성합니다.
    • 모드: 탐색 (기본값)
    • 카테고리: 접근성
    • 기기: 데스크톱 탐색, 접근성, 데스크톱 설정이 포함된 Lighthouse 보고서
  3. 페이지 로드 분석을 클릭하고 Lighthouse에서 보고서를 생성할 때까지 기다립니다.
  4. 대비 섹션까지 아래로 스크롤하고 요소 목록에서 영향을 받는 요소의 링크를 클릭합니다. 대비 문제가 있는 요소 목록이 나와 있는 Lighthouse 보고서의 대비 섹션
  5. 저대비 텍스트 수정 섹션에 설명된 대로 문제를 해결합니다.

저대비 텍스트 수정

저대비 문제를 해결하려면 다음 단계를 따르세요.

  1. 대비 문제를 찾고 CSS 개요 패널, 문제 탭 또는 Lighthouse 보고서에서 영향을 받은 요소의 링크를 클릭합니다. DevTools가 Elements 패널로 이동하여 해당하는 요소를 선택합니다. '요소' 패널에서 선택한 대비 문제가 있는 요소 예를 들어 이 데모 페이지에서 첫 번째로 영향을 받는 요소는 h1.line1입니다.

  2. DevTools의 오른쪽 상단에서 검사. Inspect를 클릭하고 표시 영역의 요소 위로 마우스를 가져갑니다. DevTools에 이 요소에 관한 도움말이 표시됩니다.

    도움말에 대비 값 옆에 경고 기호가 표시됩니다.

    도움말의 대비율 값 옆에 있는 경고. 경고 기호를 확인하세요. 대비율은 전경 (텍스트 색상)과 배경 색상 간의 밝기 차이를 측정합니다.

  3. 요소 텍스트의 색상 선언 옆에 있는 색상 선택 도구를 열고 색상 선택 도구에서 대비율 섹션을 펼칩니다.

    색상 선택 도구의 대비율 섹션

    색상 선택 도구에서 명암비가 WebAIM 가이드라인의 AA 또는 AAA 수준을 충족하지 않음을 알려줍니다.

  4. AAA 등급 옆에 있는 추천 색상 사용 추천 색상 사용 버튼을 클릭합니다. 색상 선택 도구는 대비율 가이드라인을 준수하는 텍스트 색상을 적용합니다.

    적용된 색상이 가이드라인을 준수합니다.

  5. 또는 색상을 수동으로 선택하려면 음영 미리보기에서 원을 드래그하면 됩니다. AA 또는 AAA 수준을 넘지 않으려면 각각 상단 또는 하단 선 아래의 색상을 선택합니다.

    AAA 수준을 유지하기 위해 하단 선 아래에서 색상 음영을 선택합니다.

  6. 마찬가지로 CSS 개요 패널, 문제 탭 또는 Lighthouse 보고서에서 발견된 모든 대비 문제를 해결합니다.

변경사항을 저장합니다.

DevTools에서 변경한 내용을 저장하려면 다음 단계를 따르세요.

다음 단계

자세히 알아보기: