Simulates how uploaded images appear to people with various types of colour vision deficiency: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), Protanomaly/Deuteranomaly/Tritanomaly (partial deficiencies), and Achromatopsia (monochromacy). Uses scientifically validated colour transformation matrices applied via a canvas element. Useful for designing accessible UIs.
Upload an image and click a colour blindness type to see how it appears to affected viewers. Use the Color Contrast Checker to verify your colour pairs meet WCAG contrast requirements for all users.
UI screenshot
Input
screenshot.png + Deuteranopia
Output
[transformed image showing green-red affected colours]
Check WCAG AA and AAA contrast ratios for foreground and background colours.
Generate harmonious colour palettes from a base colour.
Convert colour values between Hex, RGB, HSL, and HSB formats.
Generate linear, radial, and conic CSS gradients with live preview.
Create CSS box shadows with live preview and code output.
Generate CSS border-radius values visually.
Click to upload an image to simulate