Accessibility

TrackCaffeine aims to meet WCAG 2.2 level AA. This page says what that means in practice on this particular site, how each claim is tested, and — in its own section, not buried — where the site currently falls short. No third-party audit has been commissioned, so everything below is our own testing, and the last section is the part worth reading if you are deciding how much to trust the rest.

Contrast, and why we measure it instead of judging it

Every run of text is checked against the colour actually painted behind it, at the WCAG AA floors: 4.5:1 for body text and 3:1 for large text. The check runs on every build, in a real browser, by reading the rendered pixels through a one-pixel canvas rather than by reading the stylesheet.

That distinction is the whole point. Contrast looks fine in isolation almost always; it fails where one element sits on another — a caption over a photograph, a label on a chart, a translucent bar over running text. A stylesheet cannot answer what is underneath an element, because what paints under something is not necessarily its parent in the document. Reading the painted pixel can. The same check runs at phone width, and it also reports any page that scrolls sideways.

Two consequences are visible in the design. The photographs on the guide covers sit on their own opaque dark ground rather than under a transparent overlay, so the type on them is measurable rather than merely plausible. And the two data colours — the orange for caffeine above the sleep threshold, the teal for below it — are chosen to clear AA as text on every surface they appear on, in both the light and the dark theme.

Colour is never the only carrier

Colour on this site means one thing: whether a figure is above or below the 100 mg sleep threshold. It is never the only thing that says so. A chart that colours a bar also labels it with the milligram figure; a curve that crosses the threshold also has the threshold drawn as a labelled line; a calculator that turns a result orange also states in words that the dose is still above the threshold at your bedtime. Someone who cannot distinguish the two colours loses an accent and no information.

Keyboard and structure

• Every interactive element is reachable and operable with a keyboard, and the focused element is drawn with a visible outline that is not removed anywhere.
• A skip link is the first thing in the tab order on every page and jumps straight to the main content, past the navigation.
• Each page has exactly one H1 — checked on every build — and a heading structure that descends without skipping a level, so the page can be navigated by headings alone.
• Tables carry real header cells with a scope, and a caption that states what the table shows.
• The frequently-asked questions are plain headings with the answers visible underneath, not an accordion. Nothing on this site hides content behind a control you have to find first.
• Language is declared on every page, and each translated page declares its own — which is what lets a screen reader switch pronunciation rather than reading German with an English voice.

Images, charts and alternative text

Charts are inline SVG and are exposed as a single image with a description that states what the chart shows, rather than as a pile of unlabelled shapes. Every figure also carries a caption written as a sentence — "a standard 240 ml cup starts at 96 mg and still leaves about 46 mg six hours later" — and the caption is the finding, not a label reading "Figure 1". A reader who never sees the chart still gets the claim.

Photographs that sit beside a headline they would only repeat carry an empty alternative text on purpose. That is correct rather than lazy: a descriptive alternative on a decorative image next to the text it decorates makes a screen reader say the same thing twice. Photographs that carry information have a description.

Motion, and pages that work without JavaScript

Animation on this site is limited to short transitions on hover, focus and theme change. Nothing moves on its own, nothing auto-plays, nothing flashes, and there are no parallax effects. Every transition is switched off for readers whose system asks for reduced motion.

No content is hidden by the stylesheet and revealed by a script. This matters more than it sounds: a site built the other way round shows a blank page to anyone whose JavaScript fails, and it is a pattern that is easy to ship without noticing. All prose, every figure and every published number are in the page as it arrives from the server. JavaScript adds the calculators, the drink search and the theme toggle, and its absence costs those three things and nothing else.

Dark mode, zoom and small screens

The site follows the system light or dark preference and offers a manual switch in the header, and the contrast check described above runs against both themes rather than only the one that happens to be default. Type is set in relative units throughout, so browser and system text-size settings scale the page instead of being overridden. Layouts are single-column on a phone and every build is checked for horizontal scrolling at phone width, because a page that scrolls sideways is the most common way a responsive layout becomes unusable at large text sizes.

Where this site currently falls short

This section exists because an accessibility statement with no known issues in it is usually a statement nobody tested.

• No independent audit. Everything above is our own automated testing plus manual keyboard checks. Automated testing catches contrast, structure and missing labels; it does not catch a page that is technically conformant and still confusing to use.
• Charts have a description, not an equivalent table. The description states what a chart shows and the caption states the finding, but the underlying points are not always available as a table on the same page. They are in the published dataset and the open API, which is a worse answer than having them beside the chart, and it is on the list to fix.
• The margin readout on wide screens is not available on narrow ones. On a window wider than about 1600 pixels a guide or drink page shows a small fixed panel in the left margin repeating the figure the page is about. It is hidden below that width. Nothing depends on it — every number in it appears in the page itself — but it is an example of something a wide-screen reader gets and others do not.
• Japanese and Korean fall back to the system's own fonts. The site's typefaces do not cover those scripts and shipping a subset would cost megabytes, so those two editions render in whatever CJK font the device provides. The result is legible and it is not the same typography as the other ten.
• These six masthead pages are English only for now. The methodology, sources, standards, updates, glossary and accessibility pages exist in English while the wording settles; they are not offered as translations that do not exist, but a reader of the other eleven editions currently cannot read them in their own language.

Telling us about a problem

If something here is unusable for you, write to the address on the contact page and say which page and what happened, including the browser and any assistive technology you were using. We do not have a formal response-time commitment and will not invent one; what we can say is that accessibility reports are treated as factual error reports, which means they are fixed on the page and recorded in the updates log with a date. If a fix is going to take a while, we would rather tell you that than leave the report unanswered.

Bottom line

TrackCaffeine targets WCAG 2.2 AA and tests for it on every build: contrast measured from the painted pixels in both themes, one H1 per page, real table headers, a skip link, visible focus, no content hidden behind JavaScript, and reduced motion respected. Colour carries one meaning and never carries it alone. The known gaps are that no independent audit has been done, charts have descriptions rather than equivalent tables, the wide-screen margin panel has no narrow-screen counterpart, two language editions use system fonts, and these masthead pages are English only. Reports go to the contact address and are logged like any other correction.