Are the two circles actually the same colour?

Yes — both are rendered from the single value you chose. The difference in appearance comes entirely from the surrounding panels.

Why black and white specifically?

Because they are the extremes, so they produce the largest perceptual shift a display can demonstrate. Real interfaces usually surround a colour with mid-tones, where the effect is smaller but still present.

Can I use a grey background instead?

Not on this page — the two panels are fixed at black and white. A mid-tone comparison would need to be set up in a design tool.

Does it measure the effect?

No. The shift is perceptual rather than numerical, and the underlying values are identical by construction, so there is nothing to measure — the comparison is the output.

What does the simultaneous contrast visualizer not do?

There is no way to sample the two circles, no calculation of how much lift is applied, and no indication of how large the shift is in any formal colour model — the point is that the shift is perceptual rather than numerical, since the underlying values are identical by construction. It is also purely a demonstration of

Simultaneous Contrast Visualizer

Color

You Might Also Need

Bezold Effect Visualizer

Visualize the Bezold spreading effect

Color Context Simulator

See the same color on different backgrounds

Print Color Accuracy Checker

Estimate how a screen color prints

RGB Cube Visualizer

Visualize colors in an RGB cube

The simultaneous contrast visualizer shows one color as a circle on both black and white backgrounds, side by side, so the way the surroundings change its appearance can be seen directly.

What is Simultaneous Contrast Visualizer?

The simultaneous contrast visualizer places a single colour as a circle inside two panels, one filled with black and one with white, next to each other.
Choose the colour with the field and both circles update.
Nothing is measured and nothing is labelled, because the demonstration is the output: the two circles are rendered from an identical hex value and they will not look identical.

What you are seeing is simultaneous contrast, one of the oldest known effects in colour perception. It is the classic color perception illusion, and it explains why contrast illusion colors cannot be judged from a value: the eye does not judge a colour in isolation, it judges it relative to its surroundings, and a small area inside a large area is pulled perceptually away from that surround. On black, the colour appears lighter and more luminous; on white, the same value appears darker and slightly denser. The illusion persists even when you know the two values are the same, which is precisely why it is worth having a page that shows it — knowing about the effect does not switch it off.

Why colors look different on different backgrounds is not a curiosity either — the practical consequences are everywhere in interface work, and they are the reason this belongs alongside the accessibility tools rather than among the toys. A brand colour chosen from a swatch on a white page will look noticeably lighter when it is applied as text or an icon on a dark header, so a palette signed off in one context can feel different in another. Two surfaces that read as clearly distinct in a mockup can appear nearly identical once they occupy different proportions of a screen. And a mid-tone placed beside a very dark tone will appear brighter than the same mid-tone placed beside a very light one, which is how hierarchy emerges from nothing more than adjacency.

The choice of the two surrounds is deliberate and worth noting. Black and white are the extremes, so they produce the largest perceptual shift a screen can show; that makes this the clearest version of the effect, and it also means it is not the version you will meet most often. In a real interface, the surrounds are mid-tones and the shift is smaller, though still real. There is no third background option here, so a mid-grey comparison has to be set up elsewhere.

What the tool does not provide is any measurement of the effect.

There is no way to sample the two circles, no calculation of how much lift is applied, and no indication of how large the shift is in any formal colour model — the point is that the shift is perceptual rather than numerical, since the underlying values are identical by construction.
It is also purely a demonstration of surrounds, not of the related effects that come from size, motion or contrast with adjacent edges.

Used as a quick check on a palette, it earns its place in a review. When a colour has been approved on one background and has to work on another, putting it through here shows whether it will still read the same way — and for any interface that mixes light and dark surfaces, that is a question worth answering with the eye rather than with the hex value. As a simultaneous contrast visualizer it does one thing, but it does it in the way the effect is best understood: two identical circles, two surrounds, and the difference your own eye supplies.

How to use Simultaneous Contrast Visualizer

Pick the colour you want to test with the field.
Compare the circle on the black panel with the circle on the white panel.
Judge how the appearance shifts, and whether the colour still works on both kinds of surface.

When to use Simultaneous Contrast Visualizer vs related tools

Use this when a colour has to work on both light and dark surfaces, or when teaching why a palette looks different in context. Use the contrast checker when the question is legibility rather than appearance. For the neighbouring steps, see the color wheel theory guide and the bezold effect visualizer.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.