Add a Color Blind Filter Toggle to Your Squarespace Site

6 May

Written By JC Pass

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.

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.

<div style="position:relative;font-family:sans-serif;text-align:center;margin:2em 0;">
  
  <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>

<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 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>

// 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 lic ense 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.

JC Pass

JC Pass is a specialist in social and political psychology who merges academic insight with cultural critique. With an MSc in Applied Social and Political Psychology and a BSc in Psychology, JC explores how power, identity, and influence shape everything from global politics to gaming culture. Their work spans political commentary, video game psychology, LGBTQIA+ allyship, and media analysis, all with a focus on how narratives, systems, and social forces affect real lives.

JC’s writing moves fluidly between the academic and the accessible, offering sharp, psychologically grounded takes on world leaders, fictional characters, player behaviour, and the mechanics of resilience in turbulent times. They also create resources for psychology students, making complex theory feel usable, relevant, and real.

https://SimplyPutPsych.co.uk/