About CostUI

Building an interface means making the same small decisions over and over. Does this text have enough contrast on its background? What is 18px in rem at our root size? What font sizes belong in the heading scale, and what ratio ties them together? How do I turn one brand color into a usable set of tints and shades? What spacing values keep the layout on a grid? And what height does a 16:9 hero need at this width? None of these are hard, but answering them by hand, on every screen, is where consistency quietly slips.

CostUI is built around small, single-purpose calculators, each aimed at one of those recurring decisions. The Color Contrast Checker takes two hex colors and reports the WCAG 2.1 contrast ratio, with a pass or fail for AA and AAA at normal and large text sizes. The PX to REM Converter converts either direction around whatever root font size your project uses, with a reference table of common sizes. The Type Scale Generatorturns a base size and a ratio — from the minor third up to the golden ratio — into a modular scale in px and rem. The Color Shades Generator expands a single base hex into a ramp of tints and shades you can paste straight into a palette. The Spacing Scale Generator builds a consistent linear or geometric spacing scale from a base unit, and the Aspect Ratio Calculator solves a missing width or height for any ratio and reduces a pixel size to its simplest ratio with the greatest common divisor.

Every calculator runs entirely in your browser using the standard formulas — the WCAG relative-luminance and contrast-ratio equations, simple px ÷ root arithmetic, base × ratio exponents for the type scale, linear RGB mixing for tints and shades, and Euclid’s algorithm for reducing ratios. There is no account, nothing to install, and nothing you enter is sent anywhere.

Beyond the calculators, the blog and learnsection cover color and accessibility, typography, spacing, design systems, and front-end CSS — the reasoning behind the numbers the tools produce. There is also a browsable museum of illustrated collections, with every entry, image, and fact drawn from Wikipedia and Wikimedia Commons, for when you want a break from the pixels.

A few things worth stating plainly. CostUI is an independent site, not affiliated with the W3C, the WCAG working group, or any design-tool or framework vendor it references. It is supported by advertising, which is how the tools stay free with no account required. Every result the tools produce is a general estimate based on the values you enter and standard formulas, not a compliance ruling or professional advice — for an accessibility decision that matters, verify against real WCAG tooling and test with actual users and assistive technology. If a tool looks wrong, or there is a calculator you wish existed here, the contact page is the place to say so.