The design of Octopus Scanner follows the same thinking as The Octopus Manifesto. Every visual decision is meant to make the app, its reports and this website easier to read, easier to use and quicker to understand.
1. Familiar by design
Octopus Scanner deliberately looks familiar rather than novel.
- Inspired by Google's Material design: As the developer, I first came across the first generation of Material design while at college, and its clear, structured approach has stuck with me ever since. Its influence runs through the colours, surfaces and spacing, alongside the Google apps many people use every day. Flat cards, gentle shadows, rounded corners and a calm blue for actions are patterns most people already recognise.
- Built with Bootstrap patterns: Alerts and warnings follow Bootstrap conventions, so a yellow warning or a red error means what you would expect it to mean.
- Why familiar matters: Recognisable patterns reduce how much there is to learn. That lowers the effort of using the app, which helps everyone and especially people who are neurodivergent, tire easily or use assistive technology.
Text description: Website URL field showing an error message
Example of the Website URL or local file path field containing www.example.com, outlined in red, with the message Enter a Website URL starting with http:// or https://, or a local file path. Below is the Start Scan button.
2. Colour and contrast
Every theme has a matching light and dark version, and each pairing of text and background is chosen to meet or exceed WCAG 2.2 AA contrast. Some of the main pairings used in the scanning interface, the reports and this website are shown below.
| Use | Light mode | Dark mode |
|---|---|---|
| Main text | #202124 on #ffffff, 16.1:1 | #ffffff on #1e1e1e, 16.7:1 |
| Secondary text | #474747 on #ffffff, 9.3:1 | #e0e0e0 on #1e1e1e, 12.6:1 |
| Links and main buttons | #1967d2 and #ffffff, 5.4:1 | #8ab4f8 and #000000, 10:1 |
| Warnings | #664d03 on #fff3cd, 7.2:1 | #ffda6a on #332701, 10.8:1 |
| Control borders | #767676 on #ffffff, 4.5:1 | #808080 on #1e1e1e, 4.2:1 |
- Colour is never the only signal: Severity, status and results are always named in words, and usually carry an icon as well.
- Borders you can see: Buttons, fields and controls have borders that meet the 3:1 contrast needed for non-text elements, so their edges are clear without relying on shading.
- Your system settings come first: The scanning interface, the reports and this website follow light and dark mode and Windows contrast themes. On macOS, this website and the server interface also respond to Increase Contrast.
https://www.example.com/shop
Text description: Accessibility Issues Found section, with severity tabs, a Critical group and one issue's details
Example of the Accessibility Issues Found section: tabs for All 11, Critical 4, Serious 5 and Moderate 2 with All selected; a Critical group with 4 issue types and 3 pages affected; the issue Buttons must have discernible text with View Ticket, Move To and Next Issue controls; and a Details table listing the description, rule, initial impact, 4 instances across 2 pages, and 2 affected pages.
3. The font
Octopus Scanner uses Atkinson Hyperlegible Next, a typeface created by the Braille Institute for readers with low vision.
- Clear letter shapes: Characters that are easily confused in many fonts, such as I, l and 1, or O and 0, are drawn to look distinct from each other. This is something I personally find very impactful, as it makes text quicker and easier to read.
- Open, generous forms: Wide openings and clear spacing keep words readable at small sizes and when zoomed.
- Built in: The font is built into the scanning interface and every HTML report, so a report looks the same on any computer it is opened on, with or without an internet connection.
4. One design across everything
The scanning interface, the HTML report and this website share one set of design values: the same colours, font, corner shapes, focus ring and icons.
- The scanning interface: Where you set up and run a scan.
- The HTML report: Where you review results, filter issues and share findings. See Report Anatomy.
- The website: Where you learn how it all works.
Moving between them should feel like moving between rooms in the same building. A button, a warning or a link looks and behaves the same in each, so what you learn in one place carries over to the others.
Text description: scanning interface
Example of the scanning interface: a Website URL or local file path field containing https://www.example.com, a Start Scan button and a Customise Scan link.
Text description: a report header titled Accessibility Scan Report, with the audited site, scan date and report buttons
Example of a report header titled Accessibility Scan Report, with the audited site https://www.example.com/, the date and 3 pages scanned, and Export Coverage, theme, search and Export Settings buttons.
5. At home on your computer
When you open Octopus Scanner, the first window you see is the server interface. It starts the scanner, shows its progress and activity log, and opens the scanning interface where you set up a scan. The server interface is built separately for macOS and Windows, so it looks and behaves like the other apps on your computer.
- On macOS: Built with SwiftUI, using the system font, SF Symbols icons, standard macOS buttons and translucent window materials. Buttons and highlights use the accent colour you choose in System Settings, and the window follows light and dark appearance, Reduce Motion, Increase Contrast and Differentiate Without Colour.
- On Windows: Built with WPF in the style of Windows 11, using Segoe UI Variable, Segoe Fluent Icons, the Windows blue and, on Windows 11, the Mica window background. It follows light and dark mode, contrast themes, the Make text bigger setting and Windows animation effects.
- Why it differs: The server interface sits alongside your other apps, so matching your system matters more there than matching the website. The scanning interface and reports, where you spend most of your time, share the Octopus Scanner design on both systems.
Text description: Octopus Server window on macOS while the scanner starts
Example of the Octopus Server window on macOS. At the top are the Octopus Server title and CPU, RAM and Disk usage. The System Activity panel reads Requesting An Octopus From The Sea, The interface opens on its own once the scanner is ready, and Waiting for the interface to answer, with a Show System Activity button. Open Interface, Exit and Preferences buttons run along the bottom.
Text description: Octopus Server window on Windows while the scanner starts
Example of the Octopus Server window on Windows. At the top are the Octopus Server title and CPU, RAM and Disk usage. The System Activity panel reads Requesting An Octopus From The Sea, The interface opens on its own once the scanner is ready, and Waiting for the interface to answer, with a Show System Activity button. Open Interface, Exit and Preferences buttons run along the bottom.
6. Calm by default
Pages are divided into clear sections, each with a single purpose, and nothing on screen is there only for decoration.
- Movement with a purpose: Animation is used to demonstrate something, such as the interactive app preview on the home page, or to help you keep your place, such as a section gently appearing as you scroll to it.
- You stay in control: The app preview on the home page only plays when you select Play animation, content that changes by itself can be paused, and animations are removed or replaced with simple fades when your system's Reduce Motion setting is on.
- Room to breathe: Generous spacing, short paragraphs and clear headings make pages easy to scan and easy to return to.
- The octopus: Each page has its own octopus illustration. It gives every page a recognisable landmark and a little warmth, without competing with the content.
7. Easy to read
- Plain writing: Pages are written in plain UK English, with short sentences and one idea per paragraph where possible.
- Names you can spot: Buttons, menus and settings are written in bold, exactly as they appear on screen, so you can match the instructions to what you see.
- No italics: Italic text is never used, because slanted letters are harder to read for many people. Bold is used for emphasis instead.
- Icons always come with words: Icons sit beside a text label rather than replacing it. The few buttons that show only an icon, such as Find on this page, still have a name that screen readers announce.
- Every example has a text description: The interface examples on this website, including the ones on this page, each have a Text description that explains in words what the example shows.
8. Zoom, text size and printing
- Zoom and narrow screens: This website and the HTML reports reflow into a single column on narrow screens and when zoomed in, so you can read them without scrolling sideways.
- Text size: On Windows, the server interface grows with the Make text bigger setting, up to 225%.
- Printing: HTML reports print with every issue detail shown and dark text on white. Pages on this website print in light mode with their closed sections opened, so nothing is left out.
9. Keyboard and focus
- A focus indicator you can always see: In the scanning interface, the reports and this website, focus is shown by a double ring of black and white, so it stays visible on light backgrounds, dark backgrounds and coloured buttons alike. The server interface uses focus outlines that match your system.
- Built for the keyboard: Controls in the server interface, scanning interface, reports and website are designed to be reached and used without a mouse, in a logical order.
- Clear names for assistive technology: Controls, icons and regions are labelled so screen readers describe them accurately.
The Interim Accessibility Statement sets out how the app, reports and website meet WCAG 2.2, and where they don't yet.
10. Credits
The design builds on the work of others, used under their open licences.
- Material design: Google's design system, which inspires the colours, surfaces and spacing.
- Bootstrap: The source of the alert and warning conventions.
- Bootstrap Icons: The icons used in the scanning interface, reports and website.
- System icons and fonts: SF Symbols and the system font on macOS, and Segoe Fluent Icons and Segoe UI Variable on Windows, provided by each operating system.
- Atkinson Hyperlegible Next: The font, by the Braille Institute.
The full licence details are on the Third-Party Licences page.
Was this page helpful? Email your feedback about Design Choices.