Why does text add other colors to itself when displayed on a computer? Example image is a screenshot of text set to black on a webpage
Why does text add other colors to itself when displayed on a computer? Example image is a screenshot of text set to black on a webpage
You're viewing a single thread.
Looks like anti-aliasing - an attempt to make the text look smooth to your eyes by adding additional colours.
Can I ask what hardware/OS you are using? This almost looks like older sub-pixel rendering
This is definitely Sub-Pixel Rendering.
Anti-Aliasing is a different technique that's makes sharp edges look softer by adding more grays, but generally it'd not add other colors as you see here. We also don't generally apply AA to small text as we actually want it to look crisp.
Sub-Pixel Rendering exploits the fact that each pixel of a typical LCD is made up of three color in a horizontal row.
If you had a perfectly white screen and wanted to add one black dot, the simplest way is to turn off the RGB of a single pixel. However you could also get the same effect by turning off the GB of one pixel and the R of the next pixel. This allows you to move the dot by 1/3rd of a pixel. This is what get exploited to make text more legible.
I have latest update Windows 11, the latest update Google Chrome, and my PC hardware is:
- 3070ti GPU
- Ryzen 7 5800x CPU
- TUF Gaming x570 motherboard
So not really old hardware. But anti-aliasing sounds like the right answer, and it makes complete sense. Now I'd like to see what a webpage looks like without it!
I believe you can actually see what text looks like without this effect of you turn off ClearType text in windows display settings.