Accessibility

JopChi hides two words at once. Almost every accessibility decision below falls out of that one fact — because the thing a player has to perceive is not what colour is this tile, it is which of two words does this letter belong to.

That question has a natural answer in space (left and right), in shape (which half of a diagonal), and in language (“the left word”). It has a poor answer in hue. So hue is the one channel we refuse to depend on.

The principle

Accessibility gives equal access to the same information — never more, and never less.

This cuts both ways, and the second direction is the one that is easy to get wrong. Before the Split, JopChi deliberately hides which word a misplaced letter belongs to. That ambiguity is the central mechanic.

Internally we always know the answer, so it would be trivial to pan a misplaced letter’s earcon to the left, or draw its glyph in the left half. We deliberately throw that information away. A blind player must not be told something a sighted player cannot see. Doing otherwise would be unfairness dressed as inclusion. A test asserts it stays that way.

Geometry mode — reading the board without colour

Each tile is bisected corner to corner. Lower-left is Word A, upper-right is Word B. Three orthogonal channels carry the state, any one of which is sufficient on its own:

Channels that encode tile state in Geometry mode
ChannelWhat it encodes
PositionWhich half of the diagonal is marked → which word
ShapeDiamond = locked in both · ring = misplaced · empty = absent
StrokeDashed = unresolved · solid = resolved

An ambiguous misplaced letter is drawn as a literally incomplete outline centred on the seam — belonging to neither half yet — and it closes and moves into its half when the Split resolves it. The Split becomes legible with no colour and no sound at all.

Three visual modes are available in Settings: Classic, Geometry, and High Contrast Geometry, which thickens keylines and drops the softened halo for a harder edge.

Why Geometry has to exist

We measured the shipped Classic palette to see how far apart Word A and Word B actually sit under different kinds of colour vision:

Measured colour separation between Word A and Word B in the Classic palette
VisionWord A vs Word B
NormalΔE 33
ProtanopiaΔE 13
DeuteranopiaΔE 3
GreyscaleΔE 2

Blue and purple become the same colour. No palette swap rescues a design that encodes two words as two hues — the shapes have to carry it. Classic stays pixel-identical for existing players, and a test asserts that this failure persists, because it is the justification for the whole feature.

Colourblind-friendly palettes

Six palette options ship in Settings:

  • Classic — blue and purple
  • Green-weak — blue and amber; the most common deficiency
  • Red-weak — blue and amber, warmer
  • Blue-weak — red and cyan
  • No colour — four brightness steps, for total colour loss
  • Custom — choose each colour yourself, checked as you go

Colour vision deficiency is not one condition, and a player often knows which hues they can separate better than any preset does. Each preset is validated against normal vision plus its own target deficiency — not against all of them at once, since red-green and blue-yellow deficiencies lose opposite axes, and satisfying every one forces the board onto a pure luminance ladder. That ladder already exists as the No colour preset, for the people who need it.

The colour picker checks itself

An unchecked picker is a hazard, not a feature — nothing stops someone choosing two colours that turn out identical to them mid-game. So every palette, preset or custom, goes through the same check, and the result is shown rather than hidden.

The settings screen simulates the real board through protanopia, deuteranopia, tritanopia and greyscale, using the same tile glyphs the game renders, so the preview cannot drift from the game. The person choosing usually cannot see the failure mode themselves; being told a verdict is not the same as seeing it.

Why ΔE and not WCAG contrast

The first validator required a 3:1 WCAG contrast ratio between all four tile states. Every palette failed, including hand-picked ones, and the reason was arithmetic: four states each 3:1 apart needs 3³ = 27:1 across the range, and the maximum possible ratio is 21:1. The bar was unreachable by construction.

WCAG contrast is also the wrong instrument here. It answers “can I read text on this background” — a pure luminance question. The question on a game board is “are these two swatches telling me different things”, where hue and chroma carry real information right up until a deficiency removes them. The validator uses CIE76 ΔE in Lab, which counts luminance and hue and degrades correctly when a simulation collapses an axis. The threshold is 25, comfortably above “noticeable” (~2.3).

Swatches, not a colour wheel

A hue/saturation wheel needs precise dragging — poor with motor impairments, effectively unusable with a screen reader. Discrete swatches are a simple list of buttons. They are labelled by role and position (“Left word, option 7 of 24”), never by colour name, because “blue” is not useful information to the people most likely to be on this screen.

Reduced motion

Tiles watch the iOS Reduce Motion setting and respond live, without a restart. When it is on, the tile reveal drops its 3D rotation entirely and becomes a plain cross-fade. Turning the setting on or off mid-game takes effect immediately.

Sharing without colour

A shared grid is the one artefact that lands in someone else’s hands, and the sender cannot know how they see colour. JopChi’s share format uses shapes rather than coloured squares, carrying identical information with no hue at all — and because it is keyed off tile state rather than tile colour, it preserves the resolved/unresolved distinction that colour alone cannot express. A test asserts no coloured emoji can appear in share output.

How this is verified

Screenshots prove a thing once, for one board, on one device. These checks are structural and keep proving themselves as the game changes:

  • Classic is untouched — every colour × every state renders identically with and without accessibility state, plus a guard that Geometry genuinely differs
  • All states distinguishable without colour — shape signatures are compared with every colour stripped; no two may collide
  • Ambiguity is never leaked — pre-Split misplaced letters must stay ambiguous
  • Every preset is usable — each validated against its own target deficiency
  • The picker is not a trap — a search of the real swatch list proves valid combinations are reachable, including one that survives total colour loss
  • Share carries no colour

Feedback

This site’s own colour pairs are built to meet WCAG 2.2 AA, with a visible focus ring, a skip link, and reduced-motion support throughout.

If something here does not work for you — on the site or in the app — we want to know. Email support@jopchi.com. We aim to respond within 2 business days.