Testing Web Design Color Contrast

다음과 같이 밝은 배경에 텍스트가 있다고 가정해 보겠습니다. '빠른 갈색 여우가 게으른 개를 다시 뛰어 넘다'라는 문구가 표시되며, 각 단어 또는 두 단어는 밝은 파란색입니다. 점차적으로 흐려지는 단어의 각 섹션 위에는 명암비 점수가 있습니다. 마지막 몇 단어는 대비가 낮아 읽기가 매우 어렵습니다. 모든 예제를 읽을 수 있지만 모든 사람에게 해당되는 것은 아닙니다. 접근 가능한 색상 대비는 모든 사람이 텍스트를 읽을 수 있도록 하는 방법입니다. 대비 테스트는 때로는 쉽고 때로는 정말 어렵습니다. 이 게시물이 끝나면 웹 디자인 대비를 검사, 수정 및 확인하기 위한 세 가지 새로운 도구와 기술을 갖게 되어 가장 어려운 시나리오를 해결할 수 있습니다. WCAG 및 색상 대비 # W3C의 Web Accessibility Initiative 는 가능한 많은 사람들이 인터넷에 액세스할 수 있도록 하는 전략, 표준 및 리소스를 제공합니다. 이러한 표준을 뒷받침하는 지침을 웹 콘텐츠 접근성 지침(WCAG)이라고 합니다. 최신 안정 버전인 WCAG 2.1 은 최소 대비 라는 중요한 접근성 요구 사항을 다룹니다 . WCAG 2.1에서 두 색상 간의 관계는 명암비, 즉 두 색상의 휘도를 비교할 때 얻는 숫자로 설명됩니다. 휘도는 색상이 검정색(0%) 또는 흰색(100%)에 얼마나 가까운지를 설명하는 방법입니다. WCAG는 웹에 액세스할 수 있으려면 명암비가 어느 정도여야 하는지에 대한 몇 가지 규칙과 계산 알고리즘을 정의합니다. 그러나 이 계산 에는 알려진 문제 가 있습니다. 결국에는 훨씬 더 안정적인 방법이 채택될 것이지만 현재로서는 WCAG가 최선입니다. 규칙은 무엇입니까? # AA AAA 본문(< 24px) 4.5 7 큰 텍스트(> 24px) 3 4.5 UI(아이콘, 그래프 등) 3 정의되지 않음 더 높은 명암비는 3 대신 4.5 또는 7과 같이 더 높은 숫자로 채점됩니다. 채점 테이블에 더 익숙해 지려면 Polypane의 Contrast Checker 를 확인하십시오 . 텍스트는 보라색 위에 표시됩니다. 한 쌍은 보라색 위에 검은색 텍스트이고 다른 하나는 보라색 위에 흰색 텍스트입니다. 다음 중 어떤 색상 조합이 더 대조적으로 느껴지나요? 색상 간의 대비 테스트 # 자, 이제 우리가 무엇을 찾고 있는지 알았으니 이것을 어떻게 테스트할까요? 다음은 웹 사이트의 대비를 검사, 수정 및 측정하는 데 도움이 되는 세 가지 무료 도구입니다. 다양한 방법으로 사이트 색상 및 콘텐츠의 접근성을 자신 있게 테스트할 수 있도록 각각의 장단점이 설명됩니다. Pika 전체 화면의 색상 대비, 그라디언트의 색상, 투명도가 있는 색상 등을 표시할 수 있는 MacOS 앱입니다. 의도는 명시적이며 사용자는 비교할 픽셀을 수동으로 선택합니다. 엄청난 기능 이득으로 자동화가 조금 덜 되었습니다. VisBug 한 번에 둘 이상의 대비 오버레이를 고유하게 표시할 수 있지만 DevTools와 마찬가지로 때때로 의도를 감지할 수 없는 크로스 브라우저 확장입니다. Chrome DevTools DevTools는 Chrome에 내장되어 있으며 색상 문제를 검사, 수정 및 디버그하는 다양한 방법이 포함되어 있지만 그라디언트 및 반투명 색상을 검사할 때 단점이 있고 때로는 의도를 감지하지 못하는 경우가 있습니다. 피카(macOS 애플리케이션) # 브라우저 외부에서 색상을 테스트해야 하거나 투명도 또는 그라디언트가 관련된 경우와 같이 DevTools 또는 VisBug가 대비를 적절하게 평가할 수 없는 경우 Pika가 도움이 됩니다 . Pika는 웹 도구가 아닌 시스템 도구이기 때문에 화면의 모든 픽셀에 액세스할 수 있습니다. 피카 다운로드 Pika는 macOS 전용입니다. PC의 경우 PowerToys 에는 색상 선택기가 포함되어 있습니다. 이것은 또한 Pika를 사용하기 위한 UX가 DevTools 또는 VisBug와 다르다는 것을 의미합니다. DevTools와 VisBug는 브라우저 DOM에서 텍스트와 배경색을 표시하기 위해 최선을 다하는 반면 Pika가 비교하는 색상은 화면의 어느 지점에서나 수동으로 선택됩니다. 이렇게 하면 Pika에 더 많은 제어 권한이 부여되고 몇 가지 추가 사용 사례가 열립니다. 브라우저에 있는지 여부에 관계없이 두 색상을 비교합니다. 화면에서 볼 수 있다면 테스트할 수 있습니다. 투명도와 색상 비교. 그라디언트 내 색상 비교. CSS의 혼합 혼합 모드와 같은 혼합 모드를 사용하는 색상 비교. 두 색상 비교 # 텍스트를 배경색과 비교: 두 개의 회색이 나란히 비교되고 13.01의 명암비를 가지며 AA 및 AAA 목표를 통과합니다. 벡터 그래픽의 획 및 채우기 색상 비교: 두 개의 보라색은 이중 톤 아이콘에서 비교되며 1.63의 명암비를 가지며 WCAG 대상을 통과하지 않습니다. 투명도와 색상 비교 # 텍스트 색상을 다양한 배경 샘플 픽셀과 비교합니다. 여기에서는 젖빛 유리 효과 에서 가장 밝은 회색 이 배경 비교 색상으로 사용됩니다. 회색처럼 보이지만 실제로는 채도가 매우 낮은 보라색인 두 가지 색상은 흐릿한 반투명 캡션이 있는 이미지에서 비교되며 명암비가 4.65이고 AA 타겟을 통과합니다. 그라디언트와 색상 비교 # 그라디언트 또는 이미지의 텍스트를 비교합니다. 여기에서 "올가미"의 L을 이미지의 밝은 파란색과 비교합니다. TV 프로그램의 스크린샷에는 프로그램 제목이 맨 위에 있고 L은 흰색이고 그 뒤에 있는 파란색은 비교됩니다. 명암비가 8이고 AA 및 AAA 목표를 통과합니다. 비스버그 # VisBug는 디자이너와 개발자가 웹사이트 디자인을 시각적으로 검사, 디버그 및 재생할 수 있는 FireBug 에서 영감을 받은 도구입니다. 사람들이 알고 사용하기 좋아하는 디자인 도구의 UI와 UX를 에뮬레이션하여 Chrome DevTools보다 진입 장벽이 낮습니다. VisBug를 시도 하거나 Chrome , Firefox , Edge , Brave 또는 Safari 에 설치하십시오 . 도구 제공 중 하나는 접근성 검사 도구입니다. 빈 페이지 왼쪽에 있는 VisBug 도구 모음의 스크린샷, 접근성 도구 아이콘은 분홍색이며 도구에 대한 지침을 제공하는 팝오버가 표시됩니다. 여러 브라우저에서 검사(모바일에서도 가능) # 접근성 검사 도구를 클릭하면 사용자가 가리키거나 키보드가 탐색하는 모든 항목에 대한 접근성 정보가 도구 설명에 보고됩니다. 이 도구 설명에는 발견된 전경색과 배경색 간의 색상 비교가 포함되어 있습니다. 제목과 아이콘이 있는 구성 요소는 주위에 분홍색 경계 상자와 함께 표시되며 VisBug 접근성 도구 설명은 텍스트 색상과 배경의 색상 비교 보고서가 있는 분홍색 상자를 가리킵니다. 비율은 13.86이며 AA 및 AAA 목표를 모두 통과하고 있습니다. VisBug의 색상 대비 UI는 Pika 의 환상적인 디자인에서 크게 영감을 받았습니다 . 하나 이상의 # 검사 DevTools는 단일 색상 쌍을 보거나 페이지의 모든 색상 쌍에 대한 보고서를 얻을 수 있지만 VisBug는 여러 색상 쌍을 허용하여 좋은 중간 지점을 제공합니다. 요소를 클릭하면 툴팁이 그대로 유지됩니다. Shift 키를 누른 상태에서 다른 요소를 계속 클릭하면 모든 툴팁이 그대로 유지됩니다. 웹 페이지의 링크 목록은 여러 VisBug 접근성 오버레이와 함께 표시되며, 각각은 발견된 텍스트 및 배경 색상 대비를 컨텍스트적으로 가리키고 보고합니다. 이는 구성 요소의 여러 부분이 명암비 점수를 통과해야 하는 구성 요소 기반 설계에 특히 중요합니다. 이 방법을 사용하면 모든 구성 요소를 한 번에 볼 수 있습니다. 디자인 리뷰에도 좋습니다. 크롬 개발자도구 # Chrome 이 설치되어 있다면 이미 많은 대비 테스트 도구를 갖추고 있는 것입니다. 색상 선택기 검사 툴팁 CSS 개요 등대 JS 콘솔 색맹 에뮬레이션 도구 시스템 색상 대비 기본 설정 에뮬레이션 WCAG 3.0 APCA 실험 Chrome DevTools 색상 선택기 # 요소 패널의 Chrome DevTools 스타일 창에서 색상 값 옆에 작은 시각적 정사각형 색상 견본이 있습니다. 이 견본을 클릭하면 색상 선택 도구가 표시됩니다. 가능한 경우 도구의 중간에 전경 또는 배경에 대한 색상의 대비가 표시됩니다. 다음 예에서는 사용자 지정 속성 색상 값에 대한 색상 선택기가 열립니다. 명암비 점수는 15.79로 보고되며 두 개의 녹색 체크 표시가 있어 점수가 AA 및 AAA WCAG 2.1 요구 사항을 통과함을 나타냅니다. DevTools Elements 패널의 스크린샷, 스타일에서 색상 선택기가 표시되고 중간에 4.98의 색상 대비 비율이 보고됩니다. 색상 선택기 자동 수정 # 색상을 선택하는 동안 점수를 보는 것은 편리하지만 Chrome DevTools에는 자동 수정을 위한 추가 기능이 있습니다. 색상 선택기가 액세스할 수 없는 색상 대비 점수를 보고하면 AA 및 AAA 점수 목표와 함께 스포이드 도구를 표시하도록 확장할 수 있습니다. AA 및 AAA 옆에는 견본과 새로 고침 아이콘이 있으며 클릭하면 가장 가까운 통과 색상을 찾을 수 있습니다. 색상에 대해 까다롭지 않은 경우 자동 수정 기능은 접근성 지침을 충족하고 작업을 완료하기 위해 너무 열심히 일하지 않는 좋은 방법입니다. 검사 툴팁 # 요소 선택 도구에는 일반 글꼴, 색상 및 접근성 정보를 보고하는 페이지 호버 중 특수 기능이 있습니다. 요소 선택 도구는 다음 스크린샷의 왼쪽에 있는 아이콘입니다. 오른쪽 하단 모서리에 화살표 커서가 있는 상자입니다. Control+Shift+C단축키를 사용하여 (또는 Command+Shift+CMacOS에서) 선택할 수도 있습니다 . 요소 선택 도구를 호출하는 DevTools의 상자 및 화살표 아이콘 스크린샷. 활성화되면 아이콘이 파란색으로 바뀌고 페이지의 아무 곳이나 가리키면 다음과 같은 빠른 검사 도구 설명이 표시됩니다. VisBug와 매우 유사한 오버레이의 스크린샷은 일부 스타일 정보와 AA 목표를 통과하는 15.79의 대비 점수를 보여주는 접근성 섹션을 보여줍니다. 스타일 창에서 색상 견본을 찾아야 하는 색상 선택 도구 대신 이 도구를 사용하면 페이지 주위를 가리키기만 하면 대비 점수를 볼 수 있습니다. 색상 선택기와 마찬가지로 한 번에 하나의 대비 점수만 표시할 수 있습니다. 이 도구와 상호 작용 패턴은 VisBug의 사용자 경험에서 영감을 받았습니다. 합격할 때까지 쿵쾅쿵쾅???? # 나는 종종 이 빠른 검사 도구를 사용하여 색상 쌍을 검사하고 필요한 비율을 통과하지 못하는 것을 발견합니다. 내가 까다롭기 때문에 색상 선택기의 자동 수정 기능을 사용하는 대신 CSS에서 색상 채널을 조금씩 이동하고 필요한 비율을 통과할 때까지 봅니다. WCAG 2.1을 통과할 때까지 색상 채널 번호를 범프하기 때문에 이 프로세스를 " 통과할 때까지 범프 범프 "라고 합니다. 단계는 다음과 같으며 정확한 순서로 수행해야 합니다. 스타일 패널에서 색상 내부에 키보드 포커스를 설정합니다. 키보드 단축키 Control+Shift+C(또는 Command+Shift+CMacOS에서)를 사용하여 요소 검사 도구를 활성화합니다. 목표물을 가리킵니다. 키보드의 위/아래를 눌러 색상 값의 숫자를 변경합니다. 이것은 CSS 스타일 값에 여전히 키보드 포커스가 있고 마우스가 대상을 가리킬 수 있기 때문에 작동합니다. 대상을 클릭하지 않도록 하십시오. 그렇지 않으면 초점이 색상 값 영역에서 이동하고 다시 초점을 맞출 때까지 값을 더 이상 움직이지 않도록 하십시오. CSS 개요 # 지금까지 Chrome DevTools는 한 번에 하나의 색상 쌍을 볼 수 있는 방법을 제공했지만 CSS 개요 는 전체 페이지를 크롤링하고 액세스할 수 없는 모든 쌍을 한 번에 표시할 수 있습니다. CSS 개요 캡처 도구 실행의 개요 요약 스크린샷. 7가지 대비 문제를 보여주며 발견된 색상 쌍과 실패 결과를 보여줍니다. 이 기능에 대한 자세한 내용은 CSS 개요: 잠재적 CSS 개선 사항 식별 또는 YouTube의 Jecelyn Yeen 시리즈 DevTools Tips 에서 CSS 개요 패널로 잠재적 CSS 개선 사항을 식별 하는 방법을 알려주는 시리즈를 시청하세요 . 등대 # Lighthouse는 Chrome DevTools의 또 다른 감사 도구입니다. 페이지를 크롤링하고 액세스할 수 없는 색상 쌍을 보고할 수 있습니다. 각 색상 쌍의 작은 스크린샷을 통해 검토, 통과 및 실패를 확인할 수 있습니다. 실패한 조합은 Lighthouse 점수에 부정적인 영향을 미칩니다. 결과는 다음과 같습니다. 두 단어의 색상 조합에 대한 저대비 텍스트의 결과를 보여주는 Lighthouse 평가의 스크린샷. JS 콘솔 # 지금까지 나열된 모든 도구가 현재 위치에 없을 수도 있습니다. 당신이 있는 곳이 (하루 종일) 자바스크립트일 수도 있습니다. 여기 시도할 실험이 있습니다. 콘솔의 문제 창은 빌드할 때 색상 대비 접근성 문제를 지속적으로 보고할 수 있습니다. 다음과 같이 설정 > 실험에서 기능을 활성화합니다. 활성화된 확인란의 스크린샷: '문제 패널을 통해 자동 대비 문제 보고 활성화' 그런 다음 문제 창을 열고 발견한 항목이 있는지 확인합니다. 그렇다면 다음과 같이 보일 수 있습니다. 콘솔 내부의 문제 패널 스크린샷, 대비와 관련된 6개의 오류를 보고합니다. 색맹 에뮬레이션 # 색상 대비 및 접근 가능한 색상 쌍을 보장하는 주제에 대해 이야기하면서 시력 결핍 에뮬레이션 도구를 지적할 가치가 있습니다. 이렇게 하면 다양한 색맹의 결과를 보여주기 위해 디자인의 색상이나 모양이 변경되어 UX가 사용자와 소통하는 유일한 방법이 색상이 아니도록 디자인을 수정할 수 있습니다. 시력 결핍 에뮬레이션을 위한 DevTools 에뮬레이션 옵션의 스크린샷: 에뮬레이션 없음, 흐릿한 시력, 원시색, 중수소, 삼색맹, 색맹. 빨강은 나쁨, 녹색은 좋음과 같이 정보를 설명하기 위해 색상만 사용하는 것은 안전한 접근성 관행이 아닙니다. 일부 사람들은 녹색 또는 빨간색을 동일하게 보지 않으며 이 에뮬레이션 도구는 이를 경험하고 기억하는 데 도움이 될 것입니다. 색상 대비 시스템 기본 설정 에뮬레이션 # 점점 더 많은 사용자가 운영 체제에서 대비 설정을 변경하여 UI에서 대비 개인화를 더 적게 또는 더 많이 요청할 수 있는 기능을 제공합니다. CSS는 밝거나 어두운 테마 기본 설정과 마찬가지로 이 설정을 활용할 수 있습니다. Chrome DevTools는 이 기본 설정을 에뮬레이트하는 기능을 제공하므로 시스템에서 설정을 전환하지 않고도 디자인을 테스트하고 사용자 요청에 적응할 수 있습니다. CSS 미디어 쿼리 기본 설정을 에뮬레이션하기 위한 에뮬레이션 DevTools의 옵션 스크린샷: 에뮬레이션 없음, 더 많이, 더 적게, 사용자 지정. WCAG 3.0 APCA 시도 # 시도할 또 다른 실험은 실험적인 APCA 색상 비율 점수 시스템으로 색상 쌍을 테스트하는 것입니다. 설정 > 실험을 통해 활성화하면 WCAG 2.1 비율 시스템을 새롭고 향상된 대비 검사기 알고리즘으로 대체하여 제안이 표준에 맞춰 작동할 때 결과를 미리 볼 수 있습니다. 활성화된 확인란의 스크린샷: '이전 명암비 및 AA/AAA 지침을 대체하는 새로운 APCA(Advanced Perceptual Contrast Algorithm) 활성화' 활성화되면 포인트 검사 도구 설명 또는 색상 선택기를 사용하여 색상 페어링 점수를 확인하고 통과하는지 확인합니다. Devtools 검사 요소 도구 설명은 dd 요소의 대비 점수에 대해 -100.2%를 표시합니다. 결론 # 색상 대비는 웹 접근성을 위한 퍼즐의 중요한 부분이며, 이를 준수하면 가장 다양한 상황에서 가장 많은 사람들이 웹을 보다 유용하게 사용할 수 있습니다. 이 세 가지 도구가 훌륭한 색상 선택을 하는 데 도움이 되기를 바랍니다.