Why this word game isn’t green and yellow
5 min read
Almost every word game with coloured feedback picks green and yellow. It is the obvious choice — green reads as correct, yellow as nearly — and it is close to the worst pair available for a game where colour carries the meaning.
Roughly 8% of men of Northern European descent have red-green colour vision deficiency, against about 0.4% of women. One man in twelve. Green and yellow sit on exactly the axis those eyes compress, so the two signals that matter most are the two most likely to collapse into each other.
This game is blue and amber instead, and the colours are the least of what makes the board readable. Here is the whole of it.
Blue and amber, and why that axis
Human colour vision runs on two opponent channels: red–green, and blue–yellow. The common inherited deficiencies — protanopia and deuteranopia — degrade the first and leave the second essentially intact. So a signal pair chosen along the blue–yellow axis survives the condition that a green/yellow pair does not.
| Role | Light theme | Dark theme | Contrast on the page |
|---|---|---|---|
| Hit | #0B6E99 | #59B6E0 | 5.00 : 1 / 7.68 : 1 |
| Near | #9A5B12 | #E5A35C | 4.78 : 1 / 8.12 : 1 |
| Out | #5B6B7A | #8B9DAE | 4.84 : 1 / 6.29 : 1 |
The thing colour cannot do
Now the uncomfortable number. The hit blue and the near amber have a contrast ratio against each other of 1.05 to 1. They are nearly the same lightness. Print the board in greyscale and the two would be almost indistinguishable.
That is not an oversight — it is what happens when you pick two colours that are both legible on the same background. And it settles the design question underneath all of this: colour here is doing hue work, not lightness work, and hue is the channel that fails first for the most people. So colour is never allowed to be the only signal.
What the shapes are
The scratchpad
Tap a letter in a past guess to cycle how you have reasoned about it. Each state is a different glyph before it is a different colour:
| Mark | Shape | Also | Means |
|---|---|---|---|
| Hit | ◼ filled square | blue | You believe this letter is in this position |
| Near | ◨ half-filled square | amber | In the word, but not here |
| Out | ◻ open square | struck through, dimmed | Not in the word at all |
The engine’s own reply
The tally is not a coloured blob with a number in it. It is drawn as real pencil tally marks — four uprights and a crossed fifth — so the count is readable as a quantity of strokes before colour enters into it at all. Two rows of strokes at different lengths are distinguishable by anyone.
The two registers are also deliberately different in weight: the engine speaks in solid full-strength ink, your own scratchpad marks are the hollow pencil register. If those ever converged, the board would start implying it had told you something it had not.
Beyond colour
- Every tile is labelled. Each one announces its row, its position, its letter and its mark — “Row 2, letter 3: A, marked as near” — so the board is navigable without seeing it.
- Every guess is announced as a sentence. “CRANE. Two hits, one near. Four guesses left.” That is the entire game state in one line.
- The board is fully keyboard operable. Type to guess, arrow keys to move between letters, Space to cycle a mark. No pointer required anywhere.
- Motion is optional. The stroke animation respects
prefers-reduced-motion, and there is an explicit toggle in settings for people whose system preference does not reflect what they want here. - The share card is plain text. ◼ and ◻ glyphs, not coloured squares, so it survives being pasted anywhere and reads correctly aloud.
One deliberate omission
The live score beside the board updates every second, and it is not a live region. Announcing a number that changes once a second would make the game unusable with a screen reader — the announcement would never stop and would talk over everything else. It carries a plain label and is read on demand, like any other text on the page.
That is the kind of decision that looks like a gap in an automated audit and is the opposite of one. Worth saying out loud, because “add aria-live to everything that changes” is advice that makes interfaces worse.
What this is not
No formal audit has been done, and nobody here is claiming a conformance level. What has been done is specific and checkable: contrast ratios computed against the shipped tokens, shape redundancy on every colour-carrying state, labels and a live sentence for the board, complete keyboard operation, and a reduced-motion path.
If you play with a screen reader or with colour vision deficiency and something here does not work, that is a bug and worth telling us about — the above is what we built for, not evidence that it lands.
Sources
Prevalence figures are from the worldwide review of red-green colour deficiency indexed at PubMed 22472762, which puts European Caucasian prevalence at about 8% in men and about 0.4% in women. Contrast ratios are WCAG 2.1 relative-luminance calculations against the palette in the shipped stylesheet. The rest of the design reasoning is on the about page.