웹사이트 가독성 개선

Sofia Emelianova
Sofia Emelianova
GitHub

저대비 텍스트는 시각 장애가 있는 사용자뿐만 아니라 모든 사용자가 웹사이트를 읽기 어렵게 만듭니다. DevTools는 저대비 문제를 자동으로 찾아내고 문제를 해결하는 데 도움이 되는 더 나은 색상을 제안할 수 있습니다.

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

  • 대비 문제 찾기. CSS 개요 패널, (미리보기) 문제 탭 또는 Lighthouse 보고서를 사용하여 모든 문제 목록을 가져옵니다.
  • 대비 문제 수정. 검사기 모드에서 툴팁으로 문제를 확인하고 색상 선택 도구 에서 제안하는 색상을 선택하여 대비율을 수정합니다.
  • 시각 장애 에뮬레이션. 사용자가 사이트를 보는 방식으로 사이트를 확인합니다.

저대비 텍스트 찾기

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

  1. DevTools를 페이지에서 엽니다.

  2. 다음 세 가지 패널 중 하나를 사용하여 모든 대비 문제를 나열합니다.

CodePen을 열어 실험해 볼 수 있습니다.

CSS 개요 패널의 대비 문제

개요를 보려면 다음 단계를 따르세요.

  1. CSS 개요를 엽니다.
  2. 개요를 캡처합니다.
  3. 색상 섹션을 열고 대비 문제로 이동한 후 문제가 있으면 문제를 클릭합니다.

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

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

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

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

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

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

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

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

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

Lighthouse 보고서의 대비 문제

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

  1. DevTools에서 탭 더보기 > Lighthouse를 엽니다.

  2. 다음 설정으로 Lighthouse 보고서를 생성합니다.

    • 모드: 탐색 (기본값)
    • 카테고리: 접근성
    • 기기: 데스크톱

    탐색, 접근성, 데스크톱 설정이 포함된 Lighthouse 보고서

  3. 페이지 로드 분석 을 클릭하고 Lighthouse에서 보고서를 생성할 때까지 기다립니다.

  4. 대비 섹션으로 이동합니다. 요소 목록에서 영향을 받는 요소의 링크를 클릭합니다.

    대비 문제가 있는 요소 목록이 포함된 Lighthouse 보고서의 대비 섹션

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

저대비 텍스트 수정

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

  1. 대비 문제를 찾고 영향을 받는 요소의 링크를 CSS 개요 패널, 문제 탭 또는 Lighthouse 보고서에서 클릭합니다. DevTools가 요소 패널로 이동하고 해당 요소를 선택합니다.

    대비 문제가 있는 요소가 요소 패널에서 선택되었습니다.

    예를 들어 액세스할 수 없는 데모 CodePen에서 영향을 받는 첫 번째 요소는 h1.line1입니다.

  2. DevTools의 오른쪽 상단에 있는 검사를 클릭하고 뷰포트의 요소 위로 마우스를 가져갑니다. DevTools에 이 요소의 툴팁이 표시됩니다.

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

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

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

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

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

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

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

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

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

  6. 마찬가지로 CSS 개요 패널, 문제 탭, 또는 Lighthouse 보고서에서 찾은 모든 대비 문제를 수정합니다.

변경사항 저장

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

다음 단계

자세히 알아보기: