What we have done, measured, and not yet fixed.
Rattlemap targets WCAG 2.1 Level AA. This page states what that means here, with the actual measurements rather than a claim.
Colour is never the only channel
The band that runs through this site carries meaning, so it never carries it by colour alone. Every segment has a text label read out to assistive technology, a distinct pattern — solid, 45-degree hatch, or dots — and a plain-language equivalent nearby stating what has been established and what is still open.
Measured contrast
These are computed values, not estimates. AA requires 4.5:1 for normal text and 3:1 for large text and interface components.
| Combination | Ratio | Used for |
|---|---|---|
| Ink on page | 13.59:1 | All body text. Passes AAA. |
| Page on ink | 13.59:1 | Inverted sections. Passes AAA. |
| Slate blue on page | 5.75:1 | Links and normal text. Passes AA. |
| Stop red on page | 5.45:1 | The safety diversion. Passes AA. |
| Violet on page | 4.49:1 | Large text and interface only. Not used for normal-size body copy. |
| Soft grey on page | 4.25:1 | Large text and interface only. Not used for normal-size body copy. |
| Ink on hatched pale | 9.05:1 | Text over ruled-out band segments. |
The two combinations below 4.5:1 are restricted by rule to text at 24px, or 18.66px bold, or above — where AA’s threshold is 3:1 — and to non-text interface elements. Small secondary text uses full-strength ink instead. The ratios are recorded in a comment at the top of the site’s stylesheet so they cannot drift unnoticed.
Motion
The one animation on this site is the band halving on the home page. If your system is set to reduce motion, it does not animate: the halved state is simply the resting state. Every transition on the site is disabled under the same setting.
Keyboard and screen readers
- Everything interactive is reachable and operable by keyboard, in a sensible order.
- Focus is always visible, as a two-pixel outline offset from the element.
- A skip link is the first thing in the tab order on every page.
- Headings are properly nested and describe the section they head.
- The bands are exposed as images with a text alternative describing the proportions and what each part means.
- Every illustration has alt text, and no information is carried by an image alone.
- Form fields have real labels. Errors are announced, and say what to do.
- The safety diversion is announced assertively, because it is the one thing that must not be missed.
Text and zoom
Text is set in relative units and reflows to 400% zoom without horizontal scrolling or loss of content. Nothing is set in an absolute size that ignores your browser settings. The observation card is deliberately large-type — one item to a screen — because it is read in a car park.
Printing
The description card has its own print stylesheet. In print, the band segments become black, white with rules, and grey — so the distinctions survive a monochrome printer.
Known limitations
- Some generated illustrations are decorative and carry detail that alt text summarises rather than describes exhaustively. Where an illustration carries information, that information is also written out in text nearby.
- The dimension table uses horizontal scrolling on very narrow screens rather than reflowing, because reflowing it makes the comparison harder to follow.
Tell us
If something here does not work for you, write to support@hindujatech.shop and say what you were trying to do and what got in the way. We treat accessibility reports as faults, not feature requests, and we will tell you what we are doing about it.