Blogs
How to do the job, and what we measured while building the tool that does it.
Colour
How to find the name of a colour, and tell how close the name really is
Name any hex code from four lists at once, read the CIEDE2000 distance beside each name, and know when a CSS keyword can stand in for your colour.
Complementary, triadic and analogous colours: how to make each harmony readable
Complementary is 180°, triadic 120°, analogous ±30°. All are hue relations, so none guarantees contrast. How to build each and keep text readable.
How to convert HEX to RGB, HSL and OKLCH, and which one to paste where
Which colour notation to paste where: HEX for CSS, no-hash HEX for Figma, RGB for transparency, OKLCH for tokens, and why CMYK is only a starting point.
How to make a custom Tailwind colour scale that passes contrast
Build an eleven-step Tailwind scale, export it as a v4 @theme block or v3 config, and see which steps pass contrast on white, on black and in components.
How to pull a colour palette from a photo, and check it can carry text
Extract a palette from a photo without uploading it: what Dominant, Distinct and Accessible compute, and why photo colours often fail as text on white.
How to generate a colour palette you can actually set text in
A colour's contrast on white times its contrast on black is always 21, so every colour passes one. How to generate a palette that pairs with itself.
How to turn one brand colour into design tokens, 50 to 950
One brand hex to an eleven-step ramp and role tokens: which step becomes text, border and surface, why your exact hex is not in it, and what to export.
How to build an accessible palette from a single brand colour
Turn one brand hex into a full system — a lightness ramp, semantic tokens, and light and dark variants that all pass contrast.
Bootstrap and Tailwind status colours fail for colour-blind users
We measured the default red and green status colours in Bootstrap and Tailwind under simulated colour vision deficiency. Both collapse to near-identical.
How to build a colour-blind safe palette
Which colour pairs survive colour vision deficiency, which collapse, and how to build a categorical palette that works for everyone.
Put contrast checking in CI so it fails the build
Manual contrast review does not scale and gets skipped under deadline. Here is how to assert your design tokens in a test suite instead.
Dark mode contrast — why WCAG 2 misleads you
The WCAG 2 formula adds a fixed flare constant that dominates at the dark end, so dark-mode pairs can post a passing ratio and still read as dim.
How to fix colour contrast without changing your brand colour
Contrast is driven by lightness, not hue. Move your brand colour along its own lightness axis and it still reads as your brand while passing WCAG.
OKLCH for designers — why it replaced HSL
HSL lightness lies. OKLCH is perceptually uniform, so equal steps look equal, and it is the right space for building colour ramps and fixing contrast.
WCAG 2 vs APCA — which contrast standard should you use in 2026?
WCAG 2 is the legal benchmark. APCA predicts readability better. Here is how they differ, where they disagree, and which to ship against.
What contrast ratio do you actually need?
A practical guide to 4.5:1, 3:1 and 7:1 — which applies where, what counts as large text, and the rules people most often get wrong.
Why 14px body text can never pass APCA
APCA says 14px at regular weight is unusable at any contrast, including pure black on white. Here is the reasoning and what to do about it.
Why 83.9% of websites fail colour contrast
WebAIM's annual survey found contrast failures on 83.9% of the top million home pages, up from 79.1%. Every designer has a checker. So why is it getting worse?
CSS
How to make a CSS gradient that stays vivid, readable and free of bands
Make a CSS gradient that does not go grey in the middle, keeps text readable at its worst point and does not band: OKLCH, worst-pixel contrast and grain.
How to make CSS shadows and glass that stay visible and readable
Make layered box shadows that give a visible edge, survive dark mode and keep text on glass readable: measured edges, a dark twin and worst-pixel glass.
How to make a focus indicator that passes WCAG on any background
Make a keyboard focus ring that passes WCAG 2.2: what 2.4.7, 1.4.11 and 2.4.13 really ask, how to measure the 3:1 change, and why box-shadow rings vanish.
How to make an SVG wave or pattern background that stays readable and small
Make SVG waves, blobs and patterns that keep a headline readable, stay small and redraw from a link: worst-pixel contrast, SVGO and seamless tiles.
Typography
How to identify the font in an image, without uploading it
Drop in an image and get the free fonts that match, with nothing to type or upload: how it reads the letters, measured accuracy, and when to trust it.
How to build a fluid type scale with CSS clamp()
The clamp() arithmetic for a fluid type scale, worked in full from 16px to 19px, plus the cap-height and line-length checks clamp() cannot do.
Why 16px is not 16px: x-height across 872 font families
x-height across 872 families: 0.351 to 0.84 em, median 0.500, 19% more than 10% below the APCA reference. Matching 16px Helvetica takes 14.6 to 20.3 px.
Branding
Favicon sizes: which files you actually need and how to make them
The favicon files you need: one ICO, six PNGs from 16 to 512 pixels, a manifest and four head tags, plus a check that your mark survives 16px.
How to make a one-page brand guidelines sheet, with the colour pairs that pass
What a one-page brand sheet needs, and how to build the approved-combinations matrix: four colours give 12 pairings, each marked AA, large-only or fail.
How much of a QR code can a logo cover? We measured it
Every generator says 30%. About 5,000 decode attempts put the real logo ceiling at 4% for level L and 19% for level H. The data, and why 30% is wrong.
Writing
How to count words and characters, and why two counters give different numbers
Counters disagree on hyphens, links, emoji and Chinese. The rules that decide a word count, the limits per platform, and reading time with a cited rate.
How to write a cover letter that matches your resume
Match the letter’s header, fonts and colour to your resume, write four short paragraphs, and keep it to one page. With word limits measured per template.
How to test what an ATS parser reads from your resume
Run the extraction step every tracking system shares on your own PDF or Word file, read the text it returns, and fix the glyphs, columns and dates it misreads.
Title case in APA, Chicago and AP style: which small words stay lowercase
APA, AP and Chicago lowercase different small words, and Chicago changed its rule in 2024. The word lists, hyphen and colon rules, and worked headlines.
What makes a resume ATS-friendly, and the 75% rejection myth
Applicant tracking systems rarely auto-reject, but they do mangle columns, tables and header text. The format that parses, and how to test your own PDF.
CV vs resume: the difference, country by country
In the US a CV is a long academic record; in the UK and Europe it is the everyday job document. What each word means where, and what changes on the page.
How long should a resume be? One page or two, with the evidence
The one-page rule is folklore past your first job. What a 482-recruiter study found, when two pages win, when one is right, and when a CV runs longer.
How to write a resume, step by step
Eight steps from a blank page to a finished resume: what goes at the top, how to word each job, where education and skills go, and what to check before sending.
Resume bullet points that get interviews: verbs, numbers and rewrites
How to turn duties into results: the X-Y-Z formula, action verbs grouped by what you did, where to find numbers, and before-and-after rewrites.
Resume photo: which countries expect one and which discourage it
Leave the photo off in the US, UK, Canada and Australia; it is customary in Germany, much of Europe, the Middle East and East Asia. Rules, evidence and specs.
Resume summary examples by field, and how to write your own
Fourteen original resume summaries for nurses, engineers, teachers, designers, career changers and more, plus the three-sentence pattern behind each one.
Resume templates by profession: which layout suits your field
Sixteen fields, the three resume layouts that suit each one, and why: strict hiring portals want one column, portfolio fields can carry a sidebar with a backup.
How to write a resume with no experience: students and first jobs
No paid work yet? Lead with education and projects, turn coursework, volunteering and part-time shifts into evidence, and fill one honest page without padding.
How to write link and button text that makes sense out of context
Link text that names its destination survives a screen reader's link list; “click here” does not. How to audit links and buttons against WCAG.
How to add page numbers to a PDF, starting from any page
Stamp page numbers on a PDF in your browser, leave the cover clean and start from any number, with the start page and first number set separately.
How to convert PDF pages to JPG at the right resolution
PDF to JPG at 72, 150 or 300 dpi: the pixel size each gives an A4 page (2480 × 3508 at 300) and why 300 has four times the pixels of 150.
How to convert a PDF to Markdown for notes or an AI chat
Turn a PDF into Markdown with a heading for every page, for notes or an AI chat, and what it cannot carry: tables, lists and in-page headings.
How to crop a PDF's margins, and why cropping hides rather than deletes
Trim a PDF's margins in points, in your browser. Cropping moves the CropBox and leaves the MediaBox and its content in place, so it is never redaction.
How to extract text from a PDF, and why some PDFs give you nothing
Pull the text out of a PDF in your browser, and why a scan gives nothing: it has no text layer, and this tool does no OCR. Columns may interleave.
How to password-protect a PDF without uploading it
Encrypt a PDF with AES-256 in your browser so the password never reaches a server. User and owner passwords, RC4, and the qpdf and Preview routes.
How to rearrange and delete pages in a PDF
Reorder PDF pages by dragging and delete them by clicking, from thumbnails drawn in your browser, then check the new numbering before you save.
How to remove a password from a PDF you can already open
Take the password off a PDF you can open, in your browser. Why the tool needs the password, what the copy keeps, and the Preview and qpdf routes.
How to rotate a PDF and save it the right way up
Turn the sideways pages of a PDF and save the rotation into the file, not just your view. How rotation is stored, why it goes wrong, Preview and qpdf.
How to see and remove the author name and other metadata in a PDF
See and clear the title, author and subject in a PDF without uploading it, and what stays behind: keywords, creator, dates and any XMP packet.
How to split a PDF into separate files or pull out a page range
Pull pages 3 to 7 into one file, cut a document into equal parts, or save every page on its own, all in the browser, with the limits stated.
How to turn photos or scans into one PDF
Put JPEG or PNG photos into one PDF without uploading them: set the page order, choose A4 or fit-to-image, and avoid sideways and oversized pages.
How to watermark a PDF, and what a watermark can and cannot stop
Stamp DRAFT or a name across every page of a PDF in your browser, with the opacity and angle that work, and why a watermark cannot lock a file.
Why merging an encrypted PDF can give you blank pages, measured
An AES-256 PDF merged through upstream pdf-lib and through @cantoo/pdf-lib: one gave three blank pages and 49 characters, the other gave the document.
What lossless PDF compression actually saves, measured on eleven files
Lossless PDF compression on eleven files: text shrank 0.8% to 6.5%, images under 0.05%, and deleted pages stayed in the file until we fixed it.
Video & audio
How to extract the audio from a video as an MP3, without uploading it
Pull the soundtrack out of an MP4, MOV, WebM or MKV as an MP3 in any browser. Why files over 13 minutes are refused, which bitrate to pick, and ffmpeg.
Video to GIF: the bytes per pixel per frame, measured
50 frames at 480 × 270: a moving photograph costs 0.644 bytes per pixel per frame as a GIF, 53 times the H.264; a screen recording 0.111, 5.4 times.
Trimming video without re-encoding: where the cut actually lands
Six files measured: a copy-only cut begins a mean 4.06 s early on x264 defaults and 0.46 s at a 1 s keyframe interval; an edit list hides the extra frames.
Converters
How to make a code screenshot people can actually read
Turn code into an image that stays sharp, keeps every colour above 4.5:1 contrast, opens in Figma and slides, and comes with alt text for screen readers.
How to convert a PNG to SVG, and when a vector is the wrong answer
Trace a PNG or JPG logo to SVG with exact brand colours, read the size and error before you download, and know why photographs should stay JPEGs.
How to convert an SVG to PNG without losing its fonts or images
Convert SVG to PNG at an exact or print size: find the web fonts and linked images a browser drops, embed them, and write the ppi into the file.
How to frame a screenshot without blurring it or leaking what is in it
Put a screenshot on a background in a browser or device frame, keep every pixel sharp at 2×, and cover private details so nobody can unblur them.
How to resize a photo to an exact size: pixels, print size or file size
Resize photos to an exact width, a long side, a print size at 300 ppi or under a KB limit, and keep them upright, in true colour and without GPS.
Social media image sizes, checked against each platform's own pages
Instagram, Facebook, X, LinkedIn, YouTube, Pinterest and Bluesky image sizes from their own help pages, with safe zones, upload limits and dates.
How to compress a PNG without losing any quality
oxipng keeps every pixel identical and still cut a flat graphic from 21,493 to 3,350 bytes and a photograph by 14%. What lossless can honestly promise.
How to crop, rotate and resize an image in one pass without losing sharpness
Crop, turn and resize, then encode once. Why separate tools cost extra encodes, why big reductions go soft, and what Lanczos3 does instead.
How to enlarge an image without it going blurry, and what upscaling cannot do
Enlarge with Lanczos3, compare it against the browser's scaler on your own image, and stop by 4×: at 2×, three pixels in four are interpolated.
How to make an animated GIF from images, and keep the file small
A GIF stores every frame whole, so its size is pixels × frames × a cost set by the picture. Build one and see the weight before you export.
How to make an SVG smaller without breaking it
Shrink an SVG with SVGO and keep it working: cut coordinate precision, keep viewBox and the title, check your ids, and judge the gzipped size.
How to convert an image to a base64 data URI, and when not to
Base64 adds a fixed third to any file, and an inlined copy is never cached on its own. How to make a data URI, and the 4 KB line where it stops paying.
Why pixel-to-inch converters disagree, and which answer is yours
The same 1920 pixels are 20 inches in CSS, 26.67 at 72 ppi and 6.4 at 300 ppi. Why converters differ, and how to pick the meaning you need.
How much PNG to WebP saves, measured on eleven images
PNG to WebP at quality 0.82 in Chromium: photographs shrank 92% to 97%, a flat logo 69%, and icons under 128 px grew — up to 116% at 16 px.