Squint Test

  • Checks for the visual heirarchy of all visible elements.
  • Visually checks for consistent typographic color, or type color.

This mimics the Squint Test for Accessibility to determine type color consistency without causing excessive eye strain.

html {
  filter: blur(.36rem);
  transition: filter .09s ease-out;
}

Toggle it on/off with this bookmarklet script: squint

javascript: (()=>{

let css = `
html {
  filter: blur(.36rem);
  transition: filter .09s ease-out;
}
`;

const injectCSS = css => {
  let el = document.createElement('style');
  el.type = 'text/css';
  el.id='css_injection';
  el.innerText = css;
  document.head.appendChild(el);
};

const swap = () => !document.getElementById('css_injection') ? injectCSS(css) : document.getElementById('css_injection').remove();
const replace = (newCss=css) => {
  css = newCss;
  !document.getElementById('css_injection') ? injectCSS(css) : document.getElementById('css_injection').innerText = css;
};

swap();

})();

Sources: