ExpertToolkitAll widgets
Widgets / material-density
Industrial

Embed the Material Density Converter

Tons ↔ cubic yards ↔ gallons for 119 real materials, from ready-mix concrete to diesel. Densities are sourced and carry their measured range, so a gravel estimate is not a single made-up number.

Free for personal and commercial sites. Keep the caption credit that ships with the snippet. See the full tool.

Loading widget…

What your page receives

Use the widget above. Every result fires an event your site can hook for lead capture or analytics — this is exactly the payload.

// change a value in the widget…
ExpertToolkit.on("calculate", (e) => crm.capture(e.inputs))

Your snippet

The SEO block lives in your page, not the iframe — so the content and its FAQ markup count as yours.

Appearance

5.40:1All text passes AA
  • AaBody text on the card17.85:1
  • AaSecondary text on the card5.40:1
  • AaText inside inputs16.38:1
  • AaThe answer, on its card5.62:1

Measured on the colours this configuration actually renders, not on a fixed reference. Everything here is derived to pass — a failure means a colour you pinned by hand cannot be corrected without overriding your choice.

Brand

auto follows the visitor's system setting.

Result emphasis and buttons. Contrast is checked live.

12px

Locally-available stacks only — nothing is downloaded, so the widget never adds a request to your page.

Your colour is kept, but darkened or lightened just enough to clear WCAG AA against the background. It cannot come out unreadable.

Layout & spacing

Stacked forces one column at every width.

100%
16px
Background & surface

Tints the whole widget toward your page's colour and picks light or dark to match. Only the hue is taken — lightness is clamped, so the widget stays readable whatever you pick. Left automatic, the loader measures your page for you.

A colour is used exactly as picked — text and inner surfaces are re-derived from it, so any colour stays readable. Transparent blends the card into your page.

1px

Honoured exactly — a border is decorative, so it is never adjusted.

Controls & result

Background for inputs, panels and the result card. Text sitting on it gets its own contrast check, so it stays readable even if it contrasts with the card.

Borders around inputs, selects and panels. Honoured exactly.

12px

How much the answer outweighs the inputs. The answer is why the visitor is here — err large.

Auto keeps each widget's own default; the other two apply everywhere.

Accessibility & behaviour

High swaps in a stronger semantic palette throughout.

Reduced also applies for visitors whose OS asks for it, regardless of this setting.

The caption credit below the widget stays — that is the deal for the free tier.

Installing it

1. Paste the snippet

Any HTML block — WordPress, Squarespace, Wix, Webflow, or a hand-built page. Nothing to install, no API key.

2. It sizes itself

The loader keeps the frame exactly as tall as the content, so it never scrolls oddly on mobile and never shifts your layout.

3. Hook the results

ExpertToolkit.on("calculate", …) fires whenever a visitor gets an answer — wire it to your CRM, analytics, or quote form.