Why does ESPN subtly change the color of some of its article text?

Question

This is something that's bugged me for years: I'll be reading a story on ESPN and notice that the first paragraph is dark gray, and the second paragraph is often black. I've even taken a screenshot and used a color dropper to confirm, and indeed, the former is #333333 and the latter is #000000. Here's an example

Why is this? Is this deliberate? Or is it a weird styling oversight related to any text adjacent to a floating box? And as a sub-question, is there any known user experience benefit to using dark gray text over black text?

Answer 1

Looking at their markup, the main paragraph styling of articles is #333, which is common as many feel that pure black on white is too much contrast and hard on the eyes.

The second paragraph on that sample page is actually a div outside of the proper p markup. My guess is that this is malformed markup created by a less-than-perfect CMS and/or less-than-knowledgable content editor and/or an ugly hack to get around a crappy CMS (which is sadly a common issue).

In other words, it's a bug from what I see.

Answer 2

It's a method of drawing attention to important text; URL bars in Chrome, Firefox and IE do it now to draw focus on the top level domain, arguably the most important part of the URL,especially when trust and security are issues.

However ESPN's method seems to be a case of extreme over application. Rather than optimizing the content for scanning they have harmed it, as only one paragraph out of ~10 (in that article) is highlighted, and the rest is grayed out. This has multiple negative effects in this context.

Contrast is reduced for the majority of the content: This is okay in a URL bar as (presumably) the user cares less about the non-highlighted text, and more importantly there's not much of it. You don't sit down and read a single URL for 5 minutes. When you reduce the contrast of a whole news post you're just hurting my eyes (and OCD! Come on!)

Context is eliminated: My eyes are drawn right from the headline "Cowboys' Tony Romo does not practice" to the sentence "The puncture has been described as "small". That doesn't make any sense. I assume that this puncture happened to Tony Romo, maybe even with some extra thinking I can assume it's related to his lack of practice, but I have no idea what this puncture is. Focus should be drawn to the major points in context. Out of context, the fact that "the puncture" was "small" is meaningless.

Regarding whether it was deliberately I'm not entirely sure, but I don't believe it was done competently. Looking in the CSS that paragraph is simply missing the <p> tag. The fact that it is must be deliberate to a degree, but I can't imagine why they would be doing so, since they're trying to apply style to the whole article.