block by aaizemberg a835d8e022e12483396d45eee9d826a5

este texto siempre será legible

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>este texto siempre sera legible</title>

  <script src="//d3plus.org/js/d3.js"></script>
  <script src="//d3plus.org/js/d3plus.js"></script>
  
  <style>
    h1 {
      text-align: center;
    } 
    body {
      background-color: 000;
    }
  </style>  
</head>
<body>  
  <input id='color' type="color" name="favcolor" value="#000" onchange="actualizar()">
  <h1 id="centrado">este texto siempre ser&aacute; legible</h1>

<script>
  function actualizar() {
    var color = d3.select("input").node().value;
    d3.select("body").style("background", color);
    var textColor = d3plus.color.text(color);
    d3.select('h1').style('color',textColor);  
  }
</script>  
  
</body>
</html>