[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"tool-content-en-color-blindness-simulator":3},{"id":4,"title":5,"body":6,"description":62,"extension":63,"locale":64,"meta":65,"navigation":66,"path":67,"seo":68,"stem":69,"toolId":70,"__hash__":71},"tools\u002Ftools\u002Fen\u002Fcolor-blindness-simulator.md","Color Blindness Simulator",{"type":7,"value":8,"toc":55},"minimark",[9,14,18,21,25,28,32,35,52],[10,11,13],"h2",{"id":12},"what-this-tool-does","What this tool does",[15,16,17],"p",{},"Roughly 8% of men and 0.5% of women have some form of color vision deficiency. This simulator shows what an image or a color pair looks like through each of the three main types, so you can catch interfaces that only differ by hue before your users do.",[15,19,20],{},"Simulation uses the Machado, Oliveira & Fernandes (2009) matrices — the same physiologically-based model used in academic visualization research — with an adjustable severity from 0% (normal vision) to 100% (full dichromacy).",[10,22,24],{"id":23},"image-mode","Image mode",[15,26,27],{},"Drop an image and it renders twice side by side: the original and the simulated version. Pick the vision type and drag the severity slider to see how the image breaks down. The simulated result can be downloaded as a PNG. Decoding keeps EXIF orientation, so photos are not sideways.",[10,29,31],{"id":30},"color-mode","Color mode",[15,33,34],{},"Two checks for design work:",[36,37,38,46],"ul",{},[39,40,41,45],"li",{},[42,43,44],"strong",{},"Single color"," — pick any color and see its value under all three types at once, next to the original.",[39,47,48,51],{},[42,49,50],{},"Pair check"," — enter two colors and read their CIELAB (ΔE) difference before and after simulation. When most of the difference disappears (below 40%), the pair is reported as indistinguishable and you should fall back on text, icons, or lightness instead. This catches the classic trap where success-green and error-red differ only in hue — a pair that survives luminance-only contrast checks but collapses for red-green color blindness.",[15,53,54],{},"All processing happens in your browser; images are never uploaded.",{"title":56,"searchDepth":57,"depth":57,"links":58},"",2,[59,60,61],{"id":12,"depth":57,"text":13},{"id":23,"depth":57,"text":24},{"id":30,"depth":57,"text":31},"See images and color pairs through protanomaly, deuteranomaly, and tritanomaly, with a perceptual difference check. Runs locally.","md","en",{},true,"\u002Ftools\u002Fen\u002Fcolor-blindness-simulator",{"title":5,"description":62},"tools\u002Fen\u002Fcolor-blindness-simulator","color-blindness-simulator","nVy0OjP_DKvxuKuVH9OOvYmmmcb7WLpIebfM5QHeVP0",1792391416806]