KevinGutowski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Learn about the relationship between Hue, Saturation, Brightness, and Color Contrast. Minimum contrast level is set to 4.5 (AA).

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.2/math.js"></script>
  <script src="https://use.typekit.net/nmk5cke.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
  <style>
    body {
    padding: 0;
    color: white;
    font-family: Proxima Nova, 'proxima-nova',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #FAFBFC;
}

.main {
    max-width: 760px;
    text-align: center;
}

h1 {
    padding: 24px 0;
}

.description {
    margin-top: 32px;
}

i {
    margin-right: 4px;
}

a {
    color: #13DCC1;
    transition: .2s ease;
    text-decoration: none;
}

a:hover {
    color: #00A4FF;
}


.description img {
    height: 16px;
    margin-right: 4px;
}

.content {
    color: #4a4a4a;
    text-align: left;
    border-radius: 2px;
    margin-top: 24px;
    padding: 24px 24px;
}

.content h1 {
    margin: 0;
}

#section1 {
    display:flex;
    justify-content: flex-start;
}

#section1 > div {
    margin-right: 8px;
}
#colorSpaceContainer {
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
}

#colorSpaceContainer > * {
    position: absolute;
    top:0;
    left:0;
}

#colorSpace {
    display: block;
    height: 200px;
}

#hueChannelContainer {
    display: block;
    position: relative;
    width: 200px;
    height: 10px;
    margin: 8px 0;
}

#hueChannelContainer > * {
    position: absolute;
    top: 0;
    left: 0;
}

#hueNubSpace {
}

#hueChannel {
    width: 200px;
    height: 10px;
}

.formTitle {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 14px;
}

.formTitle > div {
    font-size: 16px;
    font-weight: bold;
}

.colorInput {
    margin-top: 4px;
}

.colorInput input {
    float: right;
}

.textColorTitle {
    margin-top: 16px;
}

.buttonAndContrast {
    width: 243px;
    display: flex;
    flex-direction: column;
}

.buttonAndContrast div {
    align-self: center;
    margin-bottom: 4px;
}

#myButton {
    padding: 12px 24px;
    display: inline-block;
    letter-spacing: 1px;
}

#contrastValue {
    font-weight: bold;
    font-feature-settings: "tnum"
}

#optionalWarning {
    font-size: 12px;
    font-weight: bold;
    color: red;
    letter-spacing: .5px;
}
  </style>
</head>

<body>
  <div class="main">
          <div class="content">
              <h1>Accessible Color Spaces</h1>
              <div class="section" id='section1'>
                <div id="colorPicker">
                  <div id="colorSpaceContainer">
                    <canvas width="100" height="100" id="colorSpace"></canvas>
                    <svg width="200" height ="200" id="satBrightSpace"></svg>
                  </div>

                  <div id="hueChannelContainer">
                    <canvas width="360" height="1" id="hueChannel"></canvas>
                    <svg width="200" height="10" id="hueNubSpace"></svg>
                  </div>

                </div>
                <div id='inputs'>
                  <div class="formTitle">BUTTON / BG COLOR</div>
                  <div class='colorInput'>
                    Hue
                    <input type="number" name="hueInput" min="0" max="360" inputmode="numeric" pattern="[0-9]*" id="hueInput" class="buttonColor">
                  </div>
                  <div class='colorInput'>
                    Saturation
                    <input type="number" name="satInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="satInput" class="buttonColor">
                  </div>
                  <div class='colorInput'>
                    Brightness
                    <input type="number" name="brightInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="brightInput" class="buttonColor">
                  </div>
                  <div class="formTitle textColorTitle">TEXT COLOR</div>
                  <div class='colorInput'>
                    Hue
                    <input type="number" name="textHueInput" min="0" max="360" inputmode="numeric" pattern="[0-9]*" id="textHueInput" class="buttonColor">
                  </div>
                  <div class='colorInput'>
                    Saturation
                    <input type="number" name="textSatInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="textSatInput" class="buttonColor">
                  </div>
                  <div class='colorInput'>
                    Brightness
                    <input type="number" name="textBrightInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="textBrightInput" class="buttonColor">
                  </div>
                </div>

                <div class="buttonAndContrast">
                  <div id='myButton'>My Button</div>
                  <div id="contrastValue">Contrast: 2.6:1</div>
                  <div id="optionalWarning">! WARNING: Below Contrast Requirement</div>
                </div>

              </div>

          </div>
    </div>


  <script>
    // Color JS
function normHSV(color) {
    color = {
        h: color.h / 360.0,
        s: color.s / 100.0,
        v: color.v / 100.0,
    }

    return color
}

function normRGB(color) {
    color = {
        r: color.r / 255.0,
        g: color.g / 255.0,
        b: color.b / 255.0
    }

    return color
}

function HSVtoRGB(color) {
    var h,s,v,i,f,p,q,t
    h = color.h;
    s = color.s;
    v = color.v;

    i = math.floor(h * 6);
    f = (h * 6) - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);

    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }

    color = {
        r: r,
        g: g,
        b: b
    }

    return color
}

function RGBtoHSV(color) {
    var r = color.r;
    var g = color.g;
    var b = color.b;

    var max = Math.max(r,g,b);
    var min = Math.min(r,g,b);
    var h, s, v = max;
    var d = max - min;
    s = max == 0 ? 0 : d / max;

    if (max == min) {
        h = 0;
    } else {
        switch (max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }

        h /= 6
    }

    var tempHSVColor = {
        h: h,
        s: s,
        v: v
    }

    return tempHSVColor;

}

function getColorContrast(color1, color2) {
    if (color1.r > 1 || color1.g > 1 || color1.b > 1) {
        return "ERROR: Color1 out of range."
    }

    if (color2.r > 1 || color2.g > 1 || color2.b > 1) {
        return "ERROR: Color2 out of range."
    }
    // Color 1
    // Get Red Value of Color 1

    var L1R = color1.r;

    if (L1R <= 0.03928) {
        L1R = L1R / 12.92;
    } else {
        L1R = ((L1R + 0.055) / 1.055)**2.4;
    }

    // Get Green Value of Color 1

    var L1G = color1.g;

    if (L1G <= 0.03928) {
        L1G = L1G / 12.92;
    } else {
        L1G = ((L1G + 0.055) / 1.055)**2.4;
    }

    // Get Blue Value of Color 1

    var L1B = color1.b;

    if (L1B <= 0.03928) {
        L1B = L1B / 12.92;
    } else {
        L1B = ((L1B + 0.055) / 1.055)**2.4;
    }

    //Color2
    //Get Red Value of Color 2

    var L2R = color2.r;

    if (L2R <= 0.03928) {
        L2R = L2R / 12.92;
    } else {
        L2R = ((L2R + 0.055) / 1.055)**2.4;
    }

    //Get Green Value of Color 2

    var L2G = color2.g;

    if (L2G <= 0.03928) {
        L2G = L2G / 12.92;
    } else {
        L2G = ((L2G + 0.055) / 1.055)**2.4;
    }

    //Get Blue Value of Color 2

    var L2B = color2.b;

    if (L2B <= 0.03928) {
        L2B = L2B / 12.92;
    } else {
        L2B = ((L2B + 0.055) / 1.055)**2.4;
    }

    var L1 = 0.2126 * L1R + 0.7152 * L1G + 0.0722 * L1B;
    var L2 = 0.2126 * L2R + 0.7152 * L2G + 0.0722 * L2B;

    //Make sure L1 is lighter
    if (L1 <= L2) {
        var temp = L2;
        L2 = L1;
        L1 = temp;
    }

    //Calculate Contrast
    cr = (L1 + 0.05) / (L2 + 0.05);

    return cr
}

function getColorContrastHSV(color1, color2) {
    //normalize HSV colors
    color1 = normHSV(color1);
    color2 = normHSV(color2);

    //convert to RGB
    color1 = HSVtoRGB(color1);
    color2 = HSVtoRGB(color2);

    //get contrast of RGB colors
    return getColorContrast(color1, color2)
}

function hexToRgb(hex){
    hex = hex.replace('#','');
    var myTempRGBColor = {
        r: parseInt(hex.substring(0,2), 16),
        g: parseInt(hex.substring(2,4), 16),
        b: parseInt(hex.substring(4,6), 16)
    }

    return myTempRGBColor
}

// Accessible Colors
var initialColor = {
    h:274,
    s:49,
    v:63
}

var white = {
  h: 0,
  s: 0,
  v: 100,
}

var currentColor = initialColor;
var currentTextColor = white;
var accessibilityValue = 4.5;

function accessibleColors() {

  // canvas start
  var colorSpaceCanvas = document.querySelector('#colorSpace'),
      cSWidth = colorSpaceCanvas.width,
      cSHeight = colorSpaceCanvas.height,
      cSContext = colorSpaceCanvas.getContext('2d'),
      cSImage = cSContext.createImageData(cSWidth,cSHeight);

  // generate image data
  function gridImageData(hue) {
    // iterate over rows
    for (var row = 0, i=-1; row < cSHeight; ++row) {
      // interate for cells
      for (var column = 0; column < cSWidth; ++column) {
        var tempColor = {
          h: hue,
          s: column,
          v: cSHeight - row
        }
        var tempRGBColor = HSVtoRGB(normHSV(tempColor));
        cSImage.data[++i] = Math.round(tempRGBColor.r*255);
        cSImage.data[++i] = Math.round(tempRGBColor.g*255);
        cSImage.data[++i] = Math.round(tempRGBColor.b*255);
        cSImage.data[++i] = 255;
      }
    }
    cSContext.putImageData(cSImage,0,0);
  }

  // generate accessibility curve
  function getAccessibilityCurve(hue) {
    var accessibilityPath = "M";
    var firstCheck; // store the first point in each row (true or false)
    for (var column = 0; column <= 100; column++) {
      for (var row = 0; row <= 100; row++) {
        if (row == 0) {
          firstCheck = checkColorContrast(hue, column, row);
        }

        // check if the contrast has changed from false to true or true to false (boundary condition)
        if (checkColorContrast(hue, column, row) != firstCheck) {
          var scaledRow = (100 - row) * 2;
          var scaledColumn = column * 2;
          accessibilityPath = accessibilityPath + " " + scaledColumn + " " + scaledRow;
          break;
        }
      }
    }
    return accessibilityPath;
  }

  // canvas start
  var hueChannelCanvas = document.querySelector('#hueChannel'),
      hCWidth = hueChannelCanvas.width,
      hCHeight = hueChannelCanvas.height,
      hCContext = hueChannelCanvas.getContext('2d'),
      hCImage = hCContext.createImageData(hCWidth, hCHeight);

  // generate hue selector data
  function hueChannelData() {
    for (var column = 0, i=-1; column < 360; ++column) {
      var tempColor = {
        h: column,
        s: 100,
        v: 100
      }
      var tempRGBColor = HSVtoRGB(normHSV(tempColor));
      hCImage.data[++i] = Math.round(tempRGBColor.r*255);
      hCImage.data[++i] = Math.round(tempRGBColor.g*255);
      hCImage.data[++i] = Math.round(tempRGBColor.b*255);
      hCImage.data[++i] = 255;
    }
    hCContext.putImageData(hCImage,0,0);
  }


  var satBrightSpaceSVG = d3.select('#satBrightSpace');
  satBrightSpaceSVG.call(d3.drag()
    .on('start', dragstartedSatBrightSpace)
    .on('drag', draggedSatBrightSpace)
    .on('end', dragendedSatBrightSpace)
  );

  function dragstartedSatBrightSpace() {
    d3.select(this).raise().classed('active', true);
    d3.select('#currentColorCircle')
      .attr('cx', Math.floor(d3.event.x))
      .attr('cy', Math.floor(d3.event.y));

    currentColor.s = Math.floor(d3.event.x / 2.0)
    currentColor.v = Math.floor((200.0 - d3.event.y) / 2.0);
    update(currentColor, currentTextColor);
  }

  function draggedSatBrightSpace() {
    var colorCircleX, colorCircleY;

    if (d3.event.x > 200) {
      colorCircleX = 200;
    } else if (d3.event.x < 0) {
      colorCircleX = 0;
    } else {
      colorCircleX = d3.event.x;
    }

    if (d3.event.y > 200) {
      colorCircleY = 200;
    } else if (d3.event.y < 0) {
      colorCircleY = 0;
    } else {
      colorCircleY = d3.event.y;
    }
    d3.select('#currentColorCircle')
      .attr('cx', Math.floor(colorCircleX))
      .attr('cy', Math.floor(colorCircleY));

    currentColor.s = Math.floor(colorCircleX / 2.0)
    currentColor.v = Math.floor((200.0 - colorCircleY) / 2.0);
    update(currentColor, currentTextColor);
  }

  function dragendedSatBrightSpace() {
    d3.select(this).classed('active', false);
  }

  // create the accessibility path
  satBrightSpaceSVG.append('path')
    .attr('fill', 'none')
    .attr('stroke', 'black')
    .attr('id', 'accessibilityPath')
    .attr('d', getAccessibilityCurve(currentColor.h))
    .attr('stroke-width', '1')

  // create the saturation & brightness selector
  satBrightSpaceSVG.append('circle')
    .attr('fill', 'none')
    .attr('stroke', 'white')
    .attr('id', 'currentColorCircle')
    .attr('cx', currentColor.s*2)
    .attr('cy', 200 -(currentColor.v*2))
    .attr('r', 5)
    .attr('stroke-width', 2);


  var hueNubSpaceSVG = d3.select('#hueNubSpace');
  hueNubSpaceSVG.call(d3.drag()
    .on('start', dragstartedHueNubSpace)
    .on('drag', draggedHueNubSpace)
    .on('end', dragended)
  );

  function dragstartedHueNubSpace() {
    d3.select(this).raise().classed('active', true);
    d3.select('#hueSelectorNub')
      .attr('x', Math.floor(d3.event.x))
      .attr('stroke', '#000000');
    currentColor.h = Math.floor(d3.event.x * 1.8);
    update(currentColor, currentTextColor);
  }

  function draggedHueNubSpace() {
    var HueX;
    if (d3.event.x > 200) {
      HueX = 200;
    } else if (d3.event.x < 0) {
      HueX = 0;
    } else {
      HueX = d3.event.x;
    }

    d3.select('#hueSelectorNub')
      .attr('x', Math.floor(HueX))
      .attr('stroke', '#000000');
    currentColor.h = Math.floor(HueX * 1.8);
    update(currentColor, currentTextColor);
  }

  function dragended() {
    d3.select('#hueSelectorNub').attr('stroke', '#8E8E8E');
    d3.select(this).classed('active', false);
  }

  // create the hue selector nub
  hueNubSpaceSVG.append('rect')
    .attr('x', currentColor.h / 1.8)
    .attr('y', 0)
    .attr('width', 5)
    .attr('height', 10)
    .attr('id', 'hueSelectorNub')
    .attr('fill', 'white')
    .attr('stroke-width', 1)
    .attr('stroke', '#8E8E8E')
    .attr('rx', 2)
    .attr('ry', 2);

  // Initialize Static Items
  hueChannelData();

  // Initialize Items that Update
  update(initialColor, white);

  // Global Update
  function update(currentColor, currentTextColor) {
    updateExampleButton(currentColor, currentTextColor);
    updateContrastWarning(currentColor, currentTextColor);
    updateInputs(currentColor, currentTextColor);
    updateHues(currentColor.h);
    updateCurrentColorCircle(currentColor);
  }

  function updateExampleButton(currentColor, currentTextColor) {
    var normCurrentColorRGB = HSVtoRGB(normHSV(currentColor));

    var cCR = Math.round(normCurrentColorRGB.r*255);
    var cCG = Math.round(normCurrentColorRGB.g*255);
    var cCB = Math.round(normCurrentColorRGB.b*255);

    var normCurrentTextColorRGB = HSVtoRGB(normHSV(currentTextColor));
    var cTCR = Math.round(normCurrentTextColorRGB.r*255);
    var cTCG = Math.round(normCurrentTextColorRGB.g*255);
    var cTCB = Math.round(normCurrentTextColorRGB.b*255);

    var cCString = 'background-color: rgb(' + cCR + ',' + cCG + ',' + cCB +')';
    var cTCString = 'color: rgb(' + cTCR + ',' + cTCG + ',' + cTCB +')';

    d3.select('#myButton').attr('style', cCString + "; " + cTCString);
  }

  function updateContrastWarning(currentColor, currentTextColor) {
    var contrastVal = getColorContrastHSV(currentColor, currentTextColor);
    var floored = (contrastVal.toString().match(/^-?\d+(?:\.\d{0,1})?/)[0]*1).toFixed(1)
    d3.select('#contrastValue').text('Contrast: ' + floored + ':1');
    if (contrastVal >= accessibilityValue) {
      d3.select('#optionalWarning').attr('style', "display:none");
    } else {
      d3.select('#optionalWarning').attr('style', "display:inherit");
    }
  }

  function updateInputs(currentColor, currentTextColor) {
    d3.select('#hueInput').property('value', currentColor.h);
    d3.select('#satInput').property('value', currentColor.s);
    d3.select('#brightInput').property('value', currentColor.v);

    d3.select('#textHueInput').property('value', currentTextColor.h);
    d3.select('#textSatInput').property('value', currentTextColor.s);
    d3.select('#textBrightInput').property('value', currentTextColor.v);
  }

  function updateHues(hue) {
    d3.select('#hueSelectorNub').attr('x', hue / 1.8).attr('hue', hue);
    gridImageData(hue);
    d3.select('#accessibilityPath').attr('d', getAccessibilityCurve(hue));
  }

  function updateCurrentColorCircle(currentColor) {
    d3.select('#currentColorCircle')
      .attr('cx', currentColor.s*2)
      .attr('cy', 200 - (currentColor.v*2))
  }

  // Interaction handlers
  d3.select('#hueInput').on('input', function() {
    currentColor.h = this.value;
    update(currentColor, currentTextColor);
  });

  d3.select('#satInput').on('input', function() {
    currentColor.s = this.value;
    update(currentColor, currentTextColor);
  });

  d3.select('#brightInput').on('input', function() {
    currentColor.v = this.value;
    update(currentColor, currentTextColor);
  });

  d3.select('#textHueInput').on('input', function() {
    currentTextColor.h = this.value;
    update(currentColor, currentTextColor);
  });

  d3.select('#textSatInput').on('input', function() {
    currentTextColor.s = this.value;
    update(currentColor, currentTextColor);
  });

  d3.select('#textBrightInput').on('input', function() {
    currentTextColor.v = this.value;
    update(currentColor, currentTextColor);
  });

}

function checkColorContrast(hue, x, y) {
  var tempColor = {
    h: hue,
    s: x,
    v: y
  }
  var contrast = getColorContrastHSV(tempColor, currentTextColor);
  return (contrast >= accessibilityValue)
}

accessibleColors();
  </script>
</body>


## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.2/math.js"></script>
	<script src="https://use.typekit.net/nmk5cke.js"></script>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
	<style>
	body {
	padding: 0;
	color: white;
	font-family: Proxima Nova, 'proxima-nova',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background-color: #FAFBFC;
	}

	.main {
	max-width: 760px;
	text-align: center;
	}

	h1 {
	padding: 24px 0;
	}

	.description {
	margin-top: 32px;
	}

	i {
	margin-right: 4px;
	}

	a {
	color: #13DCC1;
	transition: .2s ease;
	text-decoration: none;
	}

	a:hover {
	color: #00A4FF;
	}


	.description img {
	height: 16px;
	margin-right: 4px;
	}

	.content {
	color: #4a4a4a;
	text-align: left;
	border-radius: 2px;
	margin-top: 24px;
	padding: 24px 24px;
	}

	.content h1 {
	margin: 0;
	}

	#section1 {
	display:flex;
	justify-content: flex-start;
	}

	#section1 > div {
	margin-right: 8px;
	}
	#colorSpaceContainer {
	display: block;
	position: relative;
	width: 200px;
	height: 200px;
	}

	#colorSpaceContainer > * {
	position: absolute;
	top:0;
	left:0;
	}

	#colorSpace {
	display: block;
	height: 200px;
	}

	#hueChannelContainer {
	display: block;
	position: relative;
	width: 200px;
	height: 10px;
	margin: 8px 0;
	}

	#hueChannelContainer > * {
	position: absolute;
	top: 0;
	left: 0;
	}

	#hueNubSpace {
	}

	#hueChannel {
	width: 200px;
	height: 10px;
	}

	.formTitle {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 14px;
	}

	.formTitle > div {
	font-size: 16px;
	font-weight: bold;
	}

	.colorInput {
	margin-top: 4px;
	}

	.colorInput input {
	float: right;
	}

	.textColorTitle {
	margin-top: 16px;
	}

	.buttonAndContrast {
	width: 243px;
	display: flex;
	flex-direction: column;
	}

	.buttonAndContrast div {
	align-self: center;
	margin-bottom: 4px;
	}

	#myButton {
	padding: 12px 24px;
	display: inline-block;
	letter-spacing: 1px;
	}

	#contrastValue {
	font-weight: bold;
	font-feature-settings: "tnum"
	}

	#optionalWarning {
	font-size: 12px;
	font-weight: bold;
	color: red;
	letter-spacing: .5px;
	}
	</style>
	</head>

	<body>
	<div class="main">
	<div class="content">
	<h1>Accessible Color Spaces</h1>
	<div class="section" id='section1'>
	<div id="colorPicker">
	<div id="colorSpaceContainer">
	<canvas width="100" height="100" id="colorSpace"></canvas>
	<svg width="200" height ="200" id="satBrightSpace"></svg>
	</div>

	<div id="hueChannelContainer">
	<canvas width="360" height="1" id="hueChannel"></canvas>
	<svg width="200" height="10" id="hueNubSpace"></svg>
	</div>

	</div>
	<div id='inputs'>
	<div class="formTitle">BUTTON / BG COLOR</div>
	<div class='colorInput'>
	Hue
	<input type="number" name="hueInput" min="0" max="360" inputmode="numeric" pattern="[0-9]*" id="hueInput" class="buttonColor">
	</div>
	<div class='colorInput'>
	Saturation
	<input type="number" name="satInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="satInput" class="buttonColor">
	</div>
	<div class='colorInput'>
	Brightness
	<input type="number" name="brightInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="brightInput" class="buttonColor">
	</div>
	<div class="formTitle textColorTitle">TEXT COLOR</div>
	<div class='colorInput'>
	Hue
	<input type="number" name="textHueInput" min="0" max="360" inputmode="numeric" pattern="[0-9]*" id="textHueInput" class="buttonColor">
	</div>
	<div class='colorInput'>
	Saturation
	<input type="number" name="textSatInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="textSatInput" class="buttonColor">
	</div>
	<div class='colorInput'>
	Brightness
	<input type="number" name="textBrightInput" min="0" max="100" inputmode="numeric" pattern="[0-9]*" id="textBrightInput" class="buttonColor">
	</div>
	</div>

	<div class="buttonAndContrast">
	<div id='myButton'>My Button</div>
	<div id="contrastValue">Contrast: 2.6:1</div>
	<div id="optionalWarning">! WARNING: Below Contrast Requirement</div>
	</div>

	</div>

	</div>
	</div>



	<script>
	// Color JS
	function normHSV(color) {
	color = {
	h: color.h / 360.0,
	s: color.s / 100.0,
	v: color.v / 100.0,
	}

	return color
	}

	function normRGB(color) {
	color = {
	r: color.r / 255.0,
	g: color.g / 255.0,
	b: color.b / 255.0
	}

	return color
	}

	function HSVtoRGB(color) {
	var h,s,v,i,f,p,q,t
	h = color.h;
	s = color.s;
	v = color.v;

	i = math.floor(h * 6);
	f = (h * 6) - i;
	p = v * (1 - s);
	q = v * (1 - f * s);
	t = v * (1 - (1 - f) * s);

	switch (i % 6) {
	case 0: r = v, g = t, b = p; break;
	case 1: r = q, g = v, b = p; break;
	case 2: r = p, g = v, b = t; break;
	case 3: r = p, g = q, b = v; break;
	case 4: r = t, g = p, b = v; break;
	case 5: r = v, g = p, b = q; break;
	}

	color = {
	r: r,
	g: g,
	b: b
	}

	return color
	}

	function RGBtoHSV(color) {
	var r = color.r;
	var g = color.g;
	var b = color.b;

	var max = Math.max(r,g,b);
	var min = Math.min(r,g,b);
	var h, s, v = max;
	var d = max - min;
	s = max == 0 ? 0 : d / max;

	if (max == min) {
	h = 0;
	} else {
	switch (max) {
	case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	case g: h = (b - r) / d + 2; break;
	case b: h = (r - g) / d + 4; break;
	}

	h /= 6
	}

	var tempHSVColor = {
	h: h,
	s: s,
	v: v
	}

	return tempHSVColor;

	}

	function getColorContrast(color1, color2) {
	if (color1.r > 1 \|\| color1.g > 1 \|\| color1.b > 1) {
	return "ERROR: Color1 out of range."
	}

	if (color2.r > 1 \|\| color2.g > 1 \|\| color2.b > 1) {
	return "ERROR: Color2 out of range."
	}
	// Color 1
	// Get Red Value of Color 1

	var L1R = color1.r;

	if (L1R <= 0.03928) {
	L1R = L1R / 12.92;
	} else {
	L1R = ((L1R + 0.055) / 1.055)**2.4;
	}

	// Get Green Value of Color 1

	var L1G = color1.g;

	if (L1G <= 0.03928) {
	L1G = L1G / 12.92;
	} else {
	L1G = ((L1G + 0.055) / 1.055)**2.4;
	}

	// Get Blue Value of Color 1

	var L1B = color1.b;

	if (L1B <= 0.03928) {
	L1B = L1B / 12.92;
	} else {
	L1B = ((L1B + 0.055) / 1.055)**2.4;
	}

	//Color2
	//Get Red Value of Color 2

	var L2R = color2.r;

	if (L2R <= 0.03928) {
	L2R = L2R / 12.92;
	} else {
	L2R = ((L2R + 0.055) / 1.055)**2.4;
	}

	//Get Green Value of Color 2

	var L2G = color2.g;

	if (L2G <= 0.03928) {
	L2G = L2G / 12.92;
	} else {
	L2G = ((L2G + 0.055) / 1.055)**2.4;
	}

	//Get Blue Value of Color 2

	var L2B = color2.b;

	if (L2B <= 0.03928) {
	L2B = L2B / 12.92;
	} else {
	L2B = ((L2B + 0.055) / 1.055)**2.4;
	}

	var L1 = 0.2126 * L1R + 0.7152 * L1G + 0.0722 * L1B;
	var L2 = 0.2126 * L2R + 0.7152 * L2G + 0.0722 * L2B;

	//Make sure L1 is lighter
	if (L1 <= L2) {
	var temp = L2;
	L2 = L1;
	L1 = temp;
	}

	//Calculate Contrast
	cr = (L1 + 0.05) / (L2 + 0.05);

	return cr
	}

	function getColorContrastHSV(color1, color2) {
	//normalize HSV colors
	color1 = normHSV(color1);
	color2 = normHSV(color2);

	//convert to RGB
	color1 = HSVtoRGB(color1);
	color2 = HSVtoRGB(color2);

	//get contrast of RGB colors
	return getColorContrast(color1, color2)
	}

	function hexToRgb(hex){
	hex = hex.replace('#','');
	var myTempRGBColor = {
	r: parseInt(hex.substring(0,2), 16),
	g: parseInt(hex.substring(2,4), 16),
	b: parseInt(hex.substring(4,6), 16)
	}

	return myTempRGBColor
	}

	// Accessible Colors
	var initialColor = {
	h:274,
	s:49,
	v:63
	}

	var white = {
	h: 0,
	s: 0,
	v: 100,
	}

	var currentColor = initialColor;
	var currentTextColor = white;
	var accessibilityValue = 4.5;

	function accessibleColors() {

	// canvas start
	var colorSpaceCanvas = document.querySelector('#colorSpace'),
	cSWidth = colorSpaceCanvas.width,
	cSHeight = colorSpaceCanvas.height,
	cSContext = colorSpaceCanvas.getContext('2d'),
	cSImage = cSContext.createImageData(cSWidth,cSHeight);

	// generate image data
	function gridImageData(hue) {
	// iterate over rows
	for (var row = 0, i=-1; row < cSHeight; ++row) {
	// interate for cells
	for (var column = 0; column < cSWidth; ++column) {
	var tempColor = {
	h: hue,
	s: column,
	v: cSHeight - row
	}
	var tempRGBColor = HSVtoRGB(normHSV(tempColor));
	cSImage.data[++i] = Math.round(tempRGBColor.r*255);
	cSImage.data[++i] = Math.round(tempRGBColor.g*255);
	cSImage.data[++i] = Math.round(tempRGBColor.b*255);
	cSImage.data[++i] = 255;
	}
	}
	cSContext.putImageData(cSImage,0,0);
	}

	// generate accessibility curve
	function getAccessibilityCurve(hue) {
	var accessibilityPath = "M";
	var firstCheck; // store the first point in each row (true or false)
	for (var column = 0; column <= 100; column++) {
	for (var row = 0; row <= 100; row++) {
	if (row == 0) {
	firstCheck = checkColorContrast(hue, column, row);
	}

	// check if the contrast has changed from false to true or true to false (boundary condition)
	if (checkColorContrast(hue, column, row) != firstCheck) {
	var scaledRow = (100 - row) * 2;
	var scaledColumn = column * 2;
	accessibilityPath = accessibilityPath + " " + scaledColumn + " " + scaledRow;
	break;
	}
	}
	}
	return accessibilityPath;
	}

	// canvas start
	var hueChannelCanvas = document.querySelector('#hueChannel'),
	hCWidth = hueChannelCanvas.width,
	hCHeight = hueChannelCanvas.height,
	hCContext = hueChannelCanvas.getContext('2d'),
	hCImage = hCContext.createImageData(hCWidth, hCHeight);

	// generate hue selector data
	function hueChannelData() {
	for (var column = 0, i=-1; column < 360; ++column) {
	var tempColor = {
	h: column,
	s: 100,
	v: 100
	}
	var tempRGBColor = HSVtoRGB(normHSV(tempColor));
	hCImage.data[++i] = Math.round(tempRGBColor.r*255);
	hCImage.data[++i] = Math.round(tempRGBColor.g*255);
	hCImage.data[++i] = Math.round(tempRGBColor.b*255);
	hCImage.data[++i] = 255;
	}
	hCContext.putImageData(hCImage,0,0);
	}


	var satBrightSpaceSVG = d3.select('#satBrightSpace');
	satBrightSpaceSVG.call(d3.drag()
	.on('start', dragstartedSatBrightSpace)
	.on('drag', draggedSatBrightSpace)
	.on('end', dragendedSatBrightSpace)
	);

	function dragstartedSatBrightSpace() {
	d3.select(this).raise().classed('active', true);
	d3.select('#currentColorCircle')
	.attr('cx', Math.floor(d3.event.x))
	.attr('cy', Math.floor(d3.event.y));

	currentColor.s = Math.floor(d3.event.x / 2.0)
	currentColor.v = Math.floor((200.0 - d3.event.y) / 2.0);
	update(currentColor, currentTextColor);
	}

	function draggedSatBrightSpace() {
	var colorCircleX, colorCircleY;

	if (d3.event.x > 200) {
	colorCircleX = 200;
	} else if (d3.event.x < 0) {
	colorCircleX = 0;
	} else {
	colorCircleX = d3.event.x;
	}

	if (d3.event.y > 200) {
	colorCircleY = 200;
	} else if (d3.event.y < 0) {
	colorCircleY = 0;
	} else {
	colorCircleY = d3.event.y;
	}
	d3.select('#currentColorCircle')
	.attr('cx', Math.floor(colorCircleX))
	.attr('cy', Math.floor(colorCircleY));

	currentColor.s = Math.floor(colorCircleX / 2.0)
	currentColor.v = Math.floor((200.0 - colorCircleY) / 2.0);
	update(currentColor, currentTextColor);
	}

	function dragendedSatBrightSpace() {
	d3.select(this).classed('active', false);
	}

	// create the accessibility path
	satBrightSpaceSVG.append('path')
	.attr('fill', 'none')
	.attr('stroke', 'black')
	.attr('id', 'accessibilityPath')
	.attr('d', getAccessibilityCurve(currentColor.h))
	.attr('stroke-width', '1')

	// create the saturation & brightness selector
	satBrightSpaceSVG.append('circle')
	.attr('fill', 'none')
	.attr('stroke', 'white')
	.attr('id', 'currentColorCircle')
	.attr('cx', currentColor.s*2)
	.attr('cy', 200 -(currentColor.v*2))
	.attr('r', 5)
	.attr('stroke-width', 2);


	var hueNubSpaceSVG = d3.select('#hueNubSpace');
	hueNubSpaceSVG.call(d3.drag()
	.on('start', dragstartedHueNubSpace)
	.on('drag', draggedHueNubSpace)
	.on('end', dragended)
	);

	function dragstartedHueNubSpace() {
	d3.select(this).raise().classed('active', true);
	d3.select('#hueSelectorNub')
	.attr('x', Math.floor(d3.event.x))
	.attr('stroke', '#000000');
	currentColor.h = Math.floor(d3.event.x * 1.8);
	update(currentColor, currentTextColor);
	}

	function draggedHueNubSpace() {
	var HueX;
	if (d3.event.x > 200) {
	HueX = 200;
	} else if (d3.event.x < 0) {
	HueX = 0;
	} else {
	HueX = d3.event.x;
	}

	d3.select('#hueSelectorNub')
	.attr('x', Math.floor(HueX))
	.attr('stroke', '#000000');
	currentColor.h = Math.floor(HueX * 1.8);
	update(currentColor, currentTextColor);
	}

	function dragended() {
	d3.select('#hueSelectorNub').attr('stroke', '#8E8E8E');
	d3.select(this).classed('active', false);
	}

	// create the hue selector nub
	hueNubSpaceSVG.append('rect')
	.attr('x', currentColor.h / 1.8)
	.attr('y', 0)
	.attr('width', 5)
	.attr('height', 10)
	.attr('id', 'hueSelectorNub')
	.attr('fill', 'white')
	.attr('stroke-width', 1)
	.attr('stroke', '#8E8E8E')
	.attr('rx', 2)
	.attr('ry', 2);

	// Initialize Static Items
	hueChannelData();

	// Initialize Items that Update
	update(initialColor, white);

	// Global Update
	function update(currentColor, currentTextColor) {
	updateExampleButton(currentColor, currentTextColor);
	updateContrastWarning(currentColor, currentTextColor);
	updateInputs(currentColor, currentTextColor);
	updateHues(currentColor.h);
	updateCurrentColorCircle(currentColor);
	}

	function updateExampleButton(currentColor, currentTextColor) {
	var normCurrentColorRGB = HSVtoRGB(normHSV(currentColor));

	var cCR = Math.round(normCurrentColorRGB.r*255);
	var cCG = Math.round(normCurrentColorRGB.g*255);
	var cCB = Math.round(normCurrentColorRGB.b*255);

	var normCurrentTextColorRGB = HSVtoRGB(normHSV(currentTextColor));
	var cTCR = Math.round(normCurrentTextColorRGB.r*255);
	var cTCG = Math.round(normCurrentTextColorRGB.g*255);
	var cTCB = Math.round(normCurrentTextColorRGB.b*255);

	var cCString = 'background-color: rgb(' + cCR + ',' + cCG + ',' + cCB +')';
	var cTCString = 'color: rgb(' + cTCR + ',' + cTCG + ',' + cTCB +')';

	d3.select('#myButton').attr('style', cCString + "; " + cTCString);
	}

	function updateContrastWarning(currentColor, currentTextColor) {
	var contrastVal = getColorContrastHSV(currentColor, currentTextColor);
	var floored = (contrastVal.toString().match(/^-?\d+(?:\.\d{0,1})?/)[0]*1).toFixed(1)
	d3.select('#contrastValue').text('Contrast: ' + floored + ':1');
	if (contrastVal >= accessibilityValue) {
	d3.select('#optionalWarning').attr('style', "display:none");
	} else {
	d3.select('#optionalWarning').attr('style', "display:inherit");
	}
	}

	function updateInputs(currentColor, currentTextColor) {
	d3.select('#hueInput').property('value', currentColor.h);
	d3.select('#satInput').property('value', currentColor.s);
	d3.select('#brightInput').property('value', currentColor.v);

	d3.select('#textHueInput').property('value', currentTextColor.h);
	d3.select('#textSatInput').property('value', currentTextColor.s);
	d3.select('#textBrightInput').property('value', currentTextColor.v);
	}

	function updateHues(hue) {
	d3.select('#hueSelectorNub').attr('x', hue / 1.8).attr('hue', hue);
	gridImageData(hue);
	d3.select('#accessibilityPath').attr('d', getAccessibilityCurve(hue));
	}

	function updateCurrentColorCircle(currentColor) {
	d3.select('#currentColorCircle')
	.attr('cx', currentColor.s*2)
	.attr('cy', 200 - (currentColor.v*2))
	}

	// Interaction handlers
	d3.select('#hueInput').on('input', function() {
	currentColor.h = this.value;
	update(currentColor, currentTextColor);
	});

	d3.select('#satInput').on('input', function() {
	currentColor.s = this.value;
	update(currentColor, currentTextColor);
	});

	d3.select('#brightInput').on('input', function() {
	currentColor.v = this.value;
	update(currentColor, currentTextColor);
	});

	d3.select('#textHueInput').on('input', function() {
	currentTextColor.h = this.value;
	update(currentColor, currentTextColor);
	});

	d3.select('#textSatInput').on('input', function() {
	currentTextColor.s = this.value;
	update(currentColor, currentTextColor);
	});

	d3.select('#textBrightInput').on('input', function() {
	currentTextColor.v = this.value;
	update(currentColor, currentTextColor);
	});

	}

	function checkColorContrast(hue, x, y) {
	var tempColor = {
	h: hue,
	s: x,
	v: y
	}
	var contrast = getColorContrastHSV(tempColor, currentTextColor);
	return (contrast >= accessibilityValue)
	}

	accessibleColors();
	</script>
	</body>