Interactive Design Tools
Two small utilities for checks that come up in almost every interface project. Both run entirely in your browser, need no account, and explain the formula they use on their own page, so you can verify the result by hand.
Guides That Pair With These Tools
The tools give you the number; these guides give you the judgment behind it.
PX vs REM vs EM: How to Choose CSS Units
Which unit for type, spacing, and breakpoints, and the WCAG resize rule the choice hangs on.
Chart Color Accessibility Checklist
Contrast pairs, redundant encoding, and direct labels for charts every reader can use.
SVG, PNG, JPEG, WebP or AVIF
Pick the right image format every time, with file sizes measured on the same images.
Why only two tools
These two checks are specific to design and front-end work and come up on almost every project, so they live here, next to the guides that explain them. General-purpose calculators (percentages, aspect ratios, unit conversions outside CSS) are better served by a dedicated calculator site, and we do not duplicate them. Each tool page states the formula it uses, works an example with stated inputs, and lists its assumptions and limits, so a result can be checked by hand rather than taken on trust.
The contrast checker applies the relative luminance and contrast ratio definitions from WCAG 2.2 and reports against the 4.5:1, 3:1 and 7:1 thresholds. It is useful for a single text and background pair; for a whole palette, the accessible color systems guide shows how to build ramps that pass by construction. The px to rem converter divides by the root font size your stylesheet produces, which is 16px only when the reader and your CSS leave the default alone; the CSS units guide explains when rem, em or px is the right unit.
Both tools run entirely in your browser. Nothing you enter is sent to a server or stored, and neither needs an account. If a result looks wrong, send the inputs you used through the contact form and we will check the calculation against the specification.