Colour is a wonderful reinforcement and a terrible sole messenger. Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, so any time a design leans on colour alone to say “correct,” “danger,” or “this team versus that one,” a meaningful slice of people cannot read it. This tool helps you catch two of the most common failures early: text that does not stand out enough from its background, and palettes whose distinct-looking colours collapse into near-identical shades for a colourblind viewer.
What this tool does
The contrast checker computes the WCAG 2.x contrast ratio between a foreground and a background colour and tells you, at a glance, whether that pairing passes AA and AAA for both normal and large text. The colour-vision simulator takes a small palette and renders each colour side by side with how it appears under the three main forms of colour blindness — deuteranopia, protanopia, and tritanopia — so a palette that quietly collapses becomes obvious. For the theory and the practical design fixes behind all of this, read our companion post, designing games colorblind players can actually play, and the studio’s accessibility guide.
Why colour-only encoding fails
When two colours collapse toward each other in a viewer’s perception, everything pinned to that difference collapses with them: the red enemy bar and the green friendly bar become one murky bar; the “click the red gems” objective becomes a guess. Red–green deficiency is by far the most common, which is exactly why the red/green pairing — so beloved of “good versus bad” — is the single riskiest choice you can make. The fix is never a special mode; it is a habit: never let colour be the only channel carrying the message. Reinforce it with shape, an icon, a label, a pattern, or position, and differentiate on lightness as well as hue so a distinction survives even when the hues merge.
How to read the results
For the contrast checker, a higher ratio is better; the maximum is 21:1 (pure black on pure white). WCAG defines two conformance levels and two text sizes — “large text” means roughly 18.66px bold or 24px regular and above. The thresholds are:
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
For the simulator, compare each row left to right. If two swatches that look clearly different in the “Original” column become hard to tell apart in the deuteranopia, protanopia, or tritanopia columns, that pair is unsafe to rely on for meaning — add a second, non-colour channel, or pick colours that also differ in lightness.