unclouded.ai

What was designed in rather than added afterwards

Every colour pair was computed, not eyeballed

The palette was written in a script that calculates contrast ratios before any CSS existed, and the script is re-run whenever a colour changes. The worst body-text pair on the site is 5.5:1 against a 4.5:1 requirement; the worst control boundary is 3.3:1 against a 3:1 requirement.

Nothing translucent sits behind text

Every text background on this site is a flat hex colour. No gradients, no glass panels, no glow, no image behind a paragraph — which on a dark site takes some discipline.

This is partly taste and mostly a testing decision. Automated tools report "background could not be determined" against gradients and translucent layers and file the result as incomplete — a bucket no gate counts and no tool can resolve. Real contrast failures hide there. Keeping every backdrop flat means our own audit has no manual-review queue to hide in.

Colour is never the only signal

The pipeline diagrams mark where each step runs with a coloured tag — and the tag always contains the words as well. "Your network", "managed", "cloud". Removing the colour entirely would not remove any information from the page.

It works without JavaScript

The workload planner is rendered hidden and only unhidden by script, so a visitor without JavaScript sees the complete reference tables it derives its answers from rather than a dead form. The contact form validates on the server. The navigation is a list of links. The FAQ is native <details> elements, keyboard-operable with no script at all.

Native controls were left alone

The <select> elements keep their platform arrow. Restyling one requires appearance: none plus a background image, which reintroduces the undecidable-contrast problem above and breaks forced-colors mode. The native control is also the one people already know how to use.

Whole-card links are named by their heading

Cards on this site are clickable in their entirety, which by default makes the link's accessible name the whole card — heading, paragraph and all. Each one points at its own heading instead, so a screen reader's list of links reads as headings rather than paragraphs.

Current-page marking is honest

aria-current="page" appears only on a link that points at the page you are actually reading. Landing pages that highlight their parent nav item get aria-current="true" — current section — because announcing six different pages as "current page, Private AI" is a small lie that is easy to ship.

Motion is optional

The only animation on the site is a short fade as sections scroll into view, it is additive over content that is already visible, and it is disabled entirely under prefers-reduced-motion.