Contrast for Projection

프로젝터용 대비

Projectors and bright rooms wash out contrast far more than your monitor does — a pastel palette that looks fine on your laptop can vanish on the big screen.

Also known as: Projector contrastHigh-contrast slides
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="content">
    <p class="ttl" id="ttl"></p>
    <p class="body2" id="body2"></p>
  </div>
  <div class="wash"></div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);overflow:hidden;background:#faf6e8;border:1px solid var(--line)}
.slide.good{background:#141a33}
.badge{position:absolute;top:4%;right:4%;z-index:3;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);color:#b08b1a}
.slide.good .badge{color:#7ee0c0;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.25)}
.content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:9vmin 10vmin;gap:4%}
.ttl{margin:0;font:700 clamp(11px,3vmin,16px)/1.3 -apple-system,sans-serif;color:#e8d98a}
.slide.good .ttl{color:#ffffff;font-weight:900;border-bottom:4px solid #5be0b0;display:inline-block;padding-bottom:.15em}
.body2{margin:0;font:500 clamp(9px,2.2vmin,12px)/1.5 -apple-system,sans-serif;color:#cbbf8f}
.slide.good .body2{color:#c8d3ff}
.wash{position:absolute;inset:0;background:rgba(255,255,255,.5);mix-blend-mode:screen;pointer-events:none}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 워시아웃', '✓ 유지됨'], ttl: '이번 분기 목표', body2: '매출 20% 성장, 이탈률 절반으로 감소' },
  en: { badge: ['✕ Washed out', '✓ Holds up'], ttl: "This Quarter's Goal", body2: '20% revenue growth, churn cut in half' },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('ttl').textContent = t.ttl; el('body2').textContent = t.body2;
}
render();
setInterval(() => { n++; render(); }, 2200);

A projector never renders true black, and a room with mixed ambient light makes the whole screen look a shade brighter than it should. Contrast that looked plenty strong on your monitor can drop by half or more once it hits the actual screen.

The demo layers the same bright-light effect — a translucent white wash — over both versions. The ✕ (pale yellow text on a light background) nearly disappears under it, while the ✓ (bold white text on a dark background) stays clearly readable under the exact same wash.

Checklist: does converting the slide to grayscale still show a clear difference between text and background — a quick contrast check, has pastel or light-gray text actually been tested under a real projector or bright room, does important information use weight or size differences and not color alone.

When to use

When a venue or lighting condition is unknown in advance — an outside hall, a daytime conference — design for extra contrast rather than less.