The text on the top has the opacity of 0.5. The other image has a color of #dddddd (hex).
This is the code I am using:
<p style="font:60px Arial;font-weight:bold;opacity:0.5">Hello!</p>
<p style="font:60px Arial;font-weight:bold;color:#888">Hello!</p>
The text on the top has jagged edges. I'm wondering why that is.
I don't know why that is, but just for testing, try use RGBA instead of opacity (it's better practice after all, yet IE doesn't support it)
One possible answer could be that the top sample was rendered as black on white (or transparent) with the assumed gamma value for the anti-aliasing based on that. Once it was rendered on a white background with 0.5 opacity, the values of the pixels would all be increased by 50% and the gamma value would no longer be right to ensure the perception of smooth changes between the pixel values.
At least that's my guess. Hope it makes sense.