Design Atlas
한국어
◐ Color

Simultaneous contrast

동시 대비

The same color looks different depending on what surrounds it — an illusion that proves color is always perceived relative to its context, never in isolation.

Also known as: Simultaneous color contrast색의 동시 대비
···
html
<div class="wrap">
  <div class="pane" id="paneA"><div class="sq"></div></div>
  <div class="pane" id="paneB"><div class="sq"></div></div>
  <div class="note">두 회색 사각형은 모두 <b>#8a8a8a</b> 입니다.</div>
</div>
css
.wrap{width:min(520px,94%);display:grid;grid-template-columns:1fr 1fr;gap:14px;justify-items:center}
.note{grid-column:1/-1;font:600 clamp(10px,2.6vmin,12px)/1.4 system-ui;color:var(--muted);text-align:center}
.note b{color:var(--fg)}
.pane{width:100%;aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;transition:background .8s;border:1px solid var(--line)}
.sq{width:38%;height:38%;background:#8a8a8a;border-radius:6px}
js
let hue = 20;
const paneA = document.getElementById('paneA'), paneB = document.getElementById('paneB');
function hsl(h, s, l) { return 'hsl(' + h + ', ' + s + '%, ' + l + '%)'; }
function render() {
  paneA.style.background = hsl(hue, 70, 28);
  paneB.style.background = hsl((hue + 180) % 360, 65, 80);
}
render();
setInterval(() => { hue = (hue + 47) % 360; render(); }, 2600);

The two squares below are pixel-for-pixel the identical gray, #8a8a8a. Yet the one on a dark background reads lighter, and the one on a light background reads darker — the brain computes "how bright relative to this surround," not an absolute value.

This is exactly why contrast can't be judged by eye alone. The moment a background color changes, the perceived contrast of any text or icon sitting on it changes too — so real design work always checks contrast against the actual final background, not a color value read off a picker.

The more saturated the background, the stronger the illusion, so it's worth extra caution any time a neutral element — an icon, a border — sits on a vivid background.

When to use

Re-check perceived contrast any time a background changes — the illusion persists even when the numeric ratio stays identical.