Prototype: Toggle high contrast

by stopsatgreen

HTML

<div class="option1">
<label for="check">High contrast</label>
<input type="checkbox" id="check"/>
<div class="image">
    <h1>Hello</h1>
</div>
</div>

<div class="option2">
<label for="check">High contrast</label>
<input type="checkbox" id="check"/>
<div class="image">
    <div class="overlay">
    <h1>Hello</h1>
    </div>
</div>
</div>

CSS

.image {
    background: url('http://placekitten.com/g/400/100') no-repeat;
    height: 100px;
    opacity: 0.75;
    width: 400px;
}
.overlay {
    background-color: rgba(0,0,0,0);
}
h1 {
    color: white;
    font-size: 500%;
    line-height: 100px;
    margin: 0;
    text-align: center;
}
.option1 input[type='checkbox']:checked + div h1 { text-shadow: 0 0 2px black; }
.option2 input[type='checkbox']:checked + div .overlay { background-color: rgba(0,0,0,0.2); }