디자인의 접근성 좋은 색상 대비를 테스트하고 확인하는 세 가지 도구와 기법에 관한 개요입니다.
다음과 같이 밝은 배경에 텍스트가 있다고 가정해 보겠습니다.
모든 예시를 읽을 수 있더라도 모든 사람이 그런 것은 아닙니다.
접근성 높은 색상 대비는 모든 사용자가 텍스트를 읽을 수 있도록 하는 관행입니다. 대비 테스트는 쉬울 때도 있고 정말 어려울 때도 있습니다. 이 게시물을 끝까지 읽으면 웹 디자인 대비를 검사, 수정, 확인하는 세 가지 새로운 도구와 기법을 익혀 가장 어려운 시나리오를 해결할 수 있습니다.
WCAG 및 색상 대비
W3C의 웹 접근성 이니셔티브는 가능한 한 많은 사용자가 인터넷에 액세스할 수 있도록 전략, 표준, 리소스를 제공합니다. 이러한 표준의 기반이 되는 가이드라인을 웹 콘텐츠 접근성 가이드라인(WCAG)이라고 합니다. 최신 안정화 버전인 WCAG 2.1에는 중요한 접근성 요구사항인 최소 대비가 포함되어 있습니다.
WCAG 2.1에서 두 색상 간의 관계는 명암비, 즉 두 색상의 휘도를 비교할 때 얻는 숫자로 설명됩니다. 휘도는 색상이 검은색(0%) 또는 흰색(100%)에 얼마나 가까운지를 설명하는 방법입니다. WCAG는 웹에 액세스할 수 있도록 하기 위해 명암비가 충족해야 하는 몇 가지 규칙과 계산 알고리즘을 정의합니다. 하지만 이 계산에는 알려진 문제가 있습니다. 결국에는 훨씬 더 안정적인 방법이 채택되겠지만, 현재로서는 WCAG가 최선의 방법입니다.
규칙은 무엇인가요?
대비율이 높을수록 3 대신 4.5 또는 7과 같이 더 높은 숫자로 점수가 매겨집니다. 점수 표에 관해 자세히 알아보려면 Polypane의 대비 검사기를 참고하세요.
색상 간 대비 테스트
이제 무엇을 찾아야 하는지 알았으니 어떻게 테스트해야 할까요? 다음은 웹사이트의 대비를 검사, 수정, 측정하는 데 도움이 되는 세 가지 무료 도구입니다. 각 방법의 장단점을 설명하므로 다양한 방법으로 사이트의 색상과 콘텐츠의 접근성을 자신 있게 테스트할 수 있습니다.
- Pika
전체 화면의 모든 색상 대비, 그라데이션 색상, 투명도가 있는 색상 등을 고유하게 표시할 수 있는 MacOS 앱입니다. 의도가 명시적이며 사용자가 비교할 Pixel을 직접 선택합니다. 자동화는 약간 줄어들지만 엄청난 기능 이점이 있습니다. - VisBug
한 번에 두 개 이상의 대비 오버레이를 표시할 수 있는 유일한 크로스 브라우저 확장 프로그램이지만 DevTools와 마찬가지로 의도를 감지하지 못하는 경우가 있습니다. - Chrome DevTools
DevTools는 Chrome에 내장되어 있으며 색상 문제를 검사, 수정, 디버그하는 다양한 방법이 포함되어 있지만 그라데이션과 반투명 색상을 검사할 때 단점이 있으며 의도를 감지하지 못하는 경우도 있습니다.
Pika(macOS 애플리케이션)
브라우저 외부에서 색상을 테스트해야 하거나 투명도 또는 그라데이션이 포함된 경우와 같이 DevTools 또는 VisBug가 대비를 제대로 평가할 수 없는 경우 Pika를 사용하면 됩니다. Pika는 웹 도구가 아닌 시스템 도구이므로 화면의 모든 픽셀에 액세스할 수 있습니다.
이는 Pika를 사용하는 UX가 DevTools 또는 VisBug와 다르다는 의미이기도 합니다. DevTools와 VisBug는 브라우저 DOM의 텍스트 및 배경 색상을 표시하기 위해 최선을 다하는 반면, Pika가 비교하는 색상은 화면의 어느 지점에서나 수동으로 선택됩니다. 이를 통해 Pika는 더 많은 제어 기능을 확보하고 몇 가지 추가 사용 사례를 열 수 있습니다.
- 브라우저에 있는지 여부와 관계없이 두 색상을 비교합니다. 화면에 표시되면 테스트할 수 있습니다.
- 투명도가 있는 색상을 비교합니다.
- 그라데이션 내 색상 비교
- CSS의 mix-blend-mode와 같이 혼합 모드를 사용하는 색상을 비교합니다.
두 색상 비교
텍스트를 배경 색상과 비교합니다.
벡터 그래픽의 획 색상과 채우기 색상을 비교합니다.
투명도가 있는 색상 비교
텍스트 색상을 다양한 배경 샘플 픽셀과 비교합니다. 여기서는 반투명 유리 효과의 가장 밝은 회색이 배경 비교 색상으로 사용됩니다.
그라데이션이 있는 색상 비교
그라데이션 또는 이미지의 텍스트를 비교합니다. 여기서 'Lasso'의 L은 이미지의 연한 파란색과 비교됩니다.
VisBug
VisBug는 FireBug에서 영감을 받은 도구로, 디자이너와 개발자가 웹사이트 디자인을 시각적으로 검사, 디버그, 실험할 수 있도록 지원합니다. 사람들이 잘 알고 즐겨 사용하는 디자인 도구의 UI와 UX를 에뮬레이션하여 Chrome DevTools보다 진입 장벽을 낮추기 위한 것입니다.
VisBug 사용해 보기 또는 Chrome, Firefox, Edge, Brave, Safari에 설치하기
제공되는 도구 중 하나는 접근성 검사 도구입니다.
여러 브라우저(모바일 포함)에서 검사
접근성 검사 도구를 클릭하면 사용자가 가리키거나 키보드로 탐색하는 모든 항목의 접근성 정보가 도움말에 보고됩니다. 이 도움말에는 발견된 전경색과 배경색 간의 색상 비교가 포함되어 있습니다.
하나 또는 여러 개 검사
DevTools는 단일 색상 페어링을 보거나 페이지의 모든 색상 페어링에 관한 보고서를 가져올 수 있지만 VisBug는 여러 색상 페어링을 허용하여 적절한 중간 지점을 제공합니다. 요소를 클릭하면 도움말이 그대로 유지됩니다. Shift 키를 누른 상태에서 다른 요소를 계속 클릭하면 모든 도움말이 그대로 유지됩니다.
이는 구성요소의 여러 부분이 대비율 점수를 통과해야 하는 구성요소 기반 디자인에서 특히 중요합니다. 이 방법을 사용하면 이러한 모든 구성요소를 한 번에 볼 수 있습니다. 디자인 검토에도 유용합니다.
Chrome DevTools
Chrome이 설치되어 있다면 이미 많은 대비 테스트 도구가 갖춰져 있는 것입니다.
Chrome DevTools 색상 선택 도구
Chrome DevTools의 Elements 패널에 있는 Styles 창에서 색상 값 옆에는 작은 정사각형 색상 견본이 표시됩니다. 이 견본을 클릭하면 색상 선택 도구가 표시됩니다 가능한 경우 도구 중간에 전경 또는 배경에 대한 색상 대비가 표시됩니다.
다음 예시에서는 맞춤 속성 색상 값에 대해 색상 선택 도구가 열립니다. 대비율 점수는 15.79로 보고되며 녹색 체크표시가 두 개 있습니다. 이는 점수가 AA 및 AAA WCAG 2.1 요구사항을 통과함을 나타냅니다.
색상 선택 도구 자동 수정
색상을 선택하는 동안 점수를 확인하는 것은 편리하지만 Chrome DevTools에는 자동 수정을 위한 추가 기능이 있습니다. 색상 선택 도구에서 접근성 있는 색상 대비 점수가 실패로 보고되면 AA 및 AAA 점수 타겟과 스포이트 도구를 표시하도록 확장할 수 있습니다. AA 및 AAA 옆에는 견본과 새로고침 아이콘이 있으며, 이를 클릭하면 가장 가까운 통과 색상을 찾을 수 있습니다.
색상에 까다롭지 않다면 자동 보정 기능을 사용하면 접근성 가이드라인을 충족하고 작업을 완료하는 데 너무 많은 노력을 기울이지 않아도 됩니다.
검사 도움말
요소 선택 도구에는 페이지 위로 마우스를 가져가면 일반 글꼴, 색상, 접근성 정보를 보고하는 특수 기능이 있습니다. 요소 선택 도구는 다음 스크린샷의 왼쪽에 있는 아이콘입니다. 오른쪽 하단에 화살표 커서가 있는 상자입니다. 단축키 Control+Shift+C(또는 MacOS의 경우 Command+Shift+C)를 사용하여 선택할 수도 있습니다.
활성화되면 아이콘이 파란색으로 바뀌고 페이지의 항목을 가리키면 다음과 같은 빠른 검사 도움말이 표시됩니다.
이 도구를 사용하면 스타일 창에서 색상 견본을 찾아야 하는 색상 선택 도구 대신 페이지를 가리키기만 하면 대비 점수를 확인할 수 있습니다. 색상 선택 도구와 마찬가지로 한 번에 하나의 대비 점수만 표시할 수 있습니다.
Bump bump 'til you pass 🎶
저는 이 빠른 검사 도구로 색상 조합을 검사할 때 필요한 비율을 충족하지 못하는 경우가 많습니다. 색상 선택 도구의 자동 수정 기능을 사용하는 대신(제가 좀 까다롭거든요) CSS에서 색상 채널을 조금씩 조정하면서 필요한 비율을 통과할 때까지 지켜봅니다. 저는 이 과정을 '통과할 때까지 범프 범프'라고 부릅니다. WCAG 2.1을 통과할 때까지 색상 채널 숫자를 범프하기 때문입니다.
단계는 다음과 같으며 정확한 순서대로 진행해야 합니다.
- 스타일 패널의 색상 내에 키보드 포커스를 설정합니다.
- 키보드 단축키
Control+Shift+C(또는 MacOS의 경우Command+Shift+C)를 사용하여 요소 검사 도구를 활성화합니다. - 타겟 위로 마우스 커서를 가져갑니다.
- 키보드에서 위/아래를 눌러 색상 값의 숫자를 변경합니다.
이 방법은 CSS 스타일 값에 여전히 키보드 포커스가 있는 상태에서 마우스로 타겟을 가리킬 수 있기 때문에 작동합니다. 타겟을 클릭하지 않도록 주의하세요. 그렇지 않으면 포커스가 색상 값 영역에서 이동하여 다시 포커스를 맞출 때까지 값을 미세 조정할 수 없습니다.
CSS 개요
지금까지 Chrome DevTools는 한 번에 하나의 색상 조합을 확인하는 방법을 제공했지만 CSS 개요는 전체 페이지를 크롤링하고 액세스할 수 없는 모든 조합을 한 번에 표시할 수 있습니다.
이 기능에 관한 자세한 내용은 CSS 개요: 잠재적인 CSS 개선사항 식별 게시물을 참고하거나 YouTube에서 Jecelyn Yeen의 DevTools 도움말 시리즈를 시청하여 CSS 개요 패널을 사용하여 잠재적인 CSS 개선사항을 식별하는 방법을 알아보세요.
등대
Lighthouse는 Chrome DevTools의 또 다른 감사 도구입니다. 페이지를 크롤링하고 액세스할 수 없는 색상 조합을 보고할 수 있습니다. 여기에는 검토, 통과, 실패를 위한 각 색상 조합의 작은 스크린샷이 있습니다. 실패한 조합은 Lighthouse 점수에 부정적인 영향을 미칩니다.
결과는 다음과 같습니다.
JS 콘솔
지금까지 나열된 모든 도구가 현재 위치에 없을 수도 있습니다. JavaScript를 사용하는 경우도 있습니다. 다음 실험을 시도해 보세요. 콘솔의 Issues 창은 빌드하는 동안 색상 대비 접근성 문제를 지속적으로 보고할 수 있습니다. 다음과 같이 설정 > 실험에서 기능을 사용 설정합니다.
그런 다음 문제 창을 열고 발견된 사항이 있는지 확인합니다. 이 경우 다음과 같이 표시될 수 있습니다.
색맹 에뮬레이션
색상 대비와 접근성 높은 색상 조합을 보장하는 주제에 관해 이야기하는 동안 시각 결함 에뮬레이션 도구를 지적할 가치가 있습니다. 이렇게 하면 디자인의 색상이나 모양이 변경되어 다양한 색맹의 결과를 보여주므로, 색상이 UX가 사용자에게 전달하는 유일한 방법이 아니도록 디자인을 수정할 수 있습니다.
정보를 나타내는 데 색상만 사용하는 것은 안전한 접근성 관행이 아닙니다(예: 빨간색은 나쁨, 녹색은 좋음). 일부 사람들은 녹색이나 빨간색을 동일하게 보지 않으며 이 에뮬레이션 도구는 이를 경험하고 기억하는 데 도움이 됩니다.
색상 대비 시스템 환경설정 에뮬레이션
점점 더 많은 사용자가 운영체제에서 대비 설정을 변경하여 UI에서 대비 맞춤설정을 더 적게 또는 더 많이 요청할 수 있습니다. CSS는 밝은 테마 또는 어두운 테마 환경설정과 마찬가지로 이 설정을 활용할 수 있습니다. Chrome DevTools는 이 환경설정을 에뮬레이션하는 기능을 제공하므로 시스템에서 설정을 전환하지 않고도 사용자 요청을 테스트하고 이에 맞게 디자인을 조정할 수 있습니다.
WCAG 3.0 APCA 사용해 보기
실험용 APCA 색상 비율 점수 시스템으로 색상 조합을 테스트하는 실험도 시도해 볼 수 있습니다. 설정 > 실험을 통해 사용 설정하면 WCAG 2.1 비율 시스템이 더 새롭고 개선된 대비 검사기 알고리즘으로 대체되어 제안이 표준으로 작동할 때 결과를 미리 볼 수 있습니다.
사용 설정한 후 포인트 검사 도움말 또는 색상 선택 도구를 사용하여 색상 페어링 점수를 확인하고 통과하는지 확인합니다.
결론
색상 대비는 웹 접근성에서 중요한 부분이며, 이를 준수하면 가장 다양한 상황에서 가장 많은 사람이 웹을 더 유용하게 사용할 수 있습니다. 이 세 가지 도구가 훌륭한 색상 선택을 하는 데 도움이 되기를 바랍니다.