Design

Design helpers for contrast, colour and accessibility, so what you build is readable for everyone.

12 free tools in this category. See every tool on Lelifi.

• Aspect Ratio CalculatorEnter a width and height to get the exact aspect ratio, the decimal form and the
• Color Contrast CheckerCheck the contrast ratio between any two colors and see instantly whether they p
• Color Picker and Contrast CheckerPick a color and read it as HEX, RGB and HSL, then see its contrast ratio agains
• Crop Factor and Equivalent Focal Length CalculatorEnter a lens and a sensor size to get the crop factor, the full-frame equivalent
• Hex to RGB ConverterConvert any hex color to RGB, RGBA and HSL in one step. Handles 3, 4, 6 and 8 di
• Image File Size CalculatorCalculate an image's file size from its pixel dimensions, colour depth and compr
• Image Ratio CalculatorFind any image's aspect ratio, the exact scale factor, and the pixels you get wh
• Mouse DPI CalculatorConvert mouse DPI and in-game sensitivity into eDPI and cm per 360 turn. 800 DPI
• PPI CalculatorEnter a screen resolution and diagonal to get pixels per inch, dot pitch in mill
• Pixels to Print Size CalculatorConvert pixels to inches at any DPI: see the print size a file covers, the DPI l
• Portrait Aspect Ratio CalculatorConvert any width or height into portrait aspect ratios: 4:5, 2:3, 3:4, 5:7 and
• RGB to Hex ConverterTurn any RGB color into a hex code, with optional alpha, 3 digit shorthand and c

Design decisions are easier to defend when you can put a number behind them. Two checks catch the problems that are hardest to see on a designer's bright monitor: text that disappears for readers with low vision, and images that are far heavier than they need to be.

Contrast you can measure

The WCAG standard sets a minimum contrast ratio for readable text. Normal text needs 4.5:1 for AA and 7:1 for AAA, while large text, which is 18 point or bold 14 point, needs 3:1 for AA. A light gray like #999999 on white is only 2.85:1 and fails even at large size. Mid gray #767676 reaches 4.54:1, passing AA, and dark gray #595959 hits 7:1 for a clean AAA. That 4.5 figure is not arbitrary. Around one in twelve men and one in two hundred women have some color vision deficiency, and contrast sensitivity falls with age, so a pairing that looks crisp to you can be unreadable to a large share of your visitors. Icons, input borders and focus rings also need 3:1 under a related rule.

Image weight you can predict

• The math: a 4000 by 3000 photo is 12 million pixels, so 24-bit color is 36 MB uncompressed.
• Compression: a JPEG at quality 85 lands near 7 MB and a PNG near 18 MB for the same image.
• Print: 300 DPI needs 2,400 by 3,000 pixels for an 8 by 10 print.
• Cards: a 64 GB card holds about 6,700 photos at 9 MB each.

The common mistake is exporting one large image and shrinking it on the page. Match the file to the display size instead.