colorsight

Simulate color blindness on images. Zero dependencies. Works in browsers, Node.js, and serverless.

Uses Machado et al. (2009) color transformation matrices — the most accurate simulation method available.

Install

npm install colorsight

Usage

Core (universal)

Works anywhere JavaScript runs. Operates on raw pixel arrays.

import { simulate } from "colorsight";

const pixels = new Uint8ClampedArray([255, 0, 0, 255]); // RGBA
const results = simulate(
  { data: pixels, width: 1, height: 1 },
  ["protanopia", "deuteranopia"],
);

// results[0].type  → "protanopia"
// results[0].data  → Uint8ClampedArray (simulated pixels)
// results[0].width / results[0].height

Browser

Accepts HTMLImageElement, HTMLCanvasElement, or ImageData. Returns data URLs.

import { simulateImage } from "colorsight/browser";

const img = document.querySelector("img");
const results = simulateImage(img, ["protanopia", "deuteranopia"]);

results.forEach((r) => {
  const el = document.createElement("img");
  el.src = r.dataUrl;
  document.body.appendChild(el);
});

Node.js

Pair with sharp, jimp, or any image decoder.

import sharp from "sharp";
import { simulatePixels } from "colorsight/node";

const { data, info } = await sharp("photo.png")
  .raw()
  .ensureAlpha()
  .toBuffer({ resolveWithObject: true });

const results = simulatePixels(
  { data: new Uint8ClampedArray(data.buffer), width: info.width, height: info.height },
  ["protanopia", "deuteranopia"],
);

// results[0].pixels.data → Uint8ClampedArray

Supported Types

| Type | Description | Prevalence | |------|-------------|------------| | protanopia | No red cones | ~1.3% of males | | deuteranopia | No green cones | ~1.2% of males | | tritanopia | No blue cones | ~0.001% | | protanomaly | Weak red cones | ~1.3% of males | | deuteranomaly | Weak green cones | ~5% of males | | tritanomaly | Weak blue cones | Very rare | | achromatopsia | No color vision | ~0.003% | | achromatomaly | Reduced color vision | Very rare |

API

simulate(input, types)

Core function. Takes raw pixel data, returns simulated pixel data.

• input: { data: Uint8ClampedArray, width: number, height: number }
• types: ColorBlindType[]
• Returns: SimulationResult[]

simulateImage(source, types, maxWidth?) (browser)

• source: HTMLImageElement | HTMLCanvasElement | ImageData
• types: ColorBlindType[]
• maxWidth?: number (default: 800, for performance)
• Returns: { type, dataUrl, imageData }[]

simulatePixels(input, types) (node)

• input: { data: Uint8ClampedArray, width: number, height: number }
• types: ColorBlindType[]
• Returns: { type, pixels }[]

TYPES

Array of all 8 simulation types with label, description, type, and prevalence.

getMatrix(type, severity?)

Get the raw 3x3 transformation matrix for a color blindness type. Severity 0-1 (default: 1.0).

AI Integration

See llms.md for an AI-friendly prompt you can give to your coding assistant to integrate colorsight into your project.

License

MIT