Contrast in a dark UI: what to measure and what to fix
Dark interfaces fail contrast where a quick check misses: muted text, borders, focus rings and text on glass. The ratios that apply and how to fix each one.
Most dark interfaces pass a quick contrast check on their main text and fail on everything around it. The headline is fine. The timestamp, the placeholder, the input border and the focus ring are not, and those are the parts users need when something goes wrong.
The numbers
| Element | Minimum (WCAG 2, AA) |
|---|---|
| Body and interface text | 4.5 : 1 |
| Large text (about 24px, or 18.5px bold) | 3 : 1 |
| Input borders, focus rings, meaningful icons | 3 : 1 against neighbours |
| Disabled controls and pure decoration | No requirement |
The five places dark UIs fail
- Muted text on raised surfaces. It passes on the page background and fails on the card, which is lighter. Test against the lightest surface it can sit on.
- Placeholder text. Often set at a very low opacity; users read it as a disabled field. Keep it at your muted text level or higher.
- Input borders. A white border at eight per cent looks elegant and is invisible to many users. Inputs need their edge to pass 3 to 1, or a filled background that does.
- Focus rings. A ring in the brand colour at low opacity disappears on a dark ground. Use a solid ring with an offset.
- Text on glass or photos. The ratio changes with whatever shows through. Measure against the worst case, or add a scrim.
Fixing without flattening the look
The fix is almost never to make everything whiter. Lighten the muted text token by a step, keep decorative hairlines faint but give interactive borders their own stronger token, and put an opaque enough layer under text. Your design stays; three tokens change. This is why dark mode design tokens should be separate for decoration and for controls.
How to check
Browser dev tools show the contrast ratio when you inspect a text colour. For a full page, run an accessibility checker such as axe or Lighthouse, then check the cases they cannot see by hand: text over images, hover states and focus states. OKLCH makes the fixes predictable, because a change in its lightness value is a change you can see.
Glass Instrument UI pairs its dark look with a ui-ux-pro-max setup and a strict split: the skill owns the look, the usability pass checks things like contrast, and fixes happen inside the token ramp rather than by inventing a new grey.
Questions
What contrast ratio does text need?
WCAG 2 level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, which is roughly 24px, or 18.5px bold. Those ratios apply in dark mode just as in light.
Do borders and icons need contrast?
Parts of the interface a user needs to perceive, such as input borders, focus indicators and meaningful icons, need 3 to 1 against what is next to them under WCAG 2.1. Decorative dividers do not.
Is white on black the best contrast for dark mode?
It has the highest ratio, but pure white on pure black can feel harsh over long reading. A slightly off-white on a near-black keeps a high ratio and is easier on the eyes.