High-contrast body text

Quick implementation

body {
  color: oklch(0.88 0.01 260);
  line-height: 1.5;
}

@media (prefers-contrast: more) {
  body {
    color: oklch(0.96 0.01 260);
    letter-spacing: 0.02em;
    line-height: 1.7;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building an accessible CSS design system.

Goal: Automatically serve higher-contrast body text when the user's OS requests it — no JavaScript.

Technical constraints:
- Use @media (prefers-contrast: more) to apply the high-contrast overrides.
- Increase text lightness from ~0.88 to ~0.96 in oklch() — do not use hex or rgba().
- Add letter-spacing: 0.02em and line-height: 1.7 in the high-contrast state for readability.
- The default (non-high-contrast) state should use oklch(0.88 0.01 260) and line-height: 1.5.
- Do not use forced-colors — prefers-contrast is a softer, more composable approach.

Framework variant (pick one):
A) Plain CSS custom properties — define --text-color and override it in the media query.
B) Tailwind CSS — use a plugin or arbitrary variant for prefers-contrast: more.

Edge cases to handle:
- Headings may need a separate, higher contrast value (0.99 or pure white).
- Muted/secondary text (color: var(--muted)) should also be brightened in high-contrast mode.
- Avoid increasing font-weight in high-contrast mode — it affects layout metrics.

Return CSS only.

Why this matters in 2026

Users with low vision, contrast sensitivity, or aging eyes often enable high-contrast mode at the OS level. The prefers-contrast: more media query lets you honor that preference without relying on a separate high-contrast stylesheet or JavaScript toggle. It's the CSS equivalent of a system-level accessibility contract.

The logic

The oklch() color space makes contrast adjustments intuitive — the first value is perceptual lightness on a 0–1 scale. Bumping it from 0.88 to 0.96 in a dark-mode context meaningfully increases contrast against a dark background without blowing out to pure white. The additional letter-spacing: 0.02em and increased line-height improve legibility for users who find tightly-set text difficult to parse — particularly those with dyslexia or low vision.

Accessibility & performance

prefers-contrast: more is supported in all modern browsers. Because it's a CSS media query, the override is applied immediately at render time with no layout shift or flash. For design systems, consider defining the base color as a custom property (--text) and overriding just that property in the media query — this keeps the high-contrast logic in one place and automatically propagates to all elements using the token.