color-contrast.html | Explore in Territory

<!DOCTYPE html>

<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Color Contrast Test</title>
	<style type="text/css" media="screen">
	  #preview {
	    margin-left: 1em;
	    padding: 0.5em 1em;
	    background: #ccc;
	  }
	</style>
</head>
<body>
  <script type="text/javascript" src="../base.js"></script>
  
  <p>
    #<input type="text" value="cccccc" id="color" size="6" maxlength="6"> 
    <input 
      type="button" 
      value="Black or White?" 
      id="submit" 
      onclick="blackOrWhite()">
    <span id="preview">This text should be readable</span>
  </p>
  <p>(Only choosing from black and white.)</p>

  <script type="text/javascript" charset="utf-8">
  
    goog.require('goog.color');

    function blackOrWhite() {
      
      var colorInput = document.getElementById('color');
      var previewElement = document.getElementById('preview');

      var bgRgb = goog.color.hexToRgbStyle('#' + colorInput.value);
      var bgRgbArr = goog.color.parseRgb(bgRgb);

      var bestColor = goog.color.highContrast(
        bgRgbArr, [[0, 0, 0], [255, 255, 255]]);
      
      var bestColorHex = goog.color.rgbArrayToHex(bestColor);
      
      console.info(bestColorHex + ' wins on sum');
      previewElement.style.backgroundColor = '#' + colorInput.value;
      previewElement.style.color = bestColorHex;
    }
    
  </script>
  
</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/color-contrast.html
