Boa cor do texto de primeiro plano para uma determinada cor de fundo

Question

Estou desenhando um botão de seleção de cor e eu estou procurando um bom e simples fórmula para obter uma cor bom texto (em primeiro plano) para uma determinada cor de fundo em RGB.

A simples tentativa seria apenas para tirar a cor complemento, mas isso vai produzir um botão estranho à procura de cores como vermelho azul ou puro puro.
Existe algo bem conhecido que faz isso?

Se é importante em tudo, eu estou usando QT.

Answer 1

Para o máximo de legibilidade, você quer contraste máximo brilho, sem entrar em tons que não funcionam juntos. A maneira mais consistente para fazer isso é ficar com negro ou branco para a cor do texto. Você pode ser capaz de chegar a esquemas mais esteticamente agradável, mas nenhum deles será mais legível.

Para escolher entre preto ou branco, você precisa saber o brilho do fundo. Este fica um pouco mais complicado, devido a dois fatores:

• O brilho percebido das primárias individuais de vermelho, verde e azul não são idênticos. O conselho mais rápido que eu posso dar é usar a fórmula tradicional para converter RGB para cinza - R * 0,299 + G * 0,587 + B * 0,114. Há muitas outras fórmulas.

• A curva de gama aplicada aos monitores torna o valor de cinza médio mais elevado do que você esperaria. Isso é facilmente resolvido usando 186 como o valor médio em vez de 128. Nada menos do que 186 deve usar texto branco, qualquer coisa maior do que 186 deve usar texto preto.

Answer 2

Não sou especialista em programação de coisas relacionadas com a RGB, mas do ponto de vista de um designer, muitas vezes a cor mais legível será apenas uma muito mais leve (se a cor de fundo é escura) ou mais escura (se a cor de fundo é a luz) versão do mesmo tom.

Basicamente você levaria seus valores RGB e se eles estão mais perto de 0 (escuro) você empurrá-los cada-se de um montante igual para sua cor de primeiro plano, ou vice-versa, se é um BG luz.

cores complementam pode realmente ser muito doloroso para os olhos para facilitar a leitura.

Answer 3

Leverage um esboço para a legibilidade

Se pelo "boa cor do texto (em primeiro plano)" que você pretende-la para legibilidade fins quando os escolhe usuário any background colour, você sempre pode produzir texto branco que tem um contorno preto. Ele será legível em qualquer fundo sólido, estampados ou inclinação, de preto através branco e qualquer coisa entre os dois.

Mesmo que isso não atingiu a marca de sua intenção, eu acho que vale a pena postado aqui porque eu vim à procura de soluções semelhantes.

Answer 4

Com base no topo da resposta de Marcos, aqui está algum código Ruby que vai fazer o trabalho

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

Answer 5

Você é melhor fora com uma grande diferença de luminosidade. Em geral, fundos coloridos com texto colorido sugar para facilitar a leitura, prejudicando os olhos ao longo do tempo. cores levemente fumados (por exemplo em HSB, S ~ 10%, B> 90%) com fina preto texto trabalho, ou o texto matizado levemente sobre um fundo preto. Eu ficaria longe de coloração ambos. texto escuro (b ~ 30%, s> 50%) com uma coloração sutil sobre um fundo branco também pode ser fino. (Âmbar) Texto amarelo sobre um fundo azul profundo tem excelente legibilidade, assim como o âmbar ou verde no preto. Esta é dumbterms por antigos (VT100, VT52, etc.) passou para essas cores.

Se você realmente precisa fazer cor-on-cor para o 'look', você poderia inverter ambos H e B, enquanto fixando saturação em um moderado a baixo nível.

E uma última nota: se você tem um fundo cinza 50%, repensar a sua interface. Você está se privando de metade da sua gama dinâmica! Você está alienando os usuários de baixa visibilidade, incluindo qualquer pessoa com mais de 35 ...

Answer 6

Combinações de cores, muitas vezes olhar terrível quando não for cuidadosamente escolhido. Por que não usar branco ou preto para o texto, dependendo do brilho da cor. (Será necessário converter para HSB em primeiro lugar.)

Ou deixar o usuário escolher texto preto ou branco.

combinações

Ou uso pré-definido. Isto é o que o Google faz em seu produto calendário.

Answer 7

Eu estive procurando uma resposta simailr e me deparei com este post e alguns outros que eu pensei que eu iria partilhar. De acordo com a http://juicystudio.com/services/luminositycontrastratio.php#specify o " Critério de sucesso 1.4.3 do WCAG 2.0 requer a apresentação visual de texto e imagens de texto tem uma relação de contraste de pelo menos 4,5: 1" com algumas exceções. Que o site permite que você coloque em primeiro plano e cores de fundo para calcular seu contraste, apesar de que seria útil se ele iria sugerir alternativas ou intervalos.

Um dos melhores sites que eu encontrei para a visualização de contraste de cores é http://colorizer.org/ Ele permite ajustar quase todos os tipos de escalas de cores (RGB, CMYK, etc.), ao mesmo tempo e, em seguida, mostra o resultado na tela, tais como texto em branco sobre um fundo amarelo.

Answer 8

Eu costumo olhar para complementos de cores, eles também têm rodas de cor complemento à ajuda

http://www.makart.com/resources/artclass/cwheel.html

Se a sua cor é HSL, virar a Hue em 180 graus para um cálculo decente

Answer 9

coisa que eu que a conversão para HSV pode ser o caminho, mas IMO mudando matiz ficaria estranho. Eu tentaria manter o matiz e brincando com valor e talvez de saturação (botões vermelhos de luz com sons vermelho escuro texto ... hm assustadores :-)).