웹사이트 가독성 개선

Sofia Emelianova

핵심사항: 저대비 텍스트는 웹에서 가장 많이 발생하는 접근성 문제입니다. 2022년 2월 기준 상위 100만 개 홈페이지 중 83.9% 에 이 문제가 발생했습니다. 자세한 내용은 WebAIM Million 2022 보고서를 확인하세요.

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

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

• 대비 문제를 발견합니다. CSS 개요 패널, (미리보기) 문제 탭 또는 Lighthouse 보고서를 사용하여 모든 문제 목록을 확인하세요.
• 대비 문제를 해결합니다. 검사기 모드에서 도움말 관련 문제를 확인하고 색상 선택 도구에서 대비율 수정을 위해 제안하는 색상을 선택합니다.
• 시각 결함을 에뮬레이션합니다. 사용자가 사이트를 보는 방식으로 사이트를 파악하세요.

저대비 텍스트 살펴보기

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

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

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

   • CSS 개요
   • (미리보기) 문제
   • 등대

CSS 개요 패널의 대비 문제

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

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

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

   

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

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

참고: 이 기능은 기본적으로 사용 중지되어 있는 미리보기 기능입니다.

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

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

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

   

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

Lighthouse 보고서의 대비 문제

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

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

저대비 텍스트 수정

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

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

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

   

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

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

   

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

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

   

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

   

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

변경사항을 저장합니다.

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

• 모든 CSS 변경사항을 한 번에 복사하고 코드에 붙여넣습니다.
• DevTools가 파일을 소스에 직접 저장할 수 있도록 작업공간을 설정하는 것이 좋습니다.

다음 단계

자세히 알아보기:

• 일반적인 접근성 알아보기
• 특히 색상 및 대비 접근성