Repository navigation
Accessibility
This page states fiscalclock's accessibility commitments for its website, documentation and visual assets, the exact thresholds they imply, and how each one is checked today or will be checked once a site exists.
Last reviewed: 1 Nov 2026
fiscalclock's results end up in financial reports, and its readers include people who use a keyboard instead of a mouse, screen readers, high-contrast modes or browser zoom. The project commits to the international accessibility standard, WCAG 2.2, at level AA as a hard floor in both the light and the dark theme: no colour, component or page ships below it. Colour contrast is already checked automatically by the token build; most other checks need a website, which does not exist yet (DD-009), and this page says which. Terms are defined below and in the Design-Glossary.
| Term | Meaning |
|---|---|
| WCAG 2.2 | The W3C's Web Content Accessibility Guidelines, version 2.2, a W3C Recommendation dated 12 Dec 2024 (WCAG 2.2). Each rule is a numbered success criterion (SC), such as 1.4.3. |
| level A, AA, AAA | How demanding a criterion is. AA includes every A criterion; AAA is the strictest. |
| contrast ratio | How different two colours are in brightness, from 1:1 to 21:1; explained on Colour-System. |
| focus indicator | The visible mark showing which control the keyboard will act on. |
| CSS px | The CSS pixel, the unit browsers lay pages out in; on high-density screens it covers several physical pixels. |
| forced colours | A mode, such as Windows High Contrast, in which the operating system replaces a page's colours with a small palette the user chose. |
| reduced motion | An operating-system setting asking pages to avoid animation, which can cause discomfort for people with vestibular disorders. |
| colour-vision deficiency | Reduced ability to tell some colours apart, often red from green. |
| text alternative | Text that conveys what an image or diagram shows, for people who cannot see it. |
| Commitment | What it means in practice | Status |
|---|---|---|
| WCAG 2.2 level AA, in both themes | Every pair of colours, every component and every page meets every AA criterion in light and in dark. A failure in either theme is a failure. | Decided (DD-005 makes dark first-class; the accessibility research sets WCAG 2.2 as the hard constraint) |
| WCAG 2.2 is the only pass or fail rule | Newer methods such as APCA and the WCAG 3 draft are still in development; they may appear as information but never excuse a WCAG 2.2 failure. | Rule (accessibility research, section 7) |
| Aim higher where it is cheap | Body text at 7:1 (AAA); the focus indicator meets SC 2.4.13 Focus Appearance (AAA); primary controls 44 × 44 CSS px (AAA). | Targets from the research, not hard rules |
| Colour never carries meaning alone | Every colour that means something has a second cue: a word, icon, underline, pattern or outline. | Rule (Colour-System) |
From the accessibility research, summary of hard constraints:
| Element | Minimum (level AA) | Criterion | Target |
|---|---|---|---|
| Body text, interface text, code, captions | 4.5:1 | SC 1.4.3 | 7:1 for body text and code (SC 1.4.6, AAA) |
| Large text: at least 24 px, or at least 18.67 px bold | 3:1 | SC 1.4.3 | 4.5:1 (AAA) |
| Control borders and states, focus indicators, icons without text, diagram lines, markers and fills that carry meaning | 3:1 against adjacent colours | SC 1.4.11 | 3:1 against every neighbour, not only the background |
| Focus indicator change | 3:1 between focused and unfocused pixels, over an area at least a 2 CSS px perimeter | SC 2.4.13 (AAA, adopted as a target) | Same in both themes |
| Links distinguished only by colour | 3:1 against the surrounding text, plus another cue on hover and focus | SC 1.4.1, G183 | Underline links in prose instead |
| Pointer targets | 24 × 24 CSS px, or the spacing exception | SC 2.5.8 | 44 × 44 CSS px for primary controls (SC 2.5.5, AAA) |
Notes:
- Never round up. 4.499:1 does not meet 4.5:1 (Understanding 1.4.3). The project's script decides on the exact ratio and prints it truncated.
- "Large" is larger than it looks. 18 px bold and 20 px regular text are not large; they need 4.5:1.
- The logo is exempt, brand colours are not. Text that is part of a logo has no contrast requirement, but the same colour used for a heading, link or diagram label does. fiscalclock checks its logo colours anyway.
- Diagram labels are text. Period and timeline diagrams are not exempt as "pictures"; their labels need 4.5:1.
All 45 checked colour pairs pass in both themes (contrast.md; full table on Colour-System). On the AAA targets:
-
color.text.defaultis at least 13.24:1 on every checked background, so body text meets 7:1. -
color.text.mutedis between 6.33:1 and 7.57:1: it meets AA everywhere but falls short of 7:1 on some backgrounds. The research sets the 7:1 target only for body text and code, so this is within the targets. -
color.code.commentis 6.67:1 in light and 7.04:1 in dark, so code comments miss the 7:1 code target in the light theme.
Every element that can receive keyboard focus shows a solid outline:
:focus-visible {
outline: var(--fc-border-width-thick) solid var(--fc-color-focus-ring);
outline-offset: 2px;
}| Property | Value | Why |
|---|---|---|
| Colour |
color.focus.ring: #0b6b69 in light, #5cc6be in dark |
At least 5.64:1 in light and 7.79:1 in dark against color.bg.default, color.bg.subtle and color.bg.raised (measured pairs). It has the same values as color.accent.default, which is also checked on color.bg.accent-subtle (5.57:1 and 7.66:1). |
| Width | 2 px (border-width.thick) |
A solid outline at least 2 px thick is the easiest way to meet SC 2.4.13 (Understanding 2.4.13). |
| Offset | 2 px outside the element | The ring is drawn on the page background, so the contrast that matters is ring against background. There is no token for the offset; the 2 px value comes from the token's description and the token README. |
| Property | CSS outline, never box-shadow
|
In forced-colours mode browsers compute box-shadow to none, so a shadow ring disappears, while outline-color is replaced by a visible system colour (CSS Color Adjustment 1, section 3.1). |
| Selector | :focus-visible |
Shows the ring for keyboard users without drawing it on every mouse click (technique C45). Never remove the outline without a replacement (G195). |
One ring colour per theme is enough because each theme has only a few surfaces and the ring passes 3:1 on all of them; a two-colour ring (technique C40) is not needed. Also, a sticky header must not hide the focused element (SC 2.4.11); see Layout-and-Spacing.
Anything a reader clicks or taps is at least 24 × 24 CSS px, or is spaced so that a 24 px circle centred on it does not overlap another target's circle (SC 2.5.8). Links inside a sentence are exempt. On a docs site this covers the theme switch, copy-code buttons, language tabs, navigation disclosure arrows and the "On this page" links (accessibility research, section 4). The target for primary controls is 44 × 44 CSS px. Component sizes are on Docs-Components.
When the reader's system asks for reduced motion, pages show no transitions or animations that are not essential (SC 2.3.3, technique C39). Any animated logo or diagram transition stays static.
Proposed pattern: add motion only when the reader has not asked to avoid it, using the duration and easing tokens.
@media (prefers-reduced-motion: no-preference) {
a { transition: color var(--fc-duration-fast) var(--fc-easing-standard); }
}Where motion is used at all is not decided (Design-Tokens).
In forced-colours mode the browser replaces text, background, border and outline colours with the user's system colours and removes shadows (accessibility research, section 6; CSS Color Adjustment 1). So:
| Rule | Why |
|---|---|
| No shadows anywhere (DD-019); raised surfaces have a real border. | Shadows are removed; borders are kept and recoloured. |
Focus is drawn with outline. |
See Focus indicator. |
Icons draw their strokes in currentColor. |
They then follow the forced text colour. |
Inline SVG diagrams get their own background and outlines, or are restyled under @media (forced-colors: active) with system colours such as CanvasText and Canvas. |
Browsers keep an SVG's own fills, which may clash with the user's chosen background. |
Not yet tested in a browser.
- Colour is never the only cue (SC 1.4.1), so information survives any colour-vision deficiency by design: links are underlined, statuses carry a word and an icon, the extra week is hatched and labelled, and the second calendar in a comparison is dashed (Colour-System).
- Published colour-blind-safe palettes (Okabe–Ito, Paul Tol) do not reach 3:1 against both a light and a near-black background, which is why every diagram colour has a separate value per theme (accessibility research, section 8).
- Not yet done: simulating fiscalclock's own palette for protanopia, deuteranopia and tritanopia. The research describes the method (the Machado, Oliveira and Fernandes model) but notes that a detail of applying it must be checked in the paper first. The simulation is a quality check, not the compliance mechanism.
Every diagram that carries information has a short and a long text alternative (SC 1.1.1; accessibility research, section 5):
- An inline SVG diagram has
role="img", a first-child<title>(its name) and a<desc>(its description). - The same numbers appear as a visible table or list next to the figure, as the WAI complex images tutorial describes.
- Decorative images get
aria-hidden="true". - The wording pattern for period diagrams is on Diagrams-and-Data-Visuals.
Pages declare their language so screen readers pronounce them correctly (SC 3.1.1, technique H57). Proposed: <html lang="en-GB">, because the docs are written in British English, and lang on the root of standalone SVG files (accessibility research, section 5). The current brand SVGs do not set lang.
| Criterion | What it requires | How fiscalclock meets it |
|---|---|---|
| 1.3.1 Info and Relationships | Structure shown visually is also in the markup. | Real <table> with <th> and scope for period tables; code in <pre><code>; language tabs follow the ARIA tabs pattern. |
| 1.4.4 Resize Text | Text can be enlarged to 200 % without loss. | Font sizes are in rem (Typography); text containers have no fixed heights. |
| 1.4.10 Reflow | No sideways scrolling of the page at 320 CSS px wide. | Text reflows; wide tables and diagrams scroll inside their own box (Layout-and-Spacing). |
| 1.4.12 Text Spacing | No loss when readers increase line, paragraph, letter and word spacing. | No fixed-height badges, pills or tab labels. |
| 1.4.13 Content on Hover or Focus | Pop-ups can be dismissed, hovered and stay visible. | Applies to diagram tooltips and glossary pop-overs, if any are built. |
Run from the repository root:
| Command | What it checks |
|---|---|
python -I design/scripts/contrast.py --self-test |
That the contrast formula matches nine published reference values. |
python -I design/scripts/contrast.py "<foreground>" "<background>" |
One pair, with pass or fail for each WCAG level. |
python -I design/scripts/build_tokens.py --check |
That the generated files are current. Every build reruns all contrast pairs in both themes and fails on any regression below a minimum. |
python -I design/scripts/check_brand.py --wiki <path to a wiki clone> |
That logo files, design documents and wiki pages use only palette colours and real token names, so no unchecked colour slips in. |
These run by hand; no CI workflow calls them yet (Design-Tokens).
From the accessibility research, section 9:
| Tool | What it does | Runs in CI? | Limits |
|---|---|---|---|
| axe-core | Rule engine for WCAG 2.0 to 2.2; its README says it finds on average 57 % of WCAG issues automatically. | Yes, through its CLI or Playwright integration | The colour-contrast rule needs a real browser. |
| Pa11y CI | Tests a list of URLs or a sitemap and fails when the number of issues reaches a threshold (default 0). | Yes | Use its axe runner for WCAG 2.2 rules. |
| Lighthouse CI | Accessibility score from audits that link to axe-core rules. | Yes | A score of 100 does not mean the page conforms. |
| Keyboard pass | Tab through every page type in both themes: visible focus, logical order, nothing hidden under the header, tabs work with arrow keys. | No | Needed for SC 2.4.7, 2.4.11, 2.4.13 and 1.4.13. |
| Zoom and settings pass | 200 % text, 320 px width, text-spacing override, forced-colours and reduced-motion emulation. | Partly, with screenshots |
Recommended order once a site exists: the token checks above (fast, no browser), then axe-core over every built page in both themes, with the theme set explicitly; then the manual passes before each release.
Because no website exists (DD-009), none of the following has been tested:
- Focus visibility, focus order and focus hidden under a sticky header.
- Target sizes of real controls.
- Reflow at 320 px, 200 % text zoom and text-spacing overrides.
- Forced-colours rendering of pages, icons and diagrams.
- Reduced-motion behaviour.
- Screen-reader output of diagrams and tables.
- A colour-vision simulation of the palette.
- Contrast of rendered pages, as opposed to token pairs; the token check proves the palette, not every page that uses it.
- Design-System, Colour-System, Typography, Layout-and-Spacing, Design-Tokens, Diagrams-and-Data-Visuals, Docs-Components, Design-Glossary, Design-Decisions
- Research:
design/research/accessibility.md - Scripts:
design/scripts/contrast.py,design/scripts/build_tokens.py,design/scripts/check_brand.py - Contrast report:
design/tokens/generated/contrast.md - Decision log:
design/DECISIONS.md(DD-005, DD-009, DD-019) - Standards: WCAG 2.2, Understanding WCAG 2.2, CSS Color Adjustment 1, Media Queries 5
fiscalclock is licensed under MIT OR Apache-2.0 (MIT, Apache-2.0). Last reviewed: 31 Oct 2026. Found an error on this page? Report it with the documentation form.