File: stage-4-17-standards-and-validation.md
Standards and Validation: ClearCompare dashboard, first draft
Checked by: Jennifer (Stage 4) · 21-Oct-26 File checked: 02 - Deliverables/2026.10.21 - ClearCompare - 04 Dashboard.html (Experimental A with the Stage 4 fixes) Verdict: passes 30 of 31 checks. Adam approved changes 1 to 3 on 21-Oct-26, and the clawback rate stays "On track". One phone layout item remains (below).
Fixed already (clear-cut)
| Fix | Before | After | Standard |
|---|---|---|---|
| Category colours | Lead-mix chart: 4 product areas in shades of blue | Charcoal and teal category colours (health teal, energy orange, home loans blue, life pink) | Process: any chart with 3 or more categories uses the colourblind-safe palette |
| Heading order | Rings card title was an h3 straight after the h1 | Now an h2, same size on screen | Web Build Standards: headings in order, no level skipped |
| Stage label | "Stage 3 · Experimental A: progress rings" | "Stage 4 · First draft for stakeholder review" | Shared outputs show what the audience needs |
| Spec version | spec.json said Business Requirements v1.0 | v1.1, matching the document and the footer | Validation checklist, item 5 |
| First screen (approved) | Rings card 527px; tiles end at 930px on 1280 × 800; phone tiles start at 1,062px | Rings card 397px, internal caption removed; tiles end at 799px; phone tiles start at 517px | Dashboard Patterns: first screen; 30-second test |
| Touch (approved) | 18 chart data points under 44px | 0 under 44px on touch screens | UX Standards: 44px touch targets |
| Energy colour (approved) | Energy blue in one chart, orange in another | Orange in both | One colour per product area |
Check that still fails
| Area | Check | Evidence | Fix |
|---|---|---|---|
| Layout | Phone shows the headline and two tiles before any scroll | The headline and first tile show; the second tile starts below the 812px screen. The header takes about 230px | A shorter phone header, if Adam wants it |
Checks that pass
| Area | Check | Evidence |
|---|---|---|
| HTML | Doctype, lang, charset, viewport, title | en-AU, viewport-fit=cover, title "ClearCompare KPI Dashboard" |
| HTML | One h1, unique ids, no unnamed buttons or links | 1 h1, 0 duplicate ids, 0 unnamed controls |
| HTML | Collapsibles use details and summary | All 5 detail sections and every "See data" |
| Accessibility | Text contrast, dark mode | Main text 14.56, muted 6.53, accent 6.20, status colours 6.20 to 9.13 (all above 4.5) |
| Accessibility | Text contrast, light mode | Main text 17.52, muted 5.83, accent 5.65, status 5.02 to 6.47, grey 4.61 (all above 4.5) |
| Accessibility | Charts have text versions | Every chart has an aria-label and a "See data" table |
| Accessibility | Status never by colour alone | Each status chip has an icon and a word (✓ On track, ! Behind, × Off track) |
| Accessibility | Reduced motion | Animations off under prefers-reduced-motion |
| Touch | Every control on a touch phone | 0 under 44px (mode toggle, section headers and chart rows) |
| Layout | First screen at 1280 × 800 | Headline, rings and all 5 tiles; tiles end at 799px |
| Visual | One colour per product area | Energy orange in both charts |
| Layout | No sideways scroll | 0 at 375 × 812, 740 × 360, 568 × 320, 768 and 1280 |
| JavaScript | Console errors | 0 on load, after opening every section and after switching modes |
| JavaScript | Storage wrapped, no popups | localStorage in try/catch; no alert or confirm |
| Security | No secrets, external links | 0 keys or tokens; no external links |
| Data | Sample data labelled | "Sample data" tag in the header |
Not tested: keyboard-only pass and 200% zoom (not run this round); Core Web Vitals (not measured: local file). Screenshots were taken in the Browser pane but not saved as files.
↑ Back to topValidation checklist
| Check | Result | Evidence |
|---|---|---|
| Every Must Have KPI is on the dashboard, calculated as documented | Pass | All 8 KPIs and sub-KPIs mapped in spec.json; every number comes from kpi_results.json |
| Every business objective shows its progress | Pass | Revenue and conversion objectives: tiles with actual, target, gap and pace. "Explain changes within a day": the revenue bridge |
| Every action owner sees their KPI's status at a glance | Pass | Three action cards, each with the current value, pace needed and trend |
| The 30-second test | Pass | At 1280 × 800 the first screen shows the headline, the rings and all 5 tiles (actual, target, gap, pace, status). On a phone, the headline and first tile |
| Business Requirements version in the footer matches the latest | Pass | v1.1 in the header, footer and spec.json |