Dark mode contrast done right: APCA vs WCAG
Last updated: 20 August 2026 · By the Eclipse team — our engine solves text contrast with APCA, so this describes a decision we actually had to make.
The short answer: the familiar accessibility rule — a contrast ratio of at least 4.5:1 — was derived for dark text on light backgrounds, and it systematically misjudges the reverse. That is why a dark theme can pass every automated contrast check and still be unpleasant to read. Perceptual models such as APCA exist because dark mode is not a mirror image of light mode, and treating it as one produces palettes that are technically compliant and practically tiring.
What WCAG’s ratio measures
The WCAG contrast ratio compares the relative luminance of two colours and produces a number between 1:1 and 21:1. The rule most people know is 4.5:1 for normal text, with allowances for large text and exemptions for incidental text and logotypes.
It is genuinely useful. It is objective, trivially computable, and has done enormous good by giving designers a number to be held to. The criticism below is not that it is worthless — it is that it is the wrong instrument for one specific job.
Why it misjudges dark mode
The formula is symmetrical: swap foreground and background and you get the same number. Human vision is not symmetrical. Light text on a dark field and dark text on a light field behave differently, for reasons that are partly optical and partly neurological:
- Pupil size changes with the background. A dark screen opens your pupil, which reduces depth of field and exposes more optical aberration — the mechanism behind halation.
- Bright shapes bloom on dark fields. Light spreads into surrounding darkness, thickening and smearing thin letter strokes. The reverse — dark strokes on light — does not bloom the same way.
- Font weight interacts with polarity. Thin text that reads cleanly as dark-on-light can become mush as light-on-dark at the identical ratio.
The consequence is concrete: maximising the WCAG ratio in dark mode makes things worse. Pure white on pure black is 21:1, the best possible score, and it is the single most fatiguing combination on a screen.
What APCA does differently
APCA — Advanced Perceptual Contrast Algorithm — models perceived lightness difference rather than a raw luminance ratio, and it is directional: it knows which colour is the text and which is the background, and produces different results when you swap them.
Practical guidance that falls out of it:
- Dark mode and light mode should not be simple inversions of one another.
- Avoid highly saturated or maximally bright text on near-black, even when it “passes.”
- Prefer softer off-white text, reduced saturation, and a slightly elevated background tone.
- Font size and weight are part of the contrast question, not separate from it.
Numbers worth knowing
| Combination | WCAG ratio | Actually good to read? |
|---|---|---|
| #FFFFFF on #000000 | 21:1 | No — maximum halation and fatigue |
| #E6E6E6 on #121212 | ~15:1 | Yes — a common well-tuned default |
| #B0B0B0 on #121212 | ~7:1 | Comfortable for body text |
| #808080 on #121212 | ~4.6:1 | Passes, but thin at small sizes |
| Saturated cyan on #000000 | Often passes | No — blooms badly |
Note rows one and five. Both satisfy the rule. Both are bad. That gap is the entire reason this article exists.
A practical target
For sustained reading in dark mode, a widely used recommendation is to aim around 6:1 for body text rather than settling at the 4.5:1 minimum — while deliberately staying well below the maximum. Contrast is not a score to max out; it is a band to sit inside.
Why this is hard to automate
A dark mode extension has to pick a text colour for every text element on a page it has never seen. The naive approaches both fail: a fixed light grey for all text ignores the actual background behind each element, and pushing everything toward white maximises the ratio and the halation together.
Eclipse solves each text colour against its own resolved background using APCA, targeting a readable band rather than an extreme, and damps chroma on transformed colours because saturated tones read as more intense against dark surfaces. The brightness and contrast sliders then let you move the whole band — which matters, because the right setting depends on your eyes and your room, and no automatic default can know either.
Try it yourself: Eclipse applies a generated dark theme to any site, with per-site overrides and live brightness and contrast controls. Free, no account, no site limits.
If you are designing your own dark theme
- Start the background near
#121212, not#000000. - Use off-white, not pure white, for primary text.
- Desaturate accent colours relative to their light-mode versions.
- Consider a slightly heavier font weight than your light theme uses.
- Build a real elevation scale with progressively lighter surfaces rather than borders alone.
- Test in a genuinely dark room, which is where dark mode is actually used.
Related guides
Dark Mode and Astigmatism: Why Text Glows
If white text on black smears or halos for you, that is halation — and it affects a large minority of readers. What to change instead of giving up.
Is Dark Mode Better for Your Eyes? What the Research Says
The honest answer is “sometimes, and less than you think.” What ophthalmologists actually say about eye strain, and who genuinely benefits.
Why Inverting Colours Isn’t Dark Mode
Inversion flips your brand blues to orange and your photographs to negatives. What a real generated theme does differently, in colour-space terms.
How Dark Mode Extensions Actually Work
CSS filters, stylesheet rewriting, and generated themes are three different machines. Knowing which one you are running explains every quirk you have hit.