Skip to content

For designers / Design Field Kit

Six tools. No fluff.

Small, free tools that keep client sites accessible, readable, documented and worth maintaining. Nothing you type into them is stored.

Tool 01

Color contrast checker

Low contrast text is one of the most common accessibility failures, and accessibility complaints are a real risk for clients. Check every text and background pair before you hand a design over.

Contrast ratio0:1

  • ...Normal text, AA (4.5:1)
  • ...Large text and UI parts, AA (3:1)
  • ...Normal text, AAA (7:1)
  • ...Large text, AAA (4.5:1)

Large text means at least 24px regular or about 18.5px bold. Ratios follow the WCAG 2.2 formula.

Tool 02

Fluid type clamp() generator

Set the smallest and largest size and the screen widths between them. Paste the result into your builder’s font size field or your stylesheet, and the text scales smoothly with no breakpoint jumps.

Narrow screen width
Wide screen width
Leave at 16 unless you changed it

Your clamp() value

font-size: clamp(2rem, 1.2174rem + 3.4783vw, 4rem);

Sizes are in rem so they still respect a visitor’s browser text size setting.

Tool 03

Care plan pricing calculator

Work out what a care plan has to cost per site to cover your time, your tools and the margin you want. It uses only the numbers you enter.

Updates, backup checks, fixes, reports
Total for all sites: backups, security, monitoring
Only if you pay for your clients' hosting

Fill in your own numbers. Nothing is sent anywhere.

Price per site = cost per site divided by (1 minus your margin). Round it to a number you are comfortable saying out loud.

Licenses that cover a set number of sites, lifetime deals, tiers, payment fees or break-even? Use the full care plan calculator.

Rather not run updates and backups yourself? A managed WordPress host can handle that part, so your plan covers design and support. Lone Star Data Ranch, the publisher of this site, is one option: see how they handle maintenance. We say so when we recommend our own hosting.

Tools 04 to 06

Hand clients a manual. Price care plans and projects properly.

  • Tool 04 / Owner’s manual

    Website owner’s manual generator

    Enter a client’s domain and we fill in the host, registrar and renewal date, DNS, email setup, SSL and WordPress details. Add licenses, roles and your routine, then print a branded manual.

    Build a manual
  • Tool 05 / Care plans

    Care plan cost and profit calculator

    Turn your tools, hours and hourly rate into a monthly price per tier, with licenses counted as whole seats or shared by use, plus break-even, a printable summary and a CSV.

    Work out your prices
  • Tool 06 / Project estimates

    Website project estimator

    Quote a build from your own hours and rate: pages, forms, setup, revisions, testing and contingency, with a deposit schedule and a printable estimate.

    Estimate a project
  • Also / Client reports

    White-label client reports

    Run the free website checkup on a client or prospect’s site, then press "Create client report" for a clean, printable report with your name on it.

    Run a checkup

Search the field manual

What is going wrong?

Or jump straight to a symptom

Press / to search from any page, Esc to close