내가 발송한 첫번째 접근가능성 벌레는 백색 카드에 밝은 회색 타임 스탬프이었다. 그것은 Figma 에 우아하게 보였고,내 보정된 감시자에 잘 보였고,주차된 차에 있는 그의 전화에 이메일을 읽는 클라이언트에게 완전하게 보이지 않았다. 그는 was't 시각장애인 단지 햇빛이었다. 그 단 하나 지원 표는 디자인 모형이 결코 할 수 있지 않은 무언가를 나에게 가르쳤다: 대비는 맛의 문제가 아니다,측정가능한 재산이고,만약 당신이 don't 그것을 측정하면 당신은 발송 추측이다.
그 이후로 나는 을 만들었습니다 색상 대비 검사기 Toolz.dev 에서 WP Adminify 를위한 디자인 토큰에 대비 규칙을 유선화하고,계산하려는 것보다 더 많은 React 구성 요소를 감사했습니다. 이 가이드는 누군가가 처음에 나에게 건네 줬으면 좋았을 그 경험의 버전입니다. 실제로 대비 비율이 무엇인지,숫자가 어떻게 계산되는지,무엇이 WCAG 임계값은 브랜드 팔레트를 버리지 않고 실패한 색상 쌍을 수정하는 방법을 의미합니다.
TL;DR: WCAG 대비는 두 가지 색상의 상대 휘도를 기준으로 1:1 에서 21:1 의 비율입니다. 일반 본문 텍스트의 경우 AA 를 통과하려면 최소 4,5: 1,AAA 를 통과하려면 7:1 이 필요합니다. 큰 텍스트 (약 24px 또는 18,66px 굵은 글씨) 는 AA 의 경우 3:1,AAA 의 경우 4,5: 1 로 떨어집니다. 아이콘 및 입력 테두리와 같은 텍스트가 아닌 UI 는 3:1 이 필요합니다. 모든 텍스트-배경 쌍을 측정하고 AA 를 패스 바로 처리하며 도구가 부족할 때 통과 색상을 제안하도록 합니다.
왜 색 대비가 그렇게 중요합니까?
대비는 웹에서 가장 흔한 단일 접근성 장애입니다. 해마다 상위 백만 개의 홈 페이지에 대한 자동 감사 결과,대비 대비가 낮은 텍스트가 가장 빈번한 WCAG 위반이라는 사실이 밝혀졌습니다. 또한 가장 많은 사람들에게 영향을 미치는 것은 등록 된 시각 장애인 사용자뿐만 아니라 연령이 낮아진 사람,백내장과 같은 일반적인 상태를 가진 사람,저렴한 디스플레이를 사용하는 사람,밝은 방에있는 사람,태양이 화면에 닿을 때 우리 한 사람 한 사람과 관련이 있기 때문입니다.
비즈니스 측면도 있고,그렇지 않은 척 하지는 않을 겁니다. 접근성 법은 이제 많은 지역에서 WCAG 를 직접 참조합니다. 즉,접근할 수 없는 인터페이스는 단지 예의상의 문제가 아니라 법적 노출입니다. 하지만 제가 관심을 갖는 이유,그리고 전용 도구를 구축한 이유는 더 간단합니다. 사람들이 읽을 수 없는 텍스트는 유일한 업무에서 실패한 텍스트입니다. 아무도 사용할 수 없는 화려한 인터페이스는 디자인 성과가 아닙니다.
우리의 눈이 신뢰할 수 없는 서술자라는 것이 함정입니다. 우리는 우리 자신의 화면에 적응하고,텍스트가 무엇을 말해야 하는지 알고 있으므로 우리의 뇌가 그것을 채우고,이상적인 조건에서 디자인을 봅니다. 명암비는 그 모든 모니터나 기대에 신경 쓰지 않는 숫자를 제공합니다.
명암비란 정확히 무엇인가?
명암비는 두 가지 색상의 상대적인 휘도를 비교한 것입니다: 전경 (보통 텍스트) 과 배경. 상대 휘도는 색상이 방출하거나 반사하는 빛의 양을 측정한 것으로,인간의 눈이 실제로 빨간색,녹색 및 파란색을 인식하는 방식에 가중치를 부여합니다. 녹색은 인지된 밝기에 가장 많이 기여하고 파란색은 가장 적게 기여하므로 검정색의 순수한 파란색 텍스트는 순수한 녹색보다 읽기가 훨씬 어렵습니다.
비율 자체는 WCAG에 의해 다음과 같이 정의됩니다:
(L1 + 0.05) / (L2 + 0.05)
어디 L1 는 밝은 색상의 상대 휘도 및 L2 더 어두운 것의 그것인가. The 0.05 용어는 화면에서 반사되는 주변광을 모델링하므로 스케일이 무한대에 도달하지 않습니다. 동일한 색상은 정확히 1:1 의 비율을 생성합니다. 순수한 흰색의 순수한 검은 색 텍스트는 최대 21:1 을 제공합니다. 그 두 극단 사이의 모든 실제 생활.
내면화해야 할 중요한 점은 비율이 "different" 색조 의미에서 두 가지 색상이 보이는 방식과 선형이 아니라는 것입니다. 두 가지 색상은 색조가 크게 다를 수 있습니다. 예를 들어 포화 빨간색과 포화 녹색은 여전히 거의 동일한 휘도를 가지므로 격렬하게 충돌하더라도 가독성에 대한 악몽이 됩니다. 대비는 색상 차이가 아니라 밝기 차이에 관한 것입니다. 그것이 바로 당신이 그것을 눈알로 볼 수 없는 이유이며,왜 색상 대비 검사기 비교를 수행하기 전에 두 색상을 휘도로 변환합니다.
실제로 숫자는 어떻게 계산되나요?
도구를 신뢰하기보다는 이해하려는 경우 WCAG 2.2 정의를 정확하게 따르는 전체 파이프 라인이 있습니다.
먼저,각 색상 채널은 0–255 범위에서 0–1 로 정규화됩니다. 그런 다음 각 채널은 sRGB 감마 곡선을 취소하기 위해 선형화됩니다. 수식은 매우 어두운 값에 대해 작은 선형 세그먼트를 적용하고 나머지 값에 대해서는 전력 곡선을 적용합니다:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
다음으로, 세 개의 선형화된 채널은 인간의 인식을 반영하는 휘도 계수와 결합됩니다:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
그 무게는 임의적이지 않습니다. 그들은 eye's 원뿔 세포가 다른 파장에 반응하는 방식에서 비롯되며,녹색이 우세한 이유입니다. 마지막으로 두 휘도 값은 위의 비율 공식에 연결되고,더 가벼운 것은 위에 있습니다.
사람을 넘어뜨리는 미묘함이 하나 있는데,그것은 투명도입니다. 대비 비율은 두 개의 불투명한 색상 사이에서만 의미가 있습니다. 왜냐하면 반투명한 color's 실제 모양은 뒤에 있는 것이 무엇이든지간에 달려 있기 때문입니다. 텍스트 색상에 알파 값이 있으면 직접 측정할 수 없습니다. 올바른 접근 방식이자 도구가 취하는 접근 방식은 표준 소스 오버 블렌딩을 사용하여 반투명 전경을 먼저 배경 위에 합성한 다음 평평한 결과에 대한 비율을 측정하는 것입니다. 이는 명목상 설정한 색상이 아닌 사용자가 실제로 보는 것과 일치합니다.
내가 쳐야 할 WCAG 임계값은 무엇입니까?
WCAG 는 두 가지 적합성 수준과 세 가지 광범위한 콘텐츠 유형에 대한 대비 요구 사항을 정의합니다. 여기 한 곳에서 전체 그림이 있습니다.
| 콘텐츠 유형 | AA 최소 | AAA 최소 |
|---|---|---|
| 일반 텍스트 (~24px 이하) | 4.5:1 | 7:1 |
| 큰 텍스트 (~ 24px, 또는 ~ 18.66px 굵게) | 3:1 | 4.5:1 |
| UI 구성 요소 및 그래픽 | 3:1 | 3:1 (별도의 AAA 없음) |
| 로고타입과 부수적인 텍스트 | 면제 | 면제 |
이 테이블을 여러 번 적용한 데서 몇 가지 참고 사항이 있습니다. "Large text"는 텍스트가 얼마나 중요한지 여부가 아니라 렌더링 된 크기로 정의됩니다. 임계 값은 일반 무게의 경우 18pt 이고 14pt bold 로 대략 24px 및 18.66px 로 변환됩니다. AA 의 경우 편안한 3:1 막대를 얻는 것 이상의 모든 것은 더 큰 문자 형식이 낮은 대비에서도 읽을 수 있기 때문입니다.
UI-components 규칙은 성공 기준 1.4.11 이며, 팀이 가장 자주 잊어버리는 규칙입니다. 대화형 구성 요소의 시각적 경계 - 텍스트 입력의 경계, 버튼의 윤곽, 의미를 전달하는 아이콘의 모양 - 는 주변 환경에 대해 3:1 이 필요하다고 말합니다. 보이지 않는 입력 테두리가 있는 AA-passing 라벨 텍스트로 가득 찬 형태는 여전히 실패하고 있으며, 저는 제작 과정에서 정확히 한 번 이상 그 점을 보았습니다.
마지막으로,장식 텍스트,사용할 수 없는 컨트롤,로고는 면제됩니다. 그 면제는 좁습니다. 회색으로 표시된 버튼 라벨은 괜찮습니다; "secondary" 라고 불렀던 낮은 대비의 단락은 그렇지 않습니다.
색상 대비 검사기를 어떻게 사용하나요?
제가 매일 사용하는 워크플로는 한 쌍당 약 10초 정도 걸립니다. 열다 색상 대비 검사기 그리고 첫 번째 필드에 텍스트 색상을 입력합니다. 어떤 형식이든 붙여넣을 수 있습니다 - 여섯 자리 hex like #4b5563, 알파가 있는 8자리 육각형, an rgb() 또는 rgba() 문자열, an hsl() 값 또는 일반 CSS 키워드와 같습니다 navy. 도구는 제공하는 모든 것을 정규화하므로 두 필드 간에 형식을 자유롭게 혼합할 수 있습니다.
두 번째 필드에 배경색을 입력합니다. 둘 다 유효한 순간,정확한 비율이 실제 배경에 렌더링된 크고,일반적이며, 캡션 텍스트의 라이브 샘플과 함께 나타납니다. 그 미리보기가 중요합니다. 숫자는 통과 여부를 알려주지만 실제 색상에서 실제 단어를 보는 것은 편안한지 여부를 알려주며 이는 단순히 합법적인 것보다 더 높은 기준입니다.
비율 아래에서는 패스 및 실패 배지의 격자를 얻습니다: 일반 텍스트와 대형 텍스트 모두에 대한 AA 및 AAA,그리고 3:1 UI-구성 요소 검사. 조합이 실패하면 도구는 원 클릭 수정을 제공합니다. 그것은 HSL 공간에서 텍스트 색상을 더 밝거나 어둡게 걷습니다 - 선택한 색조와 채도를 보존합니다 - 목표 비율을 지울 때까지,그 다음 스타일시트에 바로 복사 할 수있는 통과 값을 건네줍니다. 그 마지막 부분은 당신을 꾸짖는 체커와 실제로 도움이되는 체커의 차이점입니다: 브랜드 색조를 그대로 유지하고 필요한 최소한의 밝기 만 이동시킵니다.
모든 것이 브라우저에서 로컬로 실행됩니다. 색상,팔레트 또는 출시되지 않은 브랜드 값이 장치를 떠나지 않으므로 client's 사전 출시 디자인 시스템을 감사할 때 중요합니다. 이는 사이트의 모든 도구에서 사용하는 것과 동일한 개인 정보 보호 우선 접근 방식이며 해당 아키텍처가 왜 중요한지에 대해 썼습니다 데이터 개인정보 보호 가이드.
실제 프로젝트의 일반적인 사용 사례
디자인 시스템 감사's 토큰
새로운 프로젝트를 위해 컬러 토큰을 설정할 때,나는 단일 컴포넌트가 발송되기 전에 모든 의미론적 페어링들을 확인한다: 배경에 기본 텍스트,배경에 음소거된 텍스트,기본에 텍스트,카드에 텍스트,모든 경고 변형에 텍스트가 한 번 실패하는 토큰은 사용되는 모든 곳에서 실패하므로 토큰 레벨에서 그것을 잡는 것이 컴포넌트당 잡는 것보다 엄청나게 저렴하다. 나는 간단한 체크리스트를 유지하고 각 쌍을 체커를 통해 실행하여 토큰 이름 옆에 비율을 기록한다.
"to"가 있는 브랜드 색상을 구출하는 것입니다
마케팅은 당신에게 브랜드 블루를 건네주고 버튼이 그것을 사용해야한다고 말합니다. 당신은 그것에 흰색 텍스트를 테스트하고 3.1:1 - 큰 텍스트에 대해 벌금을 내고 보통 크기의 버튼 라벨에 실패합니다. 당신은 세 가지 정직한 옵션을 가지고 있습니다: 상호 작용하는 표면을 위해 브랜드 블루를 약간 어둡게하거나,3:1 임계 값이 적용되도록 더 크거나 굵은 라벨을 사용하거나,버튼이 밝은 경우 라벨을 더 어두운 색상으로 전환하십시오. tool's 제안 기능은 가장 가까운 통과 음영을 찾아 평면 "no."보다는 구체적이고 최소한의 변화를 마케팅하는 것을 보여줄 수 있습니다
자리 표시자 및 도우미 텍스트 확인 중
브라우저가 기본적으로 불투명도를 감소시켜 렌더링하고 디자이너가 그 위에 이미 밝은 회색을 선택하기 때문에 자리 표시자 텍스트는 반복 위반자입니다. 공칭 색상이 아닌 합성 결과를 테스트하는 것을 잊지 마십시오. checker's 알파 합성은 당신을 위해 이것을 수행합니다: 입력 배경 위에 실제 불투명도를 갖는 자리 표시자 색상을 입력하고 실제 비율을 읽으십시오.
아이콘 및 테두리 가시성 확인
1.4.11 UI 검사의 경우 아이콘이나 테두리 색상을 바로 뒤에 있는 모든 항목에 대해 테스트합니다. 흰색 카드의 회색 구분선, 컬러 헤더의 갈매기 모양, 필드에 대한 초점 링 - 이 모든 것은 3:1이 필요합니다. "everything is technically there but I can't see any of it" 버그 클래스.
이것은 어떻게 디자인 tool's 붙박이 체크를 다만 사용으로 비교합니까?
디자인 도구는 대비 표시기를 추가했으며 브라우저 개발 도구는 색상 선택기의 비율을 표시하므로 공정한 질문은 전용 도구에 대한 도달이 전혀 필요한 이유입니다. 여기에 나의 정직한 비교가 있습니다.
| 접근 | 힘 | 제한 |
|---|---|---|
| 전용 콘트라스트 검사기 | 정확한 비율, 모든 임계값, 알파 합성, 색상 제안 전달, 모든 색상 문자열에서 작동합니다 | 수동으로 색상을 붙여넣습니다 |
| 디자인 도구 플러그인 | 아트보드와 인라인으로 | 종종 해당 앱에 연결된 알파를 무시할 수 있습니다 |
| 브라우저 개발 도구 | 라이브 렌더링 페이지를 확인합니다 | 제안 없이 한 번에 한 쌍씩 페이지가 먼저 존재해야 합니다 |
| 그것을 눈알로 | 빠른 | 틀렸어, 끊임없이 |
전용 도구는 렌더링된 페이지가 아닌 값에서 작업할 때마다 승리합니다. 토큰 검토,스펙 확인 또는 보고된 버그 수정 등 단순한 판결이 아닌 통과 대안이 필요할 때마다 브라우저 개발 도구는 페이지가 존재하고 실제로 배송된 제품을 즉석에서 확인하려는 경우 더 좋습니다. 저는 서로 다른 단계에서 두 가지를 모두 사용합니다.
관심을 갖고 있는 팀을 위한 고급 노트입니다
제가 배운 몇가지 기본을 뛰어넘는 것들입니다. 첫째,대조는 필요하지만 충분하지는 않습니다. 4,5: 1 을 통과하면 하나의 장벽이 제거됩니다; 인터페이스 자체를 접근 가능하게 만들지 않습니다. 여전히 가시적인 초점 상태가 필요하고,색상만으로 의미를 전달하는 것을 피해야 하며,여전히 실제 보조 기술로 실제 테스트가 필요합니다. 비율을 결승선이 아닌 바닥으로 취급합니다.
둘째,다크 모드는 무료가 아닙니다. 라이트 모드에서 통과하는 팔레트는 휘도 관계가 반전되기 때문에 다크 모드에서 실패 할 수 있습니다. 두 테마를 모두 확인하십시오. checker's dark-background preview toggle 은 내가 계속 잊어 버렸기 때문에 정확하게 존재합니다.
셋째, "close enough." 4.48:1 의 비율은 반올림 승리가 아닌 실패입니다. 화면은 다양하고 사용자는 다양하며 임계 값에는 이유가있는 여백이 내장되어 있습니다. 경계선에 있다면 밀어 붙이십시오.
더 넓은 툴킷을 조립하는 경우 웹 개발자 툴킷 가이드 자동화할 가치가 있는 다른 검사와 함께 대비가 어떻게 맞는지 다룹니다. 그리고 색상이 통과하면 다음과 같은 도구가 제공됩니다 그라데이션 생성기 그리고 컬러 피커 이미 확인한 기초 위에 나머지 팔레트를 빌드하는 데 도움을 줍니다. 페이지 메타데이터 및 소셜 미리 보기도 생성하는 경우 메타 태그 생성기 동일한 사전 실행 패스에서 잘 쌍을 이룹니다.
자주 묻는 질문
좋은 색 대비 비율은 무엇입니까?
일반 본문 텍스트의 경우 WCAG AA 를 충족하기 위해 최소 4,5: 1 을 목표로 하고 더 엄격한 AAA 레벨을 충족하기 위해 7:1 을 목표로 합니다. 24px 또는 18,66px 굵은 글씨에 대한 큰 텍스트는 AA 의 경우 3:1,AAA 의 경우 4,5: 1 만 있으면 됩니다. 아이콘과 대화형 UI 구성 요소는 주변 환경에 대해 최소 3:1 이 필요합니다.
wcag에서 큰 텍스트로 간주되는 것은 무엇입니까?
큰 텍스트는 일반 무게의 경우 최소 18pt, 대략 24px, 굵은 경우 최소 14pt, 대략 18.66px입니다. 더 큰 문자 형식은 작은 문자 형식보다 낮은 대비에서 읽을 수 있도록 유지되므로 해당 크기 이상의 텍스트는 완화된 3:1 AA 임계값에 적합합니다.
WCAG AA와 AAA의 차이점은 무엇입니까?
AA 는 대부분의 법률과 조직이 목표로 하는 레벨이며 일반 텍스트의 경우 4,5: 1 이 필요합니다. AAA 는 향상된 레벨이며 7:1 이 필요하며 이는 시력이 낮은 사용자를 대상으로 하는 콘텐츠에 적합하지만 전체 팔레트를 치기 어렵습니다. 대부분의 팀은 AA 를 패스 바로 취급하고 AAA 를 비판적 읽기 콘텐츠에 대한 열망으로 취급합니다.
명암비는 어떻게 계산되나요?
각 색상은 감마 보정 및 지각 가중치 측정 인 WCAG 상대 휘도로 변환됩니다. 비율은 (L_lighter + 0.05) 를 (L_darker + 0.05) 로 나눈 값으로, 동일한 색상의 경우 1:1 에서 순수한 흰색의 순수한 검정색의 경우 21:1 까지의 값을 생성합니다.
투명도가 대비 결과에 영향을 줍니까?
예. 반투명 텍스트 색상은 배경을 통해 보여 주며,이는 효과적인 색상을 변경합니다. 올바른 방법은 반투명 전경을 먼저 배경 위에 합성 한 다음 비율을 측정하여 점수가 사용자가 설정한 공칭 색상이 아닌 사용자가 실제로 보는 것을 반영합니다.
내 텍스트가 큰 크기로 전달되지만 일반 크기로 실패하는 이유는 무엇입니까?
임계값은 다릅니다. 일반 텍스트는 AA 에 4,5:1 이 필요한 반면 큰 텍스트는 3:1 만 필요하므로 3 과 4,5 사이의 비율은 제목에 대해서는 통과하지만 본문 복사본에 대해서는 실패합니다. 본문 텍스트에 대한 대비를 높이거나 이완된 임계값이 적용되는 큰 크기에서만 페어링이 사용되는지 확인하십시오.
접근성의 명암비가 충분합니까?
아니요. 대비는 필요하지만 충분하지는 않습니다. 또한 가시적 인 초점 상태가 필요하며 색상만으로 의미를 전달하는 것을 피해야하며 실제 콘텐츠와 보조 기술로 테스트해야합니다. 비율을 통과하면 하나의 공통 장벽이 제거되지만 그 자체로는 인터페이스에 액세스 할 수 없습니다.
색상 대비 검사기가 내 색상을 어디든 보내나요?
아니요. 모든 구문 분석 및 수학은 JavaScript 를 사용하여 브라우저에서 로컬로 실행됩니다. 색상 값,브랜드 팔레트 또는 스크린 샷이 업로드되거나 저장되지 않으며 페이지가로드되면 도구가 네트워크 연결없이 계속 작동합니다.
