Our Debug tools are a powerful way to check your website using various simulators (like color blindness or dyslexia) or to check your site for things like text contrast, layout issues and other accessibility concerns. There are over a dozen different simulators available to use.
You can find the debug tools for each pane above the pane size, by clicking the pen-and-ruler icon. If a debug tool is active for the current pane, a blue dot will be displayed.
When a debug tool is active, you can clear it with the "X [debug tool]" button at the top of the popup, or reload it with the "re-apply" button
Do you have an idea for a useful Debug tool? Let us know.
Debug tools were called "overlays" before Polypane 4
Polypane is filled with accessibility features. We wrote a full overview on our blog: Find and fix accessibility issues with Polypane.
Overview of all Debug tools
Polypane has over 25 Debug tools and simulators. Below we list them all.
For more information on them inside Polypane you can hover the icon to the right of each overlay in the popup.
The debug tools give you insight into how your page is built.
Quickly find out if elements are where you expect them to be.
Horizontal overflow detection
Elements that cause a horizontal scroll bar/horizontal overflow are highlighted in red, making it easy to spot them. Read more about detecting horizontal overflows.
Polypane will go through all your text and background combinations and calculate the contrast ratio. All correct ratios are mentioned once, whole the failing ones are all highlighted.
Hover over any of the failing ratios that have an arrow to see the suggested alternative color. You can hover over that suggested alternative color and we'll apply it to the text so you get an instant preview along with the new ratio, or click it to copy the suggested color to your clipboard.
Edit content makes the entire page editable so you can quickly try out new content and see how it looks.
Polypane automatically turns on spell checking when you're in edit content mode.
The readability debug tool will calculate how difficult each sentence on your page is. Darker, redder sentences are harder to understand while lighter, greener sentences are easier to read. We calculate this using the Automated Readability Index (ARI), which works well for most western, European languages. For pages in Arabic it uses the Automatic Arabic Readability Index (AARI).
If you know of Readability Index formulas for other languages, please contact us.
Content chaos test
Content chaos test will randomly halve, double or triple areas of content so you can check how well your layout handles these situations. Can be used to check if you layout can handle different languages or longer and shorter content.
A11y.css will highlight any accessibility mistakes and possible risks on your page.
Tota11y is an accessibility visualization toolkit with many different features: list headings and links, check labels and simulate screen readers.
Show the z-indices of all visible elements, including if their ancestors have z-indices.
With audible changes, Polypane will sounds a beep whenever the page changes. A nice way to figure out when your page is too busy, or making changes when it does not have to.
Hostile CSS will set ugly styles for all your default elements so you can see how well your component styles are isolated.
Disable CSS will remove all CSS from stylesheets and style attributes on your page.
Disable Images will hide all images and background images on your page. You can use this to test your email rendering for email clients that block images or to check if your layout doesn't break when images are missing.
Placeholdifier replaces all your content (text, images and videos) with placeholders, so the content of a design doesn't distract from the design itself. inbetween a wireframe and a finished site.
Reachability overlays a color map to show how easy it is to reach parts of the screen. It's calibrated for the mobile device sizes in Polypane and comes in a right hand and left-hand version.
Draws scrollbars on the page where they are shown on regular browsers on Windows and Linux (and Mac with an external mouse) but aren't needed.
Target size cursor
Replaces your cursor with a 44 by 44 pixel square so you can measure if clickable elements are large enough and far enough apart.
Polypane simulates different types of impairments, permanent or situational, that lets you test your pages in different scenarios
We simulate all 8 types of color blindness. Together they affect roughly 1 in 12 men (8%) and one in 200 women in the world. The simulators ending in "omaly" are a rough indicators. People diagnosed with *omaly see on a range between regular vision, and the one ending in *opia. Our *omaly simulator sit roughly in the middle, so be aware of that.
Red-green color blindness
The most common forms or color blindness all fall under Red-Green color blindness:
Blue-yellow color blindness
Less prevalent are Blue-yellow colorblindness. 0.02% of the worldwide population has this.
Full color blindness
Full, or near-full loss of color is incredibly rare and affects less than 0.0001% of worldwide population.
Other visual impairments usually blur or dull someone's vision. As people get older, these become more prevalent.
Cataracts Blurs and clouds vision
Glaucoma Blurs vision, especially around the peripheral vision
Farsightedness Makes it difficult to see details up close.
Astigmatism Blurring and ghosting of the vision in a single direction. Polypane has emulation for horizontal and vertical astigmatism.
Tunnel vision Tunnel vision is the loss of peripheral vision, leaving just the center of your vision. It has a wide range of causes, from permanent (advanced Glaucoma) to temporary (altitude sickness) to situatonal (wearing goggles).
Colors get washed out and low contrast parts of your page become invisible when watching a screen in bright sunlight.
Many devices have a night mode, that lowers the blue colors and increases the red colors for a more pleasant display when there is less light.
Dyslexia affects 5 to 10% of the population worldwide, but it might be as high as 17% as not all dyslexia is diagnosed.
There is no single way to simulate dyslexia as it affects different people in different ways. Our simulator makes you aware of the reading difficulty it brings.
Add your own
Do you have an idea for a useful Debug tool? Let us know.
Is your question not answered?
Ask via Twitter, Slack or our contact form