? ??? ? ?? ?? ???? ????? ?? ?? ?? ? ??? ???? ??? ?? ????? ????. ?? ?? ??? ?? ???? ??? ???? ?? ??? ???? ??? ?? ????? ?????? ?????.

????? ? ?? ?? ??? ?? ??? ??? ?? ??? ???? ? ?? ??? ?????. 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>// 轉(zhuǎn)換此非通過顏色對： .example { background-color: #444; color: #0094c2; // 當(dāng)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>?? ??? ?????? ...</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>?? ??</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>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>?? 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>??? ??! ??? ?? ???? ??? ? ?????</h3>


<p><em>???.</em></p>



<p>?? ??? ?? ????. ??? ??? ??? ?? ?? ???? ????. ? ??? ????? ? ?? ??? ????. ?? ?????? ???? ???????. Build Time? ??? ??? ????? ?????. ???? ?? ?? ???? ?? ??? ? ??? ??? ??????. Guthub ???? ??? ??????. ?? ?? ?????? ? ??? ?? ??? ???? ??? ??????.</p>



<p><em>???? ?? ?? ?? ???</em> ??? ???? "Production Ready Edition ?"??? ?? ???? ?????? ?? ?? ????. ? ??? ?????? ????. ?? ??? ?????. ? ??? ????? ?? ????.</p>

??? ?? ??? ? ?? ??? ?? SASS ?? ??? ?? ? ? ????. ?? ??? ?? ?? ?? ???? ??? ??? ??? ??? ???? ?? ??? ?????. ? ??? ??? ??? ???? ???? ?? ?? ??? ??????.

? ??? ?? ??? ?? ??? ???? ?? SASS? ????????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!