Add a Color Blind Filter Toggle to Your Squarespace Site

Make your site more inclusive and visually accessible with a one-click filter that simulates common types of colour blindness.

What It Does

This creates a toggle button you can place anywhere on the screen. Visitors can cycle through visual filters that simulate:

• 🟠 Grayscale — Desaturation for total color removal

• 🟥 Deuteranopia — Red-green color confusion

• 🟦 Protanopia — Another type of red-green deficiency

• 🟡 Tritanopia — Blue-yellow color confusion

When active, the filter affects everything on the page — text, images, background colors, even videos — by applying a CSS filter.

👁 Accessibility

Grayscale Deuteranopia Protanopia Tritanopia Reset

Why It Matters

Accessibility isn’t just about screen readers and alt text — colour perception varies dramatically from person to person. This tool helps raise awareness, test colour contrast, or just make your site more usable for color blind visitors.

How to Use It

Simply click the copy code button and paste into a code block, you can add this feature to any page or add it to you sites footer for it to apply globally.

📋 Copy Code

<!-- ♿ Accessibility Filter – drop straight into a Squarespace 7.1 Code Block --> <div style="position:relative;font-family:sans-serif;text-align:center;margin:2em 0;"> <!-- Toggle --> <button id="a11yToggle" aria-controls="a11yDrawer" aria-expanded="false" style="padding:0.6em 1.2em;background:#333;color:#fff;border:none;border-radius:6px;cursor:pointer;"> 👁 Accessibility </button> <!-- Drawer --> <div id="a11yDrawer" style=" max-height:0;overflow:hidden;opacity:0;transform:scaleY(0);transform-origin:top; transition:all .3s ease;" aria-label="Colour‑blindness filters" role="region"> <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;"> <button data-filter="grayscale(1)">Grayscale</button> <button data-filter="url(#deuteranopia)">Deuteranopia</button> <button data-filter="url(#protanopia)">Protanopia</button> <button data-filter="url(#tritanopia)">Tritanopia</button> <button data-filter="none">Reset</button> </div> </div> </div> <!-- SVG filters (unchanged) --> <svg width="0" height="0" style="position:absolute" aria-hidden="true"> <defs> <filter id="deuteranopia"><feColorMatrix type="matrix" values="0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0"/></filter> <filter id="protanopia"><feColorMatrix type="matrix" values="0.567 0.433 0 0 0 0.558 0.442 0 0 0 0 0.242 0.758 0 0 0 0 0 1 0"/></filter> <filter id="tritanopia"><feColorMatrix type="matrix" values="0.95 0.05 0 0 0 0 0.433 0.567 0 0 0 0.475 0.525 0 0 0 0 0 1 0"/></filter> </defs> </svg> <script> const toggle = document.getElementById('a11yToggle'); const drawer = document.getElementById('a11yDrawer'); // show/hide drawer toggle.addEventListener('click', () => { const open = toggle.getAttribute('aria-expanded') === 'true'; toggle.setAttribute('aria-expanded', !open); drawer.style.maxHeight = open ? 0 : '500px'; drawer.style.opacity = open ? 0 : 1; drawer.style.transform = open ? 'scaleY(0)' : 'scaleY(1)'; if (!open) drawer.querySelector('button')?.focus(); }); // ESC closes drawer drawer.addEventListener('keyup', e => { if (e.key === 'Escape') toggle.click(); }); // apply / reset filters drawer.addEventListener('click', e => { if (e.target.dataset.filter === undefined) return; const val = e.target.dataset.filter; document.body.style.filter = val; document.body.style.webkitFilter = val; }); </script>

Notes

• The tool stores your visitor’s last selected mode using localStorage, so it stays consistent across page views.

• SVG filters are used for more accurate color simulations beyond basic grayscale.

Is This Free to Use?

Personal use is free forever.
If you’re using this tool/game on your own blog, portfolio, or personal Squarespace site, you don’t need to pay — enjoy it freely.

Commercial use requires a one-time license.
If you’re a developer, agency, or using this on a client project or monetized site, please purchase a commercial license. It helps support ongoing development and gives you peace of mind.

One-time cost: £49.99 (normally £79.99)
Covers unlimited client sites, all current tools, and future updates.

👉 Learn more or buy a license here

Disclaimer

This script is provided as-is with no guarantees. While it's designed to be safe for most Squarespace sites, always test changes before going live — especially if you’ve installed third-party plugins, custom fonts, or heavy integrations. By using this code, you accept that we are not liable for any unexpected behavior or performance changes.