The debug tools available for panes contain a wide range of different features to check the quality of your page and the user experience.
You can find the debug tools for each pane by clicking the pen-and-ruler icon above it. 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 and reload it with the "re-apply" button
There are over 40 different debug tools available split into different categories, ranging from color blindness simulators to text contrast checkers to disabling CSS and JS. Do you have an idea for a useful Debug tool? Let us know.
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
For more information on them inside Polypane you can hover the icon to the right of each overlay in the popup.
Contains different tools to analyse the current layout of the page
Quickly find out if elements are where you expect them to be. This debug tool is also available as ⌘ d and you can read more about it on the Layout debugging page.
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.
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.
These debug tools give you ways to assess the accessibility of a page.
Polypane will go through all your text and background combinations and calculate the contrast ratio. All correct ratios are mentioned once, while failing ones are all highlighted everywhere they occur.
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 to preview it, or click it to apply the new styling and copy the suggested color to your clipboard.
Polypane uses a custom-made algorithm to determine the ratio that takes the text color, background colors, text shadow, opacities, filters and text-strokes into account when determining the contrast ratio.
Select AA or AAA to check against WCAG2 AA or WCAG2 AAA level contrast. The default is AA.
Get a visual highlight of the current focused element that follows the focus as you tab from element to element.
The focus order overlay shows you this information as well, but because the Track focus debug tool is dynamic it's better in handling things like focus traps and interactive pages.
Show the z-indices of all visible elements, including if their ancestors have z-indices.
Target size cursor
Replaces your cursor with a square so you can measure if clickable elements are large enough and far enough apart. There are three sizes:
- 48 by 48 pixels: uses the same dimensions and logic that Google uses for their mobile friendly test.
- 44 by 44 pixels: uses the dimensions from WCAG 2.1 SC 2.5.5 and the Apple HIG.
- 24 by 24 pixels: uses the dimensions and logic from WCAG 2.2 SC 2.5.8.
Elements that are too small and too close together (making tapping them hard) are detected and get a red area surrounding them indicating the space they need. Inline elements inside text content are exluded from this check, following the various specifications.
Detect small text
Detects elements that have small text: 12px for any content, and 16px for form elements (to prevent iOS from zooming in your page).
When small text is found, hover over the warning to show an explanation and click the button to increase the font size to 12 or 16 pixels (depending on the type of element) so you can preview its effects.
Text Spacing (WCAG 1.4.12)
Applies the minimum text spacing requirements from the WCAG criterion 1.4.12. Use this to check if any content is lost with these extra settings. Here are the changes it applies:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Highlights all elements that have a
role attribute, showing both the role and the element it's applied to. This helps you verify that the used role is appropriate and applicable for a given element
Show ARIA attributes
Highlights all elements that have aria attributes and lists the attributes and their values.
A11y.css third party
A11y.css will highlight any accessibility mistakes and possible risks on your page.
Tota11y third party
Tota11y is an accessibility visualization toolkit with many different features: list headings and links, check labels and simulate screen readers.
Asses the content itself and the way it influences the page.
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 increase or decrease text 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.
This debug tool has three variant: Less, More and Both. Less only shortens text (to test for languages that need less characters per word), More only lengtens text (to test for languages that need more characters per word). Both is a combination of the two with less extremes.
When active a warning icon is shown next to the pane title, and the entire pane has a red border.
Hostile CSS will set ugly styles for all your default elements so you can see how well your component styles are isolated.
Placeholdifier third party
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.
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.
Turn off different features to test the resilience of your page.
Disable CSS will remove all CSS from stylesheets and style attributes on your page. When active a warning icon is shown next to the pane title, and the entire pane has a red border.
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.
Hide the cursor in this pane to test keyboard accessibility without cheating.
Polypane simulates different types of impairments, permanent or situational, that lets you test your pages in different scenarios.
A note on color blindness
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.
Between the simulators ending in "*omaly" and "*opia", the "*opia" ones count as "full" color blindness for that type, while "*omaly" is a milder version.
The chosen values for the "*omaly" options are averages but people with "*omaly" color blindness can be at any place on the spectrum between no color blindness and full color blindness, so be aware of that. Additionally, it's important to realise that these simulators only simulate, and will actually differ from what any individual with a color deficiency will see. Use these simulators to make broad changes for things clearly broken, rather than making small tweaks to something you find aestetically pleasing.
For more info about the color blindness simulators, read our article Developing for color blindness with Polypane.
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 (interactive) Blurs vision, especially around the peripheral vision. Use your cursor to bring different parts of the page into focus. The page remains interactive.
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).
Macular degeneration Loss of central vision.
Photophobia A sensitivity to light.
Colors get washed out and low contrast parts of your page become invisible when watching a screen in bright sunlight.
Emulates a desktop screen at 40% brightness or a mobile phone with brightness turned all the way down.
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.
Have a question about Polypane?
Contact us any time though chat, Slack or our contact form:Contact Support
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed