Por que o navegador adiciona cores azuladas e acastanhadas a uma cor sólida da fonte?

Pergunto-me por que meu navegador (Firefox) adiciona tonalidades azuis à direita e marrons à esquerda de uma cor de fonte cinza sólida (# 333333), como mostra a imagem abaixo.

Alguém poderia me explicar por que isso acontece?

É chamado de renderização de subpixel ou anti aliasing de subpixel. A Microsoft faz algo semelhante para a maioria dos aplicativos do Windows.

Sua tela consiste em cores próximas umas das outras. Se você fizer um simples anti-aliasing baseado em amostra, não obterá o melhor resultado possível. Mas, aproveitando o conhecimento de como os pixels são dispostos, você pode obter melhores resultados. Como você trabalha com menos de um pixel de dados.

Você deve ter cuidado com isso embora. Monitores diferentes têm diferentes disposições para a emissão de cores (daí o sintonizador mencionado por @PaoloGibellini). Portanto, se você estiver preparando capturas de tela de alta qualidade, pode ser uma boa idéia desativar a renderização do subpixel, ou você receberá um erro 2 vezes *. Da mesma forma, se você capturar capturas de tela para impressão, é melhor desativá-lo ou o seu texto parecerá um arco-íris manchado.

^{* Uma vez pelo monitor, que tem uma ordem e uma vez pela imagem, que tem uma ordem diferente}

Isso é chamado de renderização de subpixel . As cores diferentes são visíveis apenas porque a imagem foi ampliada. Será mais fácil dar um exemplo de branco em preto.

Imagine uma linha branca de um pixel de espessura. Na maioria das telas de LCD de mesa, as cores dos subpixels individuais são organizadas horizontalmente. Enquanto os três pixels coloridos estiverem ativados, veremos uma linha branca com um pixel de espessura - não importa em que ordem as cores estão. É isso que as duas primeiras linhas mostram. O uso da renderização de subpixel aumenta a resolução horizontal da tela em três vezes, o que é especialmente útil ao ler texto horizontal.

Mas quando você captura uma imagem e a amplia, em vez de ver os subpixels, vê as cores que eles combinam para produzir. Quando nossa linha de um pixel está alinhada com os pixels, você apenas vê uma linha branca de um pixel. Mas se não for, você verá uma linha de dois pixels de espessura composta por duas cores. Você pode vê-lo pessoalmente se estiver próximo o suficiente da tela para ver as lacunas entre os pixels - se estiver próximo o suficiente, seus olhos poderão não resolver os pixels divididos juntos e você verá a linha como sendo dois pixels de largura. Mas se a resolução da tela for alta o suficiente, a renderização de subpixel pode funcionar muito bem e só será notada quando você aumentar as capturas de tela.