A good 404 page does three things: it clearly says the page cannot be found, it returns a genuine 404 response, and it gives you a way forward there and then, whether that is a search box, a primary button or a link home. These are the standards set out in the GOV.UK Design System and WCAG, and we build every 404 page we design around them. Before anything else, check your server’s response code and make sure there’s a search field on the page.
TL;DR:
- Content sites should put search and category links first, while shops should prioritize order tracking or a homepage button as the next step.
- Humor or a small game can suit consumer and lifestyle brands, but information heavy and transactional sites should favor clear recovery options.
- Verify that missing URLs return an actual 404 status, not 200; the wrong response can confuse search engines and undermine visitor trust.
- Meet WCAG 2.2 AA with semantic HTML, logical reading order, visible focus states, and sufficient contrast; then test with a screen reader and keyboard.
Table of Contents
- Curated examples and why they work
- Core design principles and copy guidelines
- Accessibility and technical requirements
- Starter templates and CMS implementation tips
- Practical checklist for launch and quality assurance
- Why this matters to us at Kukoo Creative
- Our take on balancing brand and usability
- How we can help you get this right
- FAQ
- Sources
Curated examples and why they work
The best 404 pages borrow one idea each rather than trying everything at once. A handful of approaches come up again and again, and each teaches something worth stealing:
- A minimal page with a single bold heading and one button back to the homepage works because it removes every decision except the right one.
- An illustrated page with a brand mascot or character keeps the tone light while still placing the explanation above the fold, not buried under the artwork.
- A search-first page puts the search bar at the top of the content, which suits content-heavy sites like publishers or documentation hubs.
- A branded page using the same colours, type and voice as the rest of the site reassures visitors they haven’t left your domain.
- An interactive page, such as a small game or animation, can work for entertainment or lifestyle brands, provided the way out is still obvious within a few seconds.
- A commerce-focused page that surfaces best-sellers or a discount code turns a dead end into another chance at a sale.
Across all of these, the same patterns repeat: a search field, one clear primary call to action, a short paragraph of explanation, and two or three secondary links to popular or recent content. Humour and games have their place on consumer and lifestyle sites, but on information-heavy or transactional sites, clarity should win every time. As NN/g’s guidance on error messages puts it, a 404 page is part of your product’s error-messaging system, not a separate creative exercise.
Core design principles and copy guidelines
The label matters more than people expect. “Page not found” is the phrase recommended by the GOV.UK Design System, and it works because it tells a visitor exactly what happened without technical jargon such as “404” cluttering the message itself.
From there, copy should be short and constructive: explain what occurred and what the reader can do about it, without blaming them for typing a wrong address or following an old link.
- Lead with a plain heading, “Page not found”, not a joke or a question mark.
- Follow with one or two sentences of explanation, never a paragraph of apology.
- Choose your call to action by intent: a search box and category links suit content and information sites, while an order-tracking link or a homepage button suits a shop.
- Keep any illustration supportive rather than dominant, so it never competes with the message or the button.
- Maintain the same visual hierarchy and contrast standards as the rest of your site.
Pro Tip: Write your 404 copy as if you were answering a customer on the phone: tell them what happened, then tell them what to do next.
Accessibility and technical requirements
A 404 page that looks right but behaves wrong will still frustrate visitors and confuse search engines. The technical and accessibility basics are non-negotiable:
- Confirm your server actually returns a 404 HTTP status code, not a 200, which you can check with a browser’s developer tools or a command-line tool like curl.
- Follow WCAG 2.2 level AA, including logical content order, visible focus states and sufficient colour contrast, and never rely on colour or animation alone to carry meaning.
- Build with progressive enhancement in mind: the page should remain usable with CSS or JavaScript switched off, using semantic HTML and properly labelled form fields.
- Test with an automated accessibility audit, then follow up with a screen-reader pass and full keyboard navigation.
According to the National Archives Design System, servers should return a 404 response specifically for page-not-found cases, never a 200 for a missing page. Getting this one detail wrong quietly damages both user trust and how search engines crawl your site.
Starter templates and CMS implementation tips
A working 404 page needs very little markup to get right: a clear title, an h1 of “Page not found”, a short explanatory paragraph, a labelled search form, and one primary link styled as a button. Every form field needs a visible label, and the search input benefits from an aria-label if the visible label is stylistically hidden.
- On static hosting, most platforms let you drop in a
404.htmlfile that’s served automatically when a path doesn’t resolve. - On Apache, an
ErrorDocument 404 /404.htmldirective in.htaccessdoes the job; on Nginx, it’s anerror_page 404line in the server block. - Most CMS platforms have their own 404 routing, often a dedicated template file or theme setting, so check your platform’s documentation rather than assuming a static file will be picked up.
- Keep any client-side enhancements, such as a live search suggestion, optional: the page must still work if that script fails to load.
Practical checklist for launch and quality assurance
Before you publish, run through a short list:
- Confirm the page returns a genuine 404 status and loads correctly for a handful of made-up URLs.
- Click every link and test the search box to be sure nothing points only to internal staging content.
- Run an accessibility audit, then test manually with a screen reader and keyboard-only navigation.
- Set up logging for missing URLs so you can spot patterns and add redirects for pages that still get real traffic.
Why this matters to us at Kukoo Creative
For over a decade we’ve built websites for small and growing businesses, and a thoughtful 404 page is an important detail that helps protect a brand. We aim for better visitor recovery and clearer brand signalling, backed by our colour contrast guidance and the work in our portfolio.
Our take on balancing brand and usability
A 404 page earns its personality only after the basics work: a clear label, a working search, one obvious next step. Test the simple version before you reach for anything clever.
— Kukoo
How we can help you get this right
If your 404 page needs more than a quick copy edit, that’s exactly the kind of detail we fold into a wider project. Our Web Design & Development, UX / UI Design and related services cover everything from layout and navigation to accessible form design, and our £25 Website Speed Improvement is a low-cost way to check the technical health behind the scenes.
- We can review your current error pages alongside your homepage navigation, drawing on our homepage layout guidance.
- We can write concise, on-brand 404 copy as part of a broader content pass, following the same approach in our website copy guide.
- If your wider site structure needs attention first, our Fix, Steady, Secure and Scale plans cover ongoing maintenance, including server-level fixes and redirects.
If you’d like a second opinion on your current setup, take a look at our services page and send us a message about what you’re working with.
FAQ
What should a 404 page always include?
A 404 page should clearly state that the requested page cannot be found, using plain wording such as “Page not found”, and offer at least one way to continue, such as a search box, a link home or relevant category links, as recommended by the GOV.UK Design System.
Does a 404 page affect SEO?
A 404 page itself doesn’t harm rankings when it returns the correct 404 HTTP status, as described by the National Archives Design System; problems arise when a missing page wrongly returns a 200 status, which can confuse search engines about what content actually exists. Logging missing URLs also helps you catch and redirect broken links that are losing you traffic.
How do I make a 404 page accessible?
Follow WCAG 2.2 level AA principles: use semantic HTML, a logical reading order, visible focus states and sufficient colour contrast, and never convey meaning through colour or animation alone. Testing should combine an automated audit with manual screen-reader and keyboard checks, in line with Gov.
Should a 404 page be funny or straightforward?
Humour can work well on consumer or lifestyle sites, but the explanation and recovery options must still appear clearly and quickly. Service-design guidance from BBC GEL recommends matching tone to context and treating any page that blocks a user’s journey with appropriate urgency, so playfulness should never delay the practical message.
How do I check that my 404 page is working correctly?
Use your browser’s developer tools or a command-line tool such as curl to confirm the page returns a genuine 404 status code rather than a 200. Then test the page’s links and search function manually, and check your server logs periodically for missing URLs that deserve a redirect.