Como calcular a melhor cor de tipo para uma cor de fundo aleatória?

Talvez eu precise apresentar o conteúdo em vários níveis, dependendo da distância do observador a uma exibição. Digamos que de longe o usuário perceba uma cor uniforme, mas a uma curta distância o usuário precisa ser capaz de ler algum texto. A parte complicada é que a cor do plano de fundo é dada / pode mudar / não tenho controle.

Até agora, escolhi um protótipo realmente básico para descobrir a cor do texto a partir da cor de fundo (clique para escolher um fundo aleatório). Essa é uma abordagem muito trivial: pego a tonalidade e a desloco em 90 graus (para que seja diferente o suficiente) e inverto o brilho no espaço de cores HSB, para obter uma cor diferente o suficiente para ser legível / ter um contraste decente com o fundo .

Isso às vezes funciona:

às vezes não:

Essa abordagem é boa / na boa direção? Se sim, como posso melhorar isso? Se não, qual direção devo seguir?

Infelizmente, eu não sei muito sobre teoria de tipos e cores, então qualquer dica / sugestão de pessoas com experiência é muito útil. Isso será exibido em uma tela, não impresso.

Que relações entre as cores de fundo e primeiro plano eu estou procurando?

A legibilidade tem tudo a ver com contraste. Eu tentaria determinar o quão escuro cada cor de plano de fundo está na escala de cinza e, se estiver acima de 50% de cinza (mais escuro que a luz), use texto em branco, abaixo de 50% use texto em preto. Isso garantirá que você tenha pelo menos um contraste de 50% (diferença de tom) para tornar seu texto legível.

Esse método é muito mais fácil do que tentar jogar com cores complementares ou inverter e garante o máximo contraste tonal em qualquer cor.

Aqui, minha resposta anterior a essencialmente a mesma pergunta no Game Development Stack Exchange.

Para resumir, como as outras respostas aqui sugerem, você geralmente deve usar preto ou branco , dependendo de qual contrasta melhor com o plano de fundo. (Claro, se você preferir, dar uma leve tonalidade a uma das cores não afetará muito o contraste.)

Observe que, para determinar corretamente como uma cor escura ou clara aparece para o usuário, não basta apenas calcular a média dos valores de cores RGB (ou obter a luminosidade / valor de uma cor HSL / HSV). Em vez disso, você precisa levar em conta (pelo menos) dois efeitos:

1. não linearidade do dispositivo em que a cor é exibida , que (para cores RGB nas telas de computadores, pelo menos) tende a escurecer os tons médios e

2. a sensibilidade espectral do olho humano , que, grosso modo, faz com que a cor no meio do espectro visível (verde, amarelo, ciano) apareça mais brilhante do que aquelas próximas às bordas (azul, vermelho, roxo).

O primeiro problema pode ser explicado pela expansão gama , enquanto o segundo simplesmente exige uma ponderação não uniforme dos canais de cores R / G / B. Em conjunto, veja como calcular aproximadamente o brilho percebido de uma cor RGB e decidir se preto ou branco contrastaria melhor com ela:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Isso supondo que R, Ge Bsão números de ponto flutuante entre 0,0 a 1,0. Se você tem, por exemplo, números inteiros de 0 a 255, converta-os em flutuadores e divida-os por 255.

As constantes no código acima estão (aproximadamente) corretas para entrada sRGB ; você pode ajustá-los se estiver trabalhando em algum outro espaço de cores, embora os valores exatos realmente não importem tanto: para cores suficientemente escuras ou claras, a resposta será a mesma, de qualquer maneira, enquanto as cores que caem perto da borda contrastarão igualmente bem com preto ou branco de qualquer maneira.

Concordo com John, mantenha o texto o máximo possível em preto / branco, só para ter certeza, você também pode adicionar uma pequena quantidade de saturação ao texto e estará seguro. Aqui está um pequeno teste:

Veja 100% aqui: http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Faça o download do arquivo .ai (fonte) aqui para brincar: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai