Add gray scale check and simulate colors

README.md

@@ -31,6 +31,8 @@ First time you start it up you should also run `yarn prep data`
 - [ ] Bug: rotate in polar coordinates doesn't work right
 - [ ] Ad hoc lints seem possible, do a spike
 - [ ] Directional subtlies for aligns, they do not work in polar also
+- [ ] Bug: make a selection. interpolate it. undo the interpolation, crash. Proposed solution: if the number of points changes clear the selection?
+- [x] Show simulated colors on examples, add a gray scale check
 - [x] Bug: if comparing the same palette in two spaces, make a change and the space reverts
 - [x] Compare: should show the values a pal preview
 - [x] Deselect: In the row of colors, clicking on a selected color should deselect it

src/App.svelte

@@ -17,7 +17,6 @@
   import Background from "./components/Background.svelte";
   import SetColorSpace from "./controls/SetColorSpace.svelte";
   import PalPreview from "./components/PalPreview.svelte";
-  import Sort from "./controls/Sort.svelte";
   import SuggestName from "./controls/SuggestName.svelte";
   import GetColorsFromString from "./controls/GetColorsFromString.svelte";
   import NewPal from "./controls/NewPal.svelte";
@@ -68,7 +67,7 @@
         <div class="flex flex-col h-full px-4">
           <!-- naming stuff -->
           <div class="flex justify-between">
-            <div class="flex text-xl">
+            <div class="flex font-bold">
               <span class="italic">Current Pal:</span>
               <div class="flex">
                 <span>✎</span>

src/components/MiniPalPreview.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div class="relative mr-2 mb-2 flex justify-center items-center {className}">
-  <div class="w-full flex absolute top-0 opacity-50 pointer-events-none">
+  <div class="w-full flex absolute top-0 opacity-30 pointer-events-none">
     {#each pal.colors as color}
       <div
         class="h-6"

src/content-modules/ComparePal.svelte

@@ -28,8 +28,8 @@
 
 <div class="flex flex-col" style={`background: ${bg}`}>
   {#if ComparisonPal !== undefined}
-    <div class="text-xl">
-      <span class="italic">Compare Pal: {ComparisonPal.name}</span>
+    <div class="font-bold">
+      <span class="italic">Compare: {ComparisonPal.name}</span>
     </div>
     <div class="flex">
       <SetColorSpace

src/controls/ModifySelection.svelte

@@ -55,7 +55,7 @@
     class:cursor-not-allowed={!buttonsActive}
     on:click={() => focusStore.clearColors()}
   >
-    Clear
+    Deselect
   </button>
   <button
     class={buttonStyle}

src/controls/SetSimulation.svelte

@@ -6,7 +6,7 @@
 
 <Tooltip>
   <div slot="content">
-    {#each ["none", "deuteranopia", "protanopia", "tritanopia", "black-and-white"] as value}
+    {#each ["none", "deuteranopia", "protanopia", "tritanopia", "grayscale"] as value}
       <label>
         <input
           type="radio"

src/example/Example.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { tick } from "svelte";
   import colorStore from "../stores/color-store";
+  import configStore from "../stores/config-store";
   import { Color } from "../lib/Color";
   import Tooltip from "../components/Tooltip.svelte";
   import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
   import focusStore from "../stores/focus-store";
   import { idxToKey } from "../lib/charts";
+  import simulate_cvd from "../lib/blindness";
   export let example: string;
   export let size = 300;
   let focusedColor = false as false | number;
@@ -44,6 +46,16 @@
   }
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
+  $: {
+    if (
+      $configStore.colorSim !== "none" &&
+      $configStore.useSimulatorOnExamples
+    ) {
+      colors = colors.map((x) => simulate_cvd($configStore.colorSim, x));
+    } else {
+      colors = currentPal.colors;
+    }
+  }
   $: bg = currentPal.background;
   $: colors, example, attachListeners();
 

src/example/Examples.svelte

@@ -7,6 +7,7 @@
     modifySVGForExampleStore,
   } from "../stores/example-store";
   import colorStore from "../stores/color-store";
+  import configStore from "../stores/config-store";
 
   import ExampleWrapper from "./ExampleWrapper.svelte";
   import Modal from "../components/Modal.svelte";
@@ -118,7 +119,10 @@
       <div class="flex justify-between">
         <button
           class={buttonStyle}
-          on:click={() => exampleStore.restoreDefaultExamples()}
+          on:click={() => {
+            configStore.setUseSimulatorOnExamples(false);
+            exampleStore.restoreDefaultExamples();
+          }}
         >
           Yes! Reset em now
         </button>
@@ -129,6 +133,21 @@
       Reset to defaults
     </button>
   </Tooltip>
+  {#if $configStore.colorSim !== "none"}
+    <button
+      class={buttonStyle}
+      on:click={() =>
+        configStore.setUseSimulatorOnExamples(
+          !$configStore.useSimulatorOnExamples
+        )}
+    >
+      {#if $configStore.useSimulatorOnExamples}
+        Use original colors
+      {:else}
+        Use simulated colors
+      {/if}
+    </button>
+  {/if}
   {#if numberHidden > 0}
     <Tooltip>
       <div slot="content">

src/example/Swatches.svelte

@@ -2,13 +2,25 @@
   import { Color } from "../lib/Color";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
+  import configStore from "../stores/config-store";
   import Tooltip from "../components/Tooltip.svelte";
   import exampleStore from "../stores/example-store";
   import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
   import { buttonStyle } from "../lib/styles";
+  import simulate_cvd from "../lib/blindness";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
+  $: {
+    if (
+      $configStore.colorSim !== "none" &&
+      $configStore.useSimulatorOnExamples
+    ) {
+      colors = colors.map((x) => simulate_cvd($configStore.colorSim, x));
+    } else {
+      colors = currentPal.colors;
+    }
+  }
   $: bg = currentPal.background;
   $: focused = $focusStore.focusedColors;
   $: focusSet = new Set(focused);

src/lib/blindness.ts

@@ -102,10 +102,10 @@ function blackAndWhite(color: Channels): Channels {
 }
 
 function dl_simulate_cvd(
-  deficiency: DLDeficiency | "black-and-white",
+  deficiency: DLDeficiency | "grayscale",
   color: Channels
 ): Channels {
-  if (deficiency == "black-and-white") {
+  if (deficiency == "grayscale") {
     return blackAndWhite(color);
   }
   return brettelFunctions[deficiency](color);

src/lib/lints/blind-check.ts

@@ -27,7 +27,7 @@ function indexesWithSmallDeltaE(colors: Color[]) {
   return indexes;
 }
 
-function checkType(colors: Color[], type: BlindnessTypes) {
+function checkType(colors: Color[], type: BlindnessTypes | "grayscale") {
   const blindColors = colors.map((x) => simulate_cvd(type, x));
   let notOKColorIndexes: [number, number][] =
     indexesWithSmallDeltaE(blindColors);
@@ -93,4 +93,25 @@ const checks = blindnessTypes.map((key) => {
   };
 });
 
+class Grayscale extends ColorLint<[number, number][], false> {
+  name = `Grayscale friendly`;
+  taskTypes = ["sequential", "diverging", "categorical"] as TaskType[];
+  group: string = "accessibility";
+  description: string = `Colors should be discernable in gray scale. For instance if printing in black and white, colors should still be distinguishable.`;
+  _runCheck() {
+    const colors = this.palette.colors;
+    const { pass, notOKColorIndexes } = checkType(colors, "grayscale");
+    return { passCheck: pass, data: notOKColorIndexes };
+  }
+  buildMessage(): string {
+    const colors = this.palette.colors.map((x) => x.toHex());
+    const pairs = this.checkData
+      .map(([a, b]) => `(${colors[a]} and ${colors[b]})`)
+      .join(", ");
+    return `These color pairs are not distinguishable in grayscale: ${pairs}.`;
+  }
+}
+
+checks.push(Grayscale);
+
 export default checks;

src/linting/Eval.svelte

@@ -151,14 +151,24 @@
   </div>
   <div class="flex flex-col ml-2">
     <div class="overflow-auto h-full max-w-lg">
-      {#if Object.keys(currentPal.evalConfig)}
-        <button
-          class={`${buttonStyle} ml-0 pl-0 mt-4`}
-          on:click={() => colorStore.setCurrentPalEvalConfig({})}
-        >
-          Restore Defaults
-        </button>
-      {/if}
+      <div class="flex">
+        {#if Object.keys(currentPal.evalConfig)}
+          <button
+            class={`${buttonStyle} ml-0 pl-0 mt-4`}
+            on:click={() => colorStore.setCurrentPalEvalConfig({})}
+          >
+            Restore Defaults
+          </button>
+        {/if}
+        {#if $configStore.colorSim !== "none"}
+          <button
+            class={`${buttonStyle} ml-0 pl-0 mt-4`}
+            on:click={() => configStore.setColorSim("none")}
+          >
+            Disable Color Blindness Simulation
+          </button>
+        {/if}
+      </div>
       <div class="text-sm">
         This collection of checks validates whether or not your palette matches
         a number of commonly held beliefs about best practices. They will not

src/linting/EvalResponse.svelte

@@ -59,9 +59,14 @@
     });
   }
 
-  const options = ["deuteranopia", "protanopia", "tritanopia"] as const;
+  const options = [
+    "deuteranopia",
+    "protanopia",
+    "tritanopia",
+    "grayscale",
+  ] as const;
   $: cbMatch = options.find((x) =>
-    check.name.includes(x)
+    check.name.toLowerCase().includes(x)
   ) as (typeof options)[number];
 </script>
 

src/stores/config-store.ts

@@ -5,7 +5,7 @@ interface StoreData {
   controlsOpen: boolean;
   savedPalsOpen: boolean;
   comparePal: number | undefined;
-  colorSim: "deuteranopia" | "protanopia" | "tritanopia" | "none";
+  colorSim: "deuteranopia" | "protanopia" | "tritanopia" | "none" | "grayscale";
   includeQuotes: boolean;
   xZoom: [number, number];
   yZoom: [number, number];
@@ -14,6 +14,7 @@ interface StoreData {
   showColorBackground: boolean;
   tooltipXY?: [string, string];
   scatterplotMode: "moving" | "putting";
+  useSimulatorOnExamples: boolean;
 }
 
 const InitialStore: StoreData = {
@@ -30,6 +31,7 @@ const InitialStore: StoreData = {
   xZoom: [0, 1],
   yZoom: [0, 1],
   zZoom: [0, 1],
+  useSimulatorOnExamples: false,
 };
 const storeName = "color-pal-nav-store";
 
@@ -77,6 +79,8 @@ function createStore() {
       persist((old) => ({ ...old, savedPalsOpen: n })),
     setScatterplotMode: (n: StoreData["scatterplotMode"]) =>
       persist((old) => ({ ...old, scatterplotMode: n })),
+    setUseSimulatorOnExamples: (n: StoreData["useSimulatorOnExamples"]) =>
+      persist((old) => ({ ...old, useSimulatorOnExamples: n })),
   };
 }