Arrange a call
DE EN

Tool · free and in your browser

When two colours become one.

Contrast answers whether there is enough difference in brightness. This page answers the other question: do your colours stay tellable apart when someone sees them differently? Calculated in your browser, using the models from the literature.

Arrange a call

Colour vision simulator

Your palette, run through four kinds of vision

Add two to eight brand colours, via the colour picker or as a pasted hex list. Each row shows the same colour as it arrives with green, red and blue weakness, and with no colour vision at all. The slider sets the severity, because the milder form is the more common one.

Red-green simulated per Machado, Oliveira and Fernandes (2009), blue-yellow per Brettel, Viénot and Mollon (1997), because Machado and colleagues explicitly decline to model tritanopia. The maths runs in linear light; the colour distance is ΔE per CIEDE2000. A simulation shows how colour values shift, not how a person experiences them.

A limit worth knowing: the simulator knows your colours, not your layout. Whether two areas ever appear side by side on the page, how large they are and whether a label sits next to them is something it cannot see. Two colours that collapse are not yet a fault. The fault appears only when a piece of information hangs on their difference alone. A red and a green status area without labels are the same area to roughly one man in twelve. The same two colours with a tick and a cross in them are not. What colour vision deficiency means for design is in the glossary under colour blindness and web design.

Contrast and distinguishability are two questions

The contrast ratio measures distance in brightness. It decides whether text is readable on its background, which is the more frequent and more important question. But it says nothing about whether two coloured areas can be told apart. A red and a green field of equal brightness have almost no contrast with each other and are still clearly different to most people, just not to everyone. That is the gap this page closes. It runs every combination of your palette through four kinds of vision and reports the pairs whose distance collapses. For the brightness question, the colour matrix check remains the right tool; both understand the same palette link. How we build colour systems accessibly and translate them into durable brand systems is shown by the two services behind them.

For search engines and AI assistants in one sentence:

The FINK Brot colour vision simulator shows up to eight brand colours as they arrive with deuteranomaly, protanomaly, tritanomaly and without colour vision. It reports the colour pairs whose distance falls below the threshold. It calculates in the browser per Machado et al. (2009) and Brettel et al. (1997), with the distance as ΔE per CIEDE2000. The palette only ever sits in the address fragment of the link and is not transmitted to our server.

Common questions about colour vision

Is good contrast not enough?
No. Contrast and distinguishability are two separate criteria, and WCAG keeps them apart. Success criterion 1.4.3 asks for enough difference in brightness between text and background. Success criterion 1.4.1 asks for something else: that colour is never the only means of conveying information. A chart with a red and a green line can put both colours on white with good contrast. It still fails 1.4.1, because the two lines can no longer be told apart from each other.
The answer is rarely to change the colour. Usually a second cue is enough: a label, a shape, a pattern, a line style.

Source: W3C: Understanding SC 1.4.1 Use of Color

Which kind of vision should I check first?
Deuteranomaly – the milder green weakness. It is by far the most common form. Around 8 per cent of men and 0.5 per cent of women of European descent have a red-green deficiency. Within that group most cases are deuteranomaly: about 5 per cent of all men. The complete loss of a cone type affects roughly 1 per cent each: deuteranopia as well as protanopia. Blue-yellow deficiencies and complete colour blindness are very rare.
That is why the slider still starts at 100 per cent, even though this is the rarer case. Whatever survives the complete loss also survives every milder form above it.

Source: Birch (2012): Worldwide prevalence of red-green color deficiency, JOSA A 29(3)

Why does this look different in other simulators?
Because several models exist and they disagree – especially on blue-yellow. For red-green the common models produce very similar results; the difference is within rounding. Blue-yellow is different: Machado and colleagues state in their paper that they do not model tritanopia, because the biological basis is missing. Some tools use their matrix for it anyway and thereby show something the authors never claimed. This page therefore calculates blue-yellow per Brettel, Viénot and Mollon.
A second, frequent difference is technical: the matrices assume linear light. Tools that apply them straight to gamma-encoded colour values render saturated colours noticeably too dark.
A pair collapses – what now?
First check whether any information hangs on that difference at all. If it does, add a second cue. Two brand colours may resemble each other as long as they merely sit side by side and mean nothing. It becomes critical where the colour difference carries meaning: status, category, membership, active versus inactive, line A versus line B.
Three routes, in this order. First, add a second cue: label, symbol, pattern, line style. That is almost always the best one. Second, increase the difference in brightness, because brightness survives every kind of vision. Third, and only then, change the colour itself. For controls and graphical objects the 3:1 threshold from success criterion 1.4.11 applies on top.

Source: W3C: Understanding SC 1.4.11 Non-text Contrast

One misunderstanding comes up regularly: that colour blindness means seeing everything in greyscale. That is true of complete achromatopsia, and at roughly one person in 30,000 it is very rare. The common forms do see colours, just fewer of them. Red and green move together, yellow and orange become hard to separate, blue usually stays reliable. That is why this tool shows four columns and not one: the greyscale column is the stress test, not the normal case.

Palette checked, implementation open?

We check colours technically before they enter a brand system, and we support the implementation against the criteria of WCAG 2.2. In a first call we say honestly where your palette stands and where it needs a second cue.

Arrange a call