JSFiddle - React, Tailwind, and code Playground

by Thibaud Colas

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color contrast checker</title>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
  </head>
  <body>
    <div
      class="p-4 text-3xl grid"
      data-target
    >
      <!-- src="https://source.unsplash.com/kGtFjYdm7DI/1600x900" -->
      <img
        src="https://source.unsplash.com/random/600x300"
        crossorigin="anonymous"
        alt=""
        class="my-auto object-cover"
        style="grid-row: 1; grid-column: 1"
      />
      <p class="my-auto" style="grid-row: 1; grid-column: 1">
        <span class="p-1">Target color</span>
      </p>
    </div>
    <pre>
    - http://www.kennethcachia.com/background-check/
    - https://github.com/scottcorgan/contrast
    - https://jariz.github.io/vibrant.js/
    - https://lokeshdhakar.com/projects/color-thief/
    - https://github.com/magica11y/prefers-contrast
    </pre>
    <script>
      const colorThief = new ColorThief();
      const img = document.querySelector("img");

      const rgbToHex = (r, g, b) =>
        "#" +
        [r, g, b]
          .map((x) => {
            const hex = x.toString(16);
            return hex.length === 1 ? "0" + hex : hex;
          })
          .join("");

      function contrast(rgb) {
        var o = Math.round(
          (parseInt(rgb[0]) * 299 +
            parseInt(rgb[1]) * 587 +
            parseInt(rgb[2]) * 114) /
            1000
        );

        return o <= 180 ? "dark" : "light";
      }

      const colorClasses = {
        light: "text-black",
        dark: "text-white",
      };
      
      const contrastifyImage = (img) => {
      	const rgb = colorThief.getColor(img);
        const hex = rgbToHex(...rgb);
        const theme = contrast(rgb);
       ...