<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JS+CSS3文字和背景色彩对比度可视化效果</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="top">
<h3>Colors</h3>
<label>
BG 1:
<input type="color" id="bg1" value="#ffdd55" />
</label>
<label>
Text 1:
<input type="color" id="fg1" value="#000000" />
</label>
<label>
BG 2:
<input type="color" id="bg2" value="#ffdd55" />
</label>
<label>
Text 2:
<input type="color" id="fg2" value="#ffffff" />
</label>
</div>
<div class="bottom">
<div class="left">
<div class="content">
<h1>My Huge Page Title</h1>
<p>Sed dapibus neque placerat nisi posuere, et porta nunc aliquam. Quisque at nisi quis mauris condimentum hendrerit a at libero. Nunc vestibulum tellus ut lacus fringilla, eget consectetur justo rhoncus.</p>
<p class="small">Aenean consectetur sapien eu congue lobortis. Integer vitae cursus sapien, sed blandit felis.</p>
</div>
</div>
<div class="right">
<div class="content">
<h1>My Huge Page Title</h1>
<p>Sed dapibus neque placerat nisi posuere, et porta nunc aliquam. Quisque at nisi quis mauris condimentum hendrerit a at libero. Nunc vestibulum tellus ut lacus fringilla, eget consectetur justo rhoncus.</p>
<p class="small">Aenean consectetur sapien eu congue lobortis. Integer vitae cursus sapien, sed blandit felis.</p>
</div>
</div>
</div>
</div>
<script src='js/qovzjy.js'></script>
<script src="js/index.js"></script>
<p style="text-align:center;">来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</body>
</html>
