CodePen Embed - 입력 | Input - 색상입력

Live

 
<div class="container-fluid">
  <h1>
    대비 검사기
  </h1>
  <div class="row">
    <div class="col-md-4">
      <h3>
        전경색
      </h3>
      <div id="icFore"></div>
      <h3>
        배경색
      </h3>
      <div id="icBack"></div>
    </div>
    <div class="col-md-4">
      <h3>
        대비비(Contrast Ratio)
      </h3>
      <div id="ratio"></div>
      <h3>
        결과
      </h3>
      <p class="sample">
        일반 텍스트
      </p>
      <p>
        WCAG AA: <span id="aa-normal" class="result"></span>
        WCAG AAA: <span id="aaa-normal" class="result"></span>
      </p>
      <p class="sample large">
        큰 텍스트
      </p>
      <p>
        WCAG AA: <span id="aa-large" class="result"></span>
        WCAG AAA: <span id="aaa-large" class="result"></span>
      </p>
    </div>
  </div>
  <h3>
    설명
  </h3>
  <p>
   WCAG 2.0 레벨 AA는 일반 텍스트의 경우 4.5:1 이상, 큰 텍스트의 경우 3:1 이상의 대비비를 요구합니다.
  </p>
  <p>
    WCAG 2.1은 그래픽 및 사용자 인터페이스 구성요소(예: 양식 입력 경계)에 대해 최소 3:1의 대비비를 요구합니다.
  </p>
  <p>
    WCAG 레벨 AAA는 일반 텍스트의 경우 7:1 이상, 큰 텍스트의 경우 4.5:1 이상의 대비비가 필요합니다.
  </p>
  <p>
    더 자세한 설명은
    <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance" target="_blank">
      The Science of Color
    </a>
     페이지에 방문하셔서 확인하시길 바랍니다.
  </p>
</div>

Live

​x
 
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
​
body {
  margin: 20px;
  font-family: 'S-CoreDream-3Light';
}
​
#sample {
    padding: 12px;
    font-style: bold;
}
​
#ratio {
    font-size: 200%;
    padding: 12px;
    font-style: bold;
    text-align: center;
    border-radius: 4px;
    border: 2px solid whitesmoke;
}
​
.sample {
    padding: 6px;
    margin: 6px 0;
    border: 2px solid whitesmoke;
}
​
.large {
    font-size: 14pt;
    font-weight: bold;
}
​
.result {
    font-weight: bold;
    margin-right: 2em;
    padding: 3px 6px;
    border-radius: 6px;
    color: white;
    background: darkgreen;
}
.result.fail {
    background: darkred;
}
​
.container-fluid{
  background-color:#ededed;
  padding:10px;
  border-radius:10px;
}
​

Live

xxxxxxxxxx
 
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    // create InputColor controls
    let cpFore = new wijmo.input.InputColor('#icFore', {
        value: 'black',
        valueChanged: updateRatio
    });
    let cpBack = new wijmo.input.InputColor('#icBack', {
        value: 'white',
        valueChanged: updateRatio
    });
    updateRatio();
    // update the contrast ratio when the colors change
    function updateRatio() {
        // get lightness ratio
        let lFore = getRelativeLuminance(cpFore.value);
        let lBack = getRelativeLuminance(cpBack.value);
        let ratio = (Math.max(lFore, lBack) + .05) / (Math.min(lFore, lBack) + 0.05);
        // show sample text
        let sample = document.querySelectorAll('.sample');
        for (let i = 0; i < sample.length; i++) {
            let style = sample[i].style;
            style.color = cpFore.value;
            style.background = cpBack.value;
        }
        // show the result
        let e = document.getElementById('ratio');
        e.innerHTML = wijmo.format('<b>{ratio:g1}</b>:1', { ratio: ratio });
        e.style.borderColor = ratio < 7 ? 'whitesmoke' : 'darkgreen';
        pass('aa-normal', ratio >= 4.5);
        pass('aa-large', ratio >= 3);
        pass('aaa-normal', ratio >= 7);
        pass('aaa-large', ratio >= 4.5);
    }
    function pass(id, pass) {
        let e = document.getElementById(id);
        e.textContent = pass ? 'Pass' : 'Fail';
        wijmo.toggleClass(e, 'fail', !pass);
    }
    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance
    function getRelativeLuminance(color) {
        let c = new wijmo.Color(color);
        let r = getChannel(c.r);
        let g = getChannel(c.g);
        let b = getChannel(c.b);
        return (r * 0.2126 + g * 0.7152 + b * 0.0722);
    }
    function getChannel(rgb) {
        rgb /= 255;
        return rgb <= 0.03928
            ? rgb / 12.92
            : Math.pow((rgb + 0.055) / 1.055, 2.4);
    }
}
​

This Pen is owned by Mescius Korea on CodePen.

See more by @MESCIUS-Korea on CodePen

External CSS

External JavaScript