Color Contrast yiq

by levchenko_d

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/spectrum/1.3.0/css/spectrum.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/spectrum/1.3.0/js/spectrum.js"></script>
<input type='text'>
<input type='color'>
<p contenteditable>This text should be readable</p>

CSS

p {
    position: absolute;
    left:0;
    right:0;
    top: 50%;
    margin-top: -1.5em;
    font-size: 3em;
    text-align: center;
}

JavaScript

$('input[type="text"]').spectrum({ color: '#fff' }).on('change', function(){
    document.body.style.background = this.value
    document.querySelector('p').style.color = getcontrast(this.value)
})

// http://24ways.org/2010/calculating-color-contrast/
function getcontrast(hex) {
    var r = parseInt(hex.substr(1, 2), 16),
        g = parseInt(hex.substr(3, 2), 16),
        b = parseInt(hex.substr(5, 2), 16),
        yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    return (yiq >= 128) ? 'black' : 'white';
}