| <!DOCTYPE html> |
| |
| <html> |
| <!-- |
| Copyright 2010 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> |
