Bulletproof Contrast.
Absolute Accessibility.
Lumist Lens calculates exact WCAG contrast ratios and applies hardware-accelerated SVG matrix filters to simulate how your design system performs under Protanopia, Deuteranopia, and Achromatopsia.
WCAG 2.1 Math Engine
Calculates mathematically exact relative luminance mapping out all combinations (Background vs Text, Primary vs Accent) to ensure AA and AAA standard conformance.
SVG Matrix Filters
Uses hardware-accelerated SVG `feColorMatrix` transformations to apply physically accurate color-blindness simulations instantly to complex UI components.
Shared IndexedDB State
Seamlessly integrates with Lumist Hue. Any palette you scrape and save in Hue is immediately available in Lens for instantaneous local contrast auditing.
Under the Hood
The architecture powering Lumist Lens.
Relative Luminance
Lens doesn't just guess contrast based on darkness. It applies the official WCAG 2.1 piecewise math formula to calculate the exact relative luminance of sRGB colors before dividing them for a ratio.
SVG feColorMatrix
Instead of using heavy JavaScript canvas processing to alter colors, Lens injects invisible SVG filters into the DOM. These apply color blindness matrices directly on the GPU, allowing complex React components to be simulated with zero lag.
Frequently Asked Questions
Are the color blindness filters permanently modifying my saved palettes?
No. The simulations are purely visual. They use standard CSS `filter: url(#id)` properties to alter how your browser renders the colors on your screen in real-time. Your saved Hex codes are completely untouched.
Is my design data sent to a server for contrast checking?
Absolutely not. Like every app in the Lumist Studio suite, Lens runs 100% locally in your browser. Calculations are performed on your machine, ensuring complete privacy for your client projects.