웹사이트 가독성 개선

소피아 에멜리아노바

GitHub

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

저대비 텍스트 수정

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

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

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

   

   도움말의 대비율 값 옆에는 경고 기호가 있습니다. 명암비는 전경 (텍스트 색상)과 배경 색상 간의 밝기 차이를 측정합니다.

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

   

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

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

   

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

   

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

변경사항 저장

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

• 모든 CSS 변경사항을 한 번에 복사하여 코드에 붙여넣습니다.
• DevTools에서 소스에 파일을 직접 저장할 수 있도록 작업공간을 설정해 보세요.

다음 단계

자세히 알아보기:

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