Get a Free Quote

Colour Contrast Checker

Pick a text colour and a background colour, and this tool tells you straight away whether anyone can actually read it, not just whether it looks nice on your monitor.

0:1 Contrast Ratio
AA — Normal Text (4.5:1)
AA — Large Text (3:1)
AAA — Normal Text (7:1)
AAA — Large Text (4.5:1)

Large text preview, 24px

Normal body text preview, 16px. This is roughly how a paragraph of your website copy would read with this colour pairing.

Most low-contrast text isn’t a design mistake so much as a blind spot. Pale grey on white, light yellow on cream, it looks fine on a bright screen in good light, sitting a foot from your face. It’s a different story for a customer squinting at their phone in the sun, someone with low vision, or the roughly one in twelve men with some degree of colour blindness. None of that shows up while you’re designing the page. It only shows up when a real visitor gives up and leaves.

How to use it

  1. Enter your text colour and background colour as hex codes, or pick them from the swatches
  2. Get an instant contrast ratio
  3. See a pass or fail against WCAG AA and AAA standards
  4. Adjust either colour until it passes

The numbers behind the pass/fail

  • 4.5:1 is the minimum for normal body text under the WCAG AA standard, the generally accepted baseline for a business website
  • 3:1 is enough for large text, 18pt and above, since bigger text stays legible at lower contrast
  • 7:1 is the stricter AAA standard, worth reaching where you can, though AA is a realistic minimum for most sites

If your brand colours fail, you rarely need to abandon them. A slightly darker shade of the same colour for body text usually passes without the brand looking any different to a visitor.

If contrast checks out but something still feels off

Colour is one part of a bigger picture. Font size, link visibility, and how a page holds up with a keyboard instead of a mouse all affect whether a site is genuinely usable. Our website development team can look at all of it together if you want a proper once-over.

FAQ

Web Content Accessibility Guidelines, the standard most businesses are measured against. AA is good practice for a normal business site, and a legal requirement for some public sector organisations.

Usually not by much. A darker or lighter shade of the same colour for text is often all it takes, especially for body copy rather than headings or logos.

Not as a confirmed, direct ranking factor, but it does affect how long people stay on your site and whether they can use it properly, and accessibility is an increasingly visible part of Google’s wider quality guidelines.

Mobile-Friendliness Self-Check

Enter your website and run through a quick set of checks covering the things that actually break on a phone, not just whether the page technically loads.

0 / 8 checks passing

Automated Checks

Enter your URL above and run the checks to fill this in.

On Your Phone, Check:

These need a real phone to judge properly, so tick them off yourself as you check your site.

Google’s already made its position clear: it judges your site mainly on how it performs on mobile, not desktop. Most business owners never notice mobile problems because they check their own site on a laptop, where everything looks fine. It’s a different site entirely on a phone with a smaller screen, a thumb instead of a mouse cursor, and a signal that isn’t always brilliant.

What it checks

  • Tap targets — are your buttons and links big enough to tap accurately, with enough space around them that you’re not accidentally hitting the wrong one?
  • Text size — is your body text readable without anyone needing to zoom in, or has it shrunk down to something meant for a much bigger screen?
  • Layout — does anything overflow off the edge of the screen, overlap, or require horizontal scrolling to read properly?
  • Viewport setup — is your site actually telling the browser it’s mobile-ready, or is it just being shrunk down from a desktop layout?

Common problems this tends to catch

  • Menus that work fine on desktop but become unusable on a small screen
  • Buttons placed so close together that tapping one accidentally hits another
  • Forms that are painful to fill in on a touchscreen, tiny fields, no proper keyboard type
  • Text that’s technically there but too small to read without pinching to zoom
  • Pop-ups or banners that take over the whole screen and are difficult to close on mobile

Why this is worth checking properly, not just glancing at your phone

Loading your own site on your own phone tells you it works. It doesn’t tell you it works well. A menu might open, a button might technically be tappable, and it can still be a frustrating experience for someone who isn’t as familiar with your site as you are. Since the majority of local searches, plumbers, restaurants, shops, happen on a phone, this is often where a business quietly loses customers without ever knowing why.

If your site’s flagging problems here, it’s usually worth a proper look rather than a quick patch. Our website development team builds every site mobile-first from the start, and our SEO services include a full technical review if you’re not sure where to begin.

FAQ

Yes, Google primarily uses your site’s mobile version to decide how it ranks, even for people searching on desktop. A site that performs poorly on mobile is at a genuine disadvantage.

Your own phone, browser, and habits aren’t representative of every visitor. Someone with a different screen size, an older phone, or less familiarity with your layout can hit problems you’d never notice yourself.

Not always. A responsive theme handles resizing, but it doesn’t fix tap targets that are too small, forms that are awkward to fill in, or content that was written and laid out with desktop in mind first.

Page Weight / Image Size Estimator

Enter a page URL and get a breakdown of exactly what’s making it heavy, image by image, so you know precisely what to fix rather than just being told your site is “slow”.

Images are the single biggest cause of a bloated, sluggish website, and it’s almost always by accident rather than design. A photo taken on a phone and uploaded straight to WordPress without resizing can easily be five or six times larger than it needs to be for the space it’s actually displayed in. Multiply that across a homepage with a hero image, a gallery, and a few team photos, and you’ve got a page that’s carrying several megabytes of weight it never needed.

What it shows you

  • Total page weight, so you know the overall scale of the problem
  • Every image on the page, ranked by file size, so you can see the worst offenders first
  • The gap between actual size and displayed size, since an image being shown at 400 pixels wide has no business being uploaded at 4000
  • Format flags, pointing out where an older format like JPEG or PNG could be swapped for something smaller like WebP with no visible loss in quality

Roughly what to aim for

  • A typical webpage should sit well under 2MB in total, ideally closer to 1MB for a straightforward business site
  • Individual images are rarely worth going above 200 to 300KB once properly compressed, even for large hero banners
  • If a single image on the page is bigger than the rest of the page combined, that’s usually your quickest win

Why this is worth sorting properly, not just once

Page weight tends to creep back up over time. A new hero image gets added for a seasonal promotion, a gallery grows, nobody resizes anything before uploading, and a fast site slowly turns sluggish again without anyone noticing until customers start mentioning it. This is one of the things we keep an eye on as part of our website maintenance plans, and it’s built into how we approach every website we develop from the start rather than fixed as an afterthought.

FAQ

Yes, indirectly but significantly. Heavier pages load slower, and loading speed is one of Google’s confirmed ranking signals, particularly for mobile, which is what most searches happen on now.

Ideally yes, at least whenever you add new content. It only takes one uncompressed image added during a quick update to undo the improvement from a previous clean-up.

Dimensions are how many pixels wide and tall an image is. File size is how much data it takes up. A large-dimension image saved poorly can have a bigger file size than a smaller-dimension one saved well, which is why resizing and compressing both matter.

Font Pairing Previewer

Pick a heading font and a body font, type in your own text, and see the two working together before you build a single page around them.

CSS For This Pairing

Font pairing is one of those decisions that’s easy to get wrong quietly. Two fonts can each look great on their own and still clash badly side by side, one too similar to the other, one too different, one that reads beautifully at heading size and turns into a headache at body size. Most people only discover this after a whole website’s been built around the mismatch.

How to use it

  1. Choose a font for your headings
  2. Choose a font for your body text
  3. Type in your own heading and a paragraph of your actual copy, not lorem ipsum
  4. See the pairing rendered properly, at real heading and body sizes, side by side

Testing with your own words matters more than it sounds. A pairing can look sharp with a generic placeholder headline and fall apart the moment you drop in your actual business name or a longer sentence.

A few things worth knowing before you pick

  • Contrast is usually better than similarity. A bold, distinctive heading font paired with a clean, quiet body font tends to work better than two fonts that are trying to do the same job
  • Body text should disappear. If a font is drawing attention to itself in a paragraph someone’s meant to actually read, it’s the wrong choice for body copy, however nice it looks in a single word
  • Stick to two fonts, three at most. Every extra typeface adds visual noise and another thing that has to load
  • Check it at the size it’ll actually be used. A font that looks elegant huge on a hero banner can turn cramped and awkward at normal paragraph size

Once you’ve found a pairing you like

A good font pairing is only half the job. How it’s actually used, weights, spacing, hierarchy across headings, is what makes it feel intentional rather than just “on brand” in theory. If you’re working on a full site build, our website development team can take a pairing you’ve landed on here and build it properly into a finished design.

FAQ

Free options, particularly from Google Fonts, cover the vast majority of what a business website needs, and they’re well optimised for the web. Paid fonts are worth it mainly for a very specific brand look you can’t get elsewhere.

Not necessarily exactly, but they should feel like they belong to the same family in tone, weight, and personality, even if the actual typefaces differ.

Two is usually the sweet spot, one for headings, one for body text. A third can work for something like a logo or a specific accent, but adding more than that tends to make a site feel unfocused rather than more interesting.

Favicon & Social Preview Generator

Upload your logo, and get back a proper favicon and a correctly sized social preview image, ready to drop straight into your website.

PNG, JPEG, WebP or SVG. Nothing is uploaded anywhere — everything happens in your browser.

Two small details, both easy to overlook, both noticed constantly. Your favicon is the little icon sitting in a browser tab, and it’s one of the first things a visitor sees if they’ve got multiple tabs open, or if they’re trying to find your site again in their history. Your social preview image is what shows up when someone shares your link on Facebook, LinkedIn, or WhatsApp. Get either one wrong, a blank grey square, a stretched logo, a broken image icon, and it quietly makes a business look less finished than it actually is.

How to use it

  1. Upload your logo or icon
  2. Generate your favicon, sized correctly for browser tabs and bookmarks
  3. Generate your social preview image, sized correctly for Facebook, LinkedIn and Twitter/X
  4. Download both and add them to your website

Why these two things need different files, not just one resized logo

A favicon is tiny, often shown at just 16 or 32 pixels, so anything with fine detail or small text simply disappears. A simple icon or a single letter tends to work far better than a full logo. A social preview image is the opposite problem, it’s large and wide, roughly 1200 by 630 pixels, so a small logo just dropped onto a plain background looks lost and unfinished. Each one needs its own proper design, not the same file resized and hoped for the best.

What tends to go wrong without one of these

  • No favicon at all, so a generic blank page icon shows up in every tab
  • A full, detailed logo squashed into a 16-pixel favicon, unreadable
  • No social preview set up, so shared links show a random image pulled from the page, or nothing at all
  • A social image that’s technically there but stretched or cropped oddly because it was never sized correctly to begin with

Getting it built into your site properly

Generating the files is the easy part. Getting them correctly linked in your site’s code, and making sure every page has the right social preview rather than one generic image for the whole site, is where this usually goes wrong. If you’d like this set up properly as part of a wider build, our website development team handles this as standard on every project.

FAQ

Most modern browsers use a 32×32 pixel version, though it’s worth generating a few sizes (16×16, 32×32, and a larger one for Apple devices) to cover everything properly.

This usually means there’s no social preview image set up in your page’s code, so the platform is guessing and pulling in whatever image it finds first, sometimes the correct one, often not.

One is enough to start with, but individual images for key pages, particularly your homepage and any pages you expect people to share, tend to look far more professional and get more attention when shared.

Recent Comments

No comments to show.

Archives