Simulador de Daltonismo - Test de Accesibilidad de Color Online
Simula cómo ven los colores personas con protanopía, deuteranopía y tritanopía. Verifica ratios de contraste WCAG para diseño web accesible.
Preguntas Frecuentes
¿Qué es un simulador de daltonismo?
Un simulador de daltonismo es una herramienta en línea que muestra cómo los colores y las imágenes aparecen para las personas con deficiencia de visión del color (CVD). Aplica algoritmos científicamente validados para transformar colores, ayudando a diseñadores y desarrolladores a entender cómo su contenido visual es percibido por aproximadamente el 8% de los hombres y el 0.5% de las mujeres que tienen alguna forma de daltonismo.
¿Cómo uso esta herramienta?
Esta herramienta tiene dos modos. Modo Color: ingrese colores de primer plano y fondo usando valores HEX, valores RGB o el selector de color, y la herramienta muestra instantáneamente cómo estos colores aparecen bajo los 8 tipos de deficiencia de visión del color junto con las relaciones de contraste WCAG. Modo Imagen: suba una imagen (arrastrar y soltar o explorar archivos), seleccione un tipo de CVD y vea la versión simulada junto a la original. Puede descargar la imagen simulada para documentación o presentaciones.
¿Están seguros mis datos? ¿Se envían a un servidor?
Sus datos están 100% seguros y nunca salen de su navegador. Todos los cálculos de color, la verificación de contraste WCAG y el procesamiento de imágenes se realizan completamente en el lado del cliente usando JavaScript y la API Canvas. No se transmiten colores ni imágenes a ningún servidor, lo que hace que esta herramienta sea segura para probar diseños propietarios, activos de marca confidenciales y contenido visual sensible.
¿Cuáles son los 8 tipos de deficiencia de visión del color?
Los 8 tipos son: Protanopía (sin conos rojos, los rojos aparecen oscuros), Deuteranopía (sin conos verdes, la dicromacia más común), Tritanopía (sin conos azules, confusión azul-amarillo), Protanomalía (sensibilidad roja reducida, los rojos aparecen más débiles), Deuteranomalía (sensibilidad verde reducida, la CVD más común que afecta al ~5% de los hombres), Tritanomalía (sensibilidad azul reducida, muy rara), Acromatopsia (daltonismo completo, solo ve en escala de grises) y Acromatonomalía (daltonismo parcial, percepción del color severamente reducida).
¿Cómo funciona el verificador de contraste WCAG con la simulación de daltonismo?
La herramienta calcula la relación de contraste estándar WCAG 2.1 entre sus colores de primer plano y fondo, luego recalcula el contraste después de aplicar cada simulación de CVD. Esto revela casos donde un par de colores pasa los estándares WCAG para visión normal pero falla para personas con deficiencia de visión del color, una perspectiva crítica para un diseño verdaderamente accesible.
¿Qué algoritmos de simulación usa esta herramienta?
Esta herramienta usa algoritmos revisados por pares y científicamente validados: Brettel, Vienot y Mollon (1997) para tipos de dicromacia (Protanopía, Deuteranopía, Tritanopía) y Machado, Oliveira y Fernandes (2009) para tipos de tricromacia anómala (Protanomalía, Deuteranomalía, Tritanomalía). La Acromatopsia usa ponderación de luminancia ITU-R BT.709. Todas las transformaciones se realizan en espacio de color RGB lineal para mayor precisión.
¿Puedo probar imágenes con esta herramienta?
Sí. La pestaña Imagen le permite subir imágenes (JPG, PNG, WebP, GIF) de hasta 4096x4096 píxeles. La herramienta usa la API Canvas para aplicar simulación CVD a nivel de píxel, mostrando las imágenes original y simulada una al lado de la otra. Puede descargar la imagen simulada para usarla en auditorías de accesibilidad o documentación.
¿Cuál es la diferencia entre los tipos -anopía y -anomalía?
El sufijo "-anopía" significa ausencia completa de un tipo de cono (dicromacia), mientras que "-anomalía" significa sensibilidad reducida (tricromacia anómala). Por ejemplo, Protanopía significa que no hay conos rojos en absoluto, mientras que Protanomalía significa que los conos rojos están presentes pero con sensibilidad alterada. Los tipos de anomalía son generalmente más leves y más comunes que los tipos de anopía.
Ejemplos de Codigo
// Color Blindness Simulator - JavaScript Implementation
/**
* sRGB to Linear RGB conversion
*/
function srgbToLinear(c) {
const v = c / 255;
return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
}
function linearToSrgb(c) {
const v = Math.max(0, Math.min(1, c));
return Math.round(
(v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255
);
}
/**
* CVD simulation matrices (Brettel 1997 / Machado 2009)
* Each is a 3x3 matrix stored as flat array [row-major]
*/
const CVD_MATRICES = {
protanopia: [
0.152286, 1.052583, -0.204868,
0.114503, 0.786281, 0.099216,
-0.003882, -0.048116, 1.051998,
],
deuteranopia: [
0.367322, 0.860646, -0.227968,
0.280085, 0.672501, 0.047413,
-0.011820, 0.042940, 0.968881,
],
tritanopia: [
1.255528, -0.076749, -0.178779,
-0.078411, 0.930809, 0.147602,
0.004733, 0.691367, 0.303900,
],
achromatopsia: [
0.2126, 0.7152, 0.0722,
0.2126, 0.7152, 0.0722,
0.2126, 0.7152, 0.0722,
],
};
/**
* Simulate color vision deficiency for a single RGB color
* @param {number} r - Red (0-255)
* @param {number} g - Green (0-255)
* @param {number} b - Blue (0-255)
* @param {string} cvdType - CVD type key
* @param {number} severity - 0.0 to 1.0
* @returns {number[]} Simulated [r, g, b]
*/
function simulateColor(r, g, b, cvdType, severity = 1.0) {
const matrix = CVD_MATRICES[cvdType];
if (!matrix) throw new Error(`Unknown CVD type: ${cvdType}`);
// Convert to linear
const lr = srgbToLinear(r);
const lg = srgbToLinear(g);
const lb = srgbToLinear(b);
// Apply matrix
const sr = matrix[0] * lr + matrix[1] * lg + matrix[2] * lb;
const sg = matrix[3] * lr + matrix[4] * lg + matrix[5] * lb;
const sb = matrix[6] * lr + matrix[7] * lg + matrix[8] * lb;
// Lerp with original for severity
const fr = lr * (1 - severity) + sr * severity;
const fg = lg * (1 - severity) + sg * severity;
const fb = lb * (1 - severity) + sb * severity;
return [linearToSrgb(fr), linearToSrgb(fg), linearToSrgb(fb)];
}
/**
* Calculate WCAG 2.1 contrast ratio
*/
function getContrastRatio(fg, bg) {
const lum = (r, g, b) =>
0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
const l1 = lum(...fg);
const l2 = lum(...bg);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
/**
* Check WCAG compliance
*/
function checkWCAG(ratio) {
return {
aa: { normalText: ratio >= 4.5, largeText: ratio >= 3 },
aaa: { normalText: ratio >= 7, largeText: ratio >= 4.5 },
};
}
// Usage
const fg = [255, 102, 0]; // Orange
const bg = [255, 255, 255]; // White
console.log("Original contrast:", getContrastRatio(fg, bg).toFixed(2) + ":1");
const cvdTypes = ["protanopia", "deuteranopia", "tritanopia", "achromatopsia"];
for (const type of cvdTypes) {
const simFg = simulateColor(...fg, type);
const simBg = simulateColor(...bg, type);
const ratio = getContrastRatio(simFg, simBg);
const wcag = checkWCAG(ratio);
console.log(`${type}: ${ratio.toFixed(2)}:1 (AA: ${wcag.aa.normalText ? "PASS" : "FAIL"})`);
}