Source

scope.bitbucket.org / tests / color-contrast / index.html

<!doctype html>
<style>
body
{
  font: menu;
}
</style>
<script src="../../resources/scripts/colors.js"></script>
<script>
document.oninput = function()
{
  var FOREGROUND = 0;
  var BACKFROUND = 1;
  var inputs = document.querySelectorAll("input");
  var c1 = new Color().parseCSSColor(inputs[FOREGROUND].value);
  var c2 = new Color().parseCSSColor(inputs[BACKFROUND].value);
  var s = document.querySelector("p + p");
  s.style.cssText = "color: " + inputs[FOREGROUND].value + "; " +
                    "background-color:" + inputs[BACKFROUND].value + "; ";
  document.querySelector("h2").textContent = "contrast: " + c1.getContrastRatio(c2).toFixed(2);
}
</script>

<p>
  <label>foreground color: <input type=color value=#000000></label>
  <label>background color: <input type=color value=#ffffff></label>
<p>The quick brown fox jumps over the lazy dog
<h2></h2>