접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다

웹 사이트 및 앱에 대한 접근성을 향상시키는 가장 쉬운 방법 중 하나는 사용하는 색상이 눈을 기쁘게하는 것입니다. 높은 대비 색상은 모든 사람에게 좋으며 일반적인 눈의 피로를 줄일뿐만 아니라 시력 장애가있는 사용자에게도 중요합니다.

디자인에서 더 나은 색상 조합을 사용 할뿐만 아니라 높은 대비를 달성하는 더 쉬운 방법을 찾으십시오. Oomph는 SASS 기능이 모든 무거운 리프팅을 할 수 있도록 특정 전략을 채택합니다. 우리가 이것을 달성하는 방법을 안내해 드리겠습니다.

색상 접근성에 대한 모든 것을 이미 알고 있고 코드 섹션으로 바로 이동하려면 여기를 클릭하십시오.

"접근 기능 색상 조합"의 의미

색상 대비는 또한 우리가 처리했다고 생각할 수있는 것 중 하나입니다. 그러나 높은 색상 대비는 느낌으로 디자인을 판단하는 것이 아닙니다. WCAG는 액세스 가능한 것으로 간주되는 다양한 수준의 허용 가능한 표준을 정의합니다. WebAim Contrast Checker를 열고 실제로 겸손 할 수있는 웹 사이트의 색상 조합을 실행하십시오.

우리 팀은 기본적으로 WCAG의 AA 레벨 가이드 라인을 따릅니다. 이것은 다음을 의미합니다.

• 24 픽셀보다 크거나 같은 텍스트 또는 굵은 경우 19 픽셀보다 큰 텍스트는 3.0 : 1의 색상 조영 비율 (CCR)을 갖습니다.
• 24 픽셀 미만의 텍스트의 CCR은 4.5 : 1이어야합니다.

웹 사이트가 AA 수준의 향상 가이드 라인을 따라야하는 경우 요구 사항이 더 높아집니다.

• 24 픽셀보다 크거나 같은 텍스트 또는 굵은 경우 19 픽셀보다 큰 텍스트는 4.5 : 1의 색상 조영 비율 (CCR)을 갖습니다.
• 24 픽셀 미만의 텍스트의 CCR은 7 : 1이어야합니다.

비율? 음? 예, 여기에는 몇 가지 수학 작업이 있습니다. 그러나 좋은 소식은 우리가 스스로 할 필요가 없으며 Stacie Arellano가 최근 공유 한 것처럼 계산 방법을 깊이 이해하지 못한다는 것입니다 (이 기사는 색 보조 기능의 과학적 원리에 관심이 있다면 반드시 읽어야합니다 ).

이것은 Sass가 들어오는 곳입니다. 우리는 그것을 사용하여 우리가 이해하기 어려운 복잡한 수학적 계산을 실행할 수 있습니다. 그러나 먼저, 디자인 수준에서 접근성 색상을 다룰 가치가 있다고 생각합니다.

접근성 팔레트는 디자인으로 시작합니다

좋아요. 접근성 팔레트를 만드는 핵심 작업은 설계로 시작됩니다. 이상적으로는 모든 웹 디자인이 도구를 참조하여 사용 된 모든 색상 조합이 확립 된 가이드를 통과 한 다음 통과되지 않은 색상을 조정하는지 확인해야합니다. 우리의 디자인 팀은이 작업을 수행 할 때 사내에서 개발 된 도구를 사용합니다. 색상 목록을 처리하고 어둡고 밝은 색상으로 테스트하며 다른 조합을 테스트하는 방법을 제공합니다.

이것이 우리 팀이 가장 먼저해야 할 일입니다. 선택할 때 많은 브랜드 색상이 먼저 접근성을 부여하지 않는다고 감히 말합니다. 종종 웹 디자인으로 변환 할 때 이러한 색상이 변경되어야한다는 것을 알게됩니다. 교육, 대화 및 시각적 샘플을 통해 고객이 새로운 색상 팔레트를 승인 할 수 있습니다. 인정합니다 :이 작업 의이 부분은 실제로 접근성의 색상 조합을 구현하는 것보다 어려울 수 있습니다.

자동화를 통해 해결하고 싶은 문제는 극단적 인 상황 입니다. 당신은 예기치 않은 방식으로 결합 된 일부 색상을 놓친 것에 대해 디자이너를 비난 할 수 없습니다. 그리고 빌드 프로세스 중 또는 1 년 후 시스템에 새로운 색상을 추가 할 때 이러한 극단은 발생할 것입니다.

색상 시스템 의도를 유지하면서 보조 기능을 개발하십시오

접근성 요구 사항을 충족시키기 위해 색상을 변경하는 요령은 색상이 더 이상 같은 색상으로 보이지 않도록 색상을 변경하지 않는 것입니다. 에메랄드 그린 컬러를 좋아하는 브랜드는 "에메랄드 느낌"인 그 색상의 의도를 유지하기를 원할 것입니다. 흰색 배경에서 텍스트로 사용될 때 접근성 테스트를 통과하려면 녹색을 어둡게하고 포화를 늘려야 할 수도 있습니다. 그러나 우리는 여전히 색상이 원래 색상과 "동일"하기를 원합니다.

이를 위해 HSL (Hue Patchation Brightness) 컬러 모델을 사용합니다. HSL을 사용하면 색조를 변경하지 않지만 채도 (즉, 색상을 늘리거나 감소시키는)와 밝기 (즉, 검은 색 또는 흰색을 더 많이 추가)를 조정할 수 있습니다. 색조는 녹색을 녹색 으로 만들거나 파란색을 파란색 으로 만듭니다. 그것은 색의 "영혼"으로, 우리를 약간 신비하게 만듭니다.

Hue는 0 ° ~ 360 ° 범위의 값을 가진 컬러 휠로 표시됩니다. 값은 60 °, 녹색은 120 °, 시안은 180 °입니다. 포화는 0% (불포화)에서 100% (전체 포화) 범위입니다. 밝기는 또한 0%에서 100% 범위의 값이며, 여기서 0%는 밝기가없고, 50%는 검은 색과 흰색이며, 100%는 전체 밝기 또는 매우 밝습니다.

도구에서 색상 조정을위한 빠른 비주얼 :

자세한 내용은 mothereffinghsl.com에서 재미있는 HSL 시각화 도구를 사용해보십시오. 그러나보다 심층적 인 색맹 실명 설명, WCAG 색상 대비 수준 및 HSL 색상 공간을 위해 심층적 인 블로그 게시물을 썼습니다.

해결하고 싶은 사용 사례

디자이너는 방금 검토 한 도구를 사용하여 색상을 조정할 수 있지만 지금까지는 Magical Math 로이 작업을 수행 할 수있는 SASS를 찾지 못했습니다. 방법이 있어야합니다.

실제 응용 프로그램에서 본 몇 가지 유사한 방법은 다음과 같습니다.

• Josh Bader의 한 가지 아이디어는 CSS 변수를 사용하고 색상을 RGB 값으로 나누어 흰색 또는 검은 색이 주어진 경우에서 가장 좋은 접근성 색상임을 계산하는 것입니다.
• Facundo Corradini의 또 다른 아이디어는 HSL 값 및 CSS의 매우 멋진 "스위치 기능"과 유사합니다.

나는이 방법을 좋아하지 않는다. 나는 흰색이나 검은 색으로 돌아가고 싶지 않습니다. 나는 색상이 동일하게 유지되기를 원하지만 접근 가능하도록 조정되기를 원합니다. 또한 색상을 RGB 또는 HSL 구성 요소로 변경하여 CSS 변수로 저장하는 것은 혼란스럽고 대형 코드 기반을 유지하기가 어려워 보입니다.

Sass와 같은 전 처리기 로이 작업을 수행하고 싶습니다. 두 가지 색상이 주어지면 색상 중 하나를 자동으로 조정하여 한 쌍의 색상이 WCAG 등급을 통해 색상 대비를 얻습니다. 규칙은 또한 고려해야 할 다른 것들을 지정합니다 - 텍스트의 크기와 글꼴이 굵은 지 여부. 솔루션은 이것을 고려해야합니다.

코드 관점에서 다음과 같이하고 싶습니다.

 <code>// 转换此非通过颜色对： .example { background-color: #444; color: #0094c2; // 当AA 需要4.5 时，对比度比为2.79 font-size: 1.25rem; font-weight: normal; } // 到此通过颜色对： .example { background-color: #444; color: #00c0fc; // 对比度比为4.61 font-size: 1.25rem; font-weight: normal; }</code>

그렇게 할 해결책은 앞에서 언급 한 극단적 인 상황을 포착하고 처리 할 수 ​​있습니다. 아마도 디자이너는 Light Blue 위의 Brand Blue 사용을 고려했지만 Light Grey를 고려하지 않았습니다. 오류 메시지에 사용 된 빨간색은 단일 배경색의 양식에 맞게 조정해야 할 것입니다. 어쩌면 우리는 모든 색상을 다시 재개하지 않고 UI에 다크 모드 기능을 구현하고 싶을 수도 있습니다. 이것들은 내가 고려한 사용 사례입니다.

공식은 자동화를 가져올 수 있습니다

W3C는 커뮤니티에 함께 사용되는 두 가지 색상을 분석하는 데 도움이되는 공식을 커뮤니티에 제공합니다. 이 공식은 두 가지 색상의 RGB 채널에 마법의 숫자 (인간이 이러한 컬러 채널의 시각적 무게를 인식하는 방법에 따라)를 곱한 다음 0.0 (대비 없음)에서 21.0 (모든 대비, 검은 색과 흰색 만)의 비율을 산출하도록 나눕니다. 완벽하지는 않지만 이것은 우리가 현재 사용하고있는 공식입니다.

<code>如果L1 是第一种颜色的相对亮度而L2 是第二种颜色的相对亮度，则- 颜色对比度比= (L1 0.05) / (L2 0.05)其中- L = 0.2126 * R 0.7152 * G 0.0722 * B并且- 如果R sRGB</code> 공식은 복잡해 보이지만 수학 일뿐입니다. 등 <em>.</em> 당신은 그것을 알아 차렸습니까? 이것은 대부분의 프로그래밍 언어가 할 수있는 복잡한 수학 작동입니다.


<h3 id="다른-방법이-있어야합니다">다른 방법이 있어야합니다 ...</h3>


<p>물론 있습니다. 그것을 찾는 데 약간의 시간이 걸렸습니다. ?</p>



<p>첫 번째 버전은 Sass가 할 수있는 소수점 힘을 수행하기 위해 일련의 복잡한 수학적 계산을 사용합니다. 많은 인터넷 검색은 나보다 훨씬 똑똑한 사람들이 이러한 기능을 제공한다는 것을 발견했습니다. 불행히도, 소수의 색상 대비 조합 만 계산하면 Sass 빌드 시간이 지수 적으로 증가합니다. 따라서 이것은 Sass 가이 작업을 수행 할 수 있음을 의미하지만 그렇다고해서는 <em>안됩니다</em> . 생산 환경에서는 대형 코드베이스의 빌드 시간이 몇 분으로 증가 할 수 있습니다. 이것은 용납 할 수 없습니다.</p>



<p>더 많은 인터넷 검색을 한 후, 나는 비슷한 일을하려는 누군가에 대한 게시물을 우연히 발견했습니다. 또한 지수 지원이 부족한 Sass의 문제를 만났습니다. 그들은 "Newton의 근사 방법을 사용하여 인덱스의 분수 부분을 계산할 가능성"을 탐색하고자합니다. <em>나는이 충동을 완전히 이해합니다</em> (NO) <em>.</em> 대신, 그들은 "조회 테이블"을 사용하기로 결정했습니다. 이것은 천재 솔루션입니다. 매번 처음부터 수학을하는 대신 조회 테이블은 모든 미리 컴퓨팅 가능한 답변을 제공합니다. SASS 함수는 목록에서 답을 검색하며 수행됩니다.</p>



<p>그들의 말로 :</p>



<blockquote><p>지수 작업을 포함하는 SASS의 [유일한] 부분은 밝기 계산의 일부로 수행 된 채널 별 색상 공간 변환입니다. [t] 채널 당 256 개의 가능한 값 만 있습니다. 이것은 우리가 쉽게 조회수를 만들 수 있음을 의미합니다.</p></blockquote>



<p>이제 우리는 행동하기 시작했습니다. 더 잘 수행 할 수있는 방법을 찾았습니다.</p>


<h3 id="사용-예제">사용 예제</h3>


<p>이 기능을 사용하는 것은 간단하고 유연해야합니다. 두 가지 색상 세트가 주어지면 두 번째 색상으로 사용될 때 주어진 WCAG 레벨에 대해 올바른 대비 값이 얻어 지도록 첫 번째 색상을 조정하십시오. 선택적 매개 변수는 텍스트 크기 또는 두께도 고려합니다.</p>



// @function a11y-color (
// $ color-to-adjust,
// $ color-that-will-stay-the-same,
// $ wcag-level : 'aa',
// $ font-size : 16,
// $ bold : false
//);


// SASS 예제 사용법, 필요한 내용 만 선언합니다.
 배경색 : #444;
 색상 : a11y-color ( #0094c2, #444); // AA가 4.5를 필요로하면 대비 비율은 2.79입니다.


// 컴파일 된 CSS 결과 :
.예 {
 배경색 : #444;
 색상 : #00C0FC; // 대비 비율은 4.61입니다
}



<p>CSS 규칙과 무관 한 단일 값의 출력을 선호하기 때문에 Mixin 대신 기능을 사용합니다. 기능을 사용하여 저자는 어떤 색상을 변경 해야하는지 결정할 수 있습니다.</p>



<p>더 많은 매개 변수를 포함하는 예는 다음과 같습니다.</p>



// Sass
.면 -2 {
 배경색 : a11y-color ( #0094c2, #f0f0f0, 'aaa', 1.25rem, true); // AAA에 4.5가 필요한 경우, 대비 비율은 3.06입니다. 19 픽셀보다 큰 텍스트 및 대담한 색상 : #f0f0f0;
  글꼴 크기 : 1.25REM;
 글꼴 중량 : 대담한;
}


// 컴파일 된 CSS 결과 :
.면 -2 {
 배경색 : #087597; // 대비 비율은 4.6입니다
 색상 : #f0f0f0;
  글꼴 크기 : 1.25REM;
 글꼴 중량 : 대담한;
}


<h3 id="SASS-기능의-핵심을-깊이-탐색하십시오">SASS 기능의 핵심을 깊이 탐색하십시오</h3>


<p>이 접근법을 설명하기 위해 최종 기능의 역할을 라인별로 소개 해 봅시다. 프로세스에는 많은 도우미 기능이 있지만 핵심 기능의 주석과 논리는이 접근법을 설명합니다.</p>



// 예상되는:
// $ fg는 변경 될 색상으로 // $ bg가 정적으로 유지되고 변경되지 않는 색상으로 // 선택 사항 :
// $ level, 기본값은 'aa'입니다. 또한 'aaa'를 받아들이십시오.
// $ size, 기본값은 16입니다. PX가 될 것으로 예상됩니다.
// $ bold, boolean value, 기본값은 false입니다. 글꼴은 현재 대담한 //
@function a11y-color ($ fg, $ bg, $ level : 'aa', $ size : 16, $ bold : false) {
 // 헬퍼 기능 : 글꼴 크기 값이 허용되는지 확인하십시오.
 // 헬퍼 기능 : 레벨, 글꼴 크기 및 굵은 부울 값을 사용하여 올바른 목표 비율을 반환합니다. 예상 결과는 3.0, 4.5 또는 7.0입니다
 $ 비율 : get-ratio ($ level, $ font-size, $ bold);
 // 주어진 쌍의 첫 번째 대비 비율을 계산합니다.

 @if $ Original-Contrast> = $ 비율 {
  // 비율을 통과 한 경우 원래 색상 @return $ fg를 반환하십시오.
 } @또 다른 {
  // 실패했습니다. 작업을 시작하십시오 // 색상이 더 밝거나 어두워 야합니까?
  // 헬퍼 기능 : 단일 색상 입력, 출력은 "밝은"또는 "어두운"입니다.
  $ fg-lod : 라이트 또는 어두운 ($ fg);
  $ bg-lod : 라이트 또는 어두운 ($ bg);

  // 색상을 밝게하거나 어둡게하기 위해 "단계"값을 설정하십시오.

  // 어둡게하거나 음수 단계 크기 값을 사용하려는 경우 @if $ fg-lod == 'light'및 $ bg-lod == 'light'{를 반복합니다.
   // 둘 다 밝은 색상으로 FG를 어둡게 만듭니다 (단계 크기 값을 부정적으로 만듭니다)
   $ 단계 : - $ 단계;
  } @else if $ fg-lod == 'dark'및 $ bg-lod == 'light'{
   // BG는 밝은 색이며 FG는 어두운 색이지만 실패하면 더 어두워집니다. $ 단계 : - $ step;
  }
  // 나머지 논리를 여기에 유지하지만 기본값은 변경되지 않으므로이 논리가 필요하지 않습니다. // else $ fg-lod == 'light'및 $ bg-lod == 'dark'{
  // bg는 어둡고 fg는 가볍지 만 실패하면 더 밝게됩니다. // $ step : $ step;
  //} @else if $ fg-lod == 'dark'및 $ bg-lod == 'dark'{
  // // 둘 다 어둡기 때문에 FG // $ step : $ Step;
  //}

  // 마술은 여기에서 발생합니다 // 색상 조합이 필요한 비율을 통과 할 때까지 @While 문으로 루프. 표현이 거짓이 될 때까지 우리의 단계 값으로 색상을 스케일
  // 색상 @while 색상 대비 ($ fg, $ bg)에 따라 100 번 이상 루프 할 수 있습니다.


<h3 id="최종-Sass-파일">최종 Sass 파일</h3>


<p>이것은 전체 기능 세트입니다! Codepen 에서이 파일을 열어 파일 상단의 색상 변수를 편집하고 Sass의 조정을 확인하십시오.</p>







<p>모든 헬퍼 기능과 256 행 조회 테이블이 여기에 있습니다. 많은 의견은 사람들이 무슨 일이 일어나고 있는지 이해하는 데 도움이 될 것입니다.</p>



<p>극단적 인 상황이 발생하면 개발 중에 디버그 출력이있는 Sassmeister 버전을 사용하여 어떤 일이 발생할 수 있는지 확인합니다. (출력을 디버깅 할 수 있도록 주요 기능을 MixIn으로 변경했습니다.)이를 자유롭게 볼 수 있습니다.</p>



<p data-gist-="" data-height="480" data-theme="tomorrow" style="height: 480px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;"> Sassmeister 에서이 요점을 사용해보십시오.</p>



<p>마지막으로, 이러한 기능은 Codepen에서 벗겨져 Github 저장소에 배치되었습니다. 문제가있는 경우 큐에 문제를 제출하십시오.</p>


<h3 id="훌륭한-코드-그러나-생산-환경에서-사용할-수-있습니까">훌륭한 코드! 그러나 생산 환경에서 사용할 수 있습니까?</h3>


<p><em>아마도.</em></p>



<p>나는 예라고 말할 것입니다. 그러나 나는이 문제를 잠시 동안 반복하고 있습니다. 이 코드는 확신하지만 더 많은 입력을 원합니다. 작은 프로젝트에서 사용하여 테스트하십시오. Build Time의 성능이 어떻게 수행되는지 알려주세요. 통과하는 색상 값이 제공되지 않은 극단적 인 상황을 만나면 알려주십시오. Guthub 저장소에 문제를 제출하십시오. 실제 응용 프로그램에서 볼 수있는 다른 코드를 기반으로 개선을 제안하십시오.</p>



<p><em>접근성에 대한 모든 것을 자동화</em> 했다고 말하지만 "Production Ready Edition ™"이라는 도로 테스트를 거쳐야한다는 것도 알고 있습니다. 전 세계에 소개하게되어 기쁩니다. 읽어 주셔서 감사합니다. 곧 어떻게 사용하는지 듣고 싶습니다.</p>

코드를 직접 실행할 수 없기 때문에 실제 SASS 코드 블록을 제공 할 수 없습니다. 위의 출력은 의사 원리 원본 텍스트를 만들고 이미지 위치와 형식을 유지하기 위해 최선을 다했습니다. 더 미세한 조정이 필요한 경우보다 구체적인 수정 요구 사항을 제공하십시오.

위 내용은 접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!