Hey Loura Code Sandbox

/*
  Update common values here
*/
const iterateOn = 17; // choose a value between 0 and 255
const minimumJointContrast = 3.0;

// Begin code
const results = document.getElementById('results');

function getHexColorAsRgb(input) {
  const color = input.value
  const r = parseInt(color.substr(1,2), 16);
  const g = parseInt(color.substr(3,2), 16);
  const b = parseInt(color.substr(5,2), 16);
  return [r,g,b];
}

// Code adapted from https://stackoverflow.com/a/9733420
function getContrasts() {
  const RED = 0.2126;
  const GREEN = 0.7152;
  const BLUE = 0.0722;

const GAMMA = 2.4;

function luminance(r, g, b) {
    var a = [r, g, b].map((v) => {
      v /= 255;
      return v <= 0.03928
        ? v / 12.92
        : Math.pow((v + 0.055) / 1.055, GAMMA);
    });
    return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
  }

function contrast(rgb1, rgb2) {
    var lum1 = luminance(...rgb1);
    var lum2 = luminance(...rgb2);
    var brightest = Math.max(lum1, lum2);
    var darkest = Math.min(lum1, lum2);
    return (brightest + 0.05) / (darkest + 0.05);
  }
  
  var found = false;
  for (let b = 0; b < 255; b += iterateOn) {
    for (let g = 0; g < 255; g += iterateOn) {
      for (let r = 0; r < 255; r += iterateOn) {
          let color1 = getHexColorAsRgb(document.getElementById('color1'));
          let color2 = getHexColorAsRgb(document.getElementById('color2'));
          let color1Contrast = contrast(color1, [r, g, b]);
          let color2Contrast = contrast(color2, [r, g, b]);

if(color1Contrast > minimumJointContrast && color2Contrast > minimumJointContrast) {
              found = true;
              results.insertAdjacentHTML('beforeend',`<tr>
                  <td style="background-color:rgb(${r}, ${g}, ${b});color:canvastext">rgb(${r}, ${g}, ${b})</td>
                  <td style="background-color:rgb(${[...color1]});color:rgb(${r}, ${g}, ${b})">${color1Contrast}</td>
                  <td style="background-color:rgb(${[...color2]});color:rgb(${r}, ${g}, ${b})">${color2Contrast}</td>
                  </tr>`);
          }
      }
    }
  }
  if(!found) {
    results.insertAdjacentHTML('beforeend',`<tr>
      <td>No results found</td>
      </tr>`);
  }
}
// call right now
if(iterateOn < 0 || iterateOn > 255) {
  alert('iterateOn is misconfigured');
} else {
  getContrasts();
}

// call again when colors change
document.addEventListener("change", function(event){
  if(event.target.getAttribute('id') == 'color1' || event.target.getAttribute('id') == 'color2') {
    results.innerHTML = ``;
    if(iterateOn < 0 || iterateOn > 255) {
      alert('iterateOn is misconfigured');
    } else {
      getContrasts();
    }
  }
});
window.parent.postMessage({
  'msg': 'done'
}, "*");