CSS - white text on black background, looks bolder

This is not an optical illusion. It is an OS and browser related issue which still exists in 2018. This little snippet demonstrates the problem:

<div style="background-color: #000; font-size: 16px; position: relative;">
  <div style="color: #fff;">Hello World</div>
  <div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>

If you are sitting in front of a macOS box you might notice the white outlines. They are the result of over motivated font smoothing. Try using -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; to reduce this effect.

The text is bold because of the anti-aliasing algorithm being used in your browser. It's easy to verify. Take screengrabs in IE, Safari, Firefox and Chrome. They all anti-alias differently. Some make the text look thicker than others. Generally the better text looks white-on-black, the fatter it looks reversed.

There's a full explanation here: http://www.lighterra.com/articles/macosxtextaabug/

This will turn off anti-aliasing in most browsers:

body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}

Actually, it is a known bug:

I was able to fix this by using:

-webkit-font-smoothing:antialiased

Source: this article (cached on archive.org).

Kinda late, but it may still be useful to some.

Just remember this is not recommended. Unless you're on MacOS and are using light text on dark background.