Eu quero mostrar algumas imagens como este exemplo
A cor do preenchimento é decidida por um campo na base de dados com a cor hexadecimal (ex: ClassX -> Cor: # 66FFFF). Agora, quero mostrar os dados acima de um preenchimento com a cor selecionada (como na imagem acima), mas preciso saber se a cor é escura ou clara, para que eu saiba se as palavras devem estar em branco ou preto. Há algum jeito? tks
Respostas:
Com base na minha resposta a uma pergunta semelhante .
Você precisa dividir o código hexadecimal em três partes para obter as intensidades individuais de vermelho, verde e azul. Cada 2 dígitos do código representa um valor em notação hexadecimal (base 16). Não vou entrar em detalhes da conversão aqui, eles são fáceis de procurar.
Depois de ter as intensidades para as cores individuais, você pode determinar a intensidade geral da cor e escolher o texto correspondente.
O limite de 186 é baseado na teoria, mas pode ser ajustado ao gosto. Com base nos comentários abaixo, um limite de 150 pode funcionar melhor para você.
Edit: O acima é simples e funciona razoavelmente bem, e parece ter uma boa aceitação aqui no StackOverflow. No entanto, um dos comentários abaixo mostra que isso pode levar ao não cumprimento das diretrizes do W3C em algumas circunstâncias. Com isso, derivo uma forma modificada que sempre escolhe o maior contraste com base nas diretrizes. Se você não precisa estar em conformidade com as regras do W3C, eu continuaria com a fórmula mais simples acima.
A fórmula dada para contraste nas Recomendações do W3C é
(L1 + 0.05) / (L2 + 0.05)
: ondeL1
está a luminância da cor mais clara eL2
é a luminância da mais escura em uma escala de 0,0-1,0. A luminância do preto é 0,0 e o branco é 1,0, portanto, a substituição desses valores permite determinar o que tem maior contraste. Se o contraste para preto for maior que o contraste para branco, use preto; caso contrário, use branco. Dada a luminosidade da cor que você está testando à medida queL
o teste se torna:Isso simplifica algebricamente:
Ou aproximadamente:
A única coisa que resta é calcular
L
. Essa fórmula também é fornecida nas diretrizes e parece com a conversão de sRGB em RGB linear seguida pela recomendação ITU-R BT.709 para luminância.O limite de 0,179 não deve ser alterado, pois está vinculado às diretrizes do W3C. Se você achar que os resultados não são do seu agrado, tente a fórmula mais simples acima.
fonte
#D6B508
um valor de 171, portanto, um contraste de branco. O contraste deve ser preto, no entanto (confirmado aqui: webaim.org/resources/contrastchecker )Não aceito crédito por esse código, pois não é meu, mas deixo aqui para que outras pessoas o encontrem rapidamente no futuro:
Com base na resposta de Mark Ransoms, aqui está um trecho de código para a versão simples:
e aqui está o trecho de código da versão avançada:
Para usá-los, basta ligar para:
Além disso, obrigado
Alx
echetstone
.fonte
isDark(bgColor)
meu uso é então apenas'color': isDark(color)?'white':'black'
Que tal isso (código JavaScript)?
fonte
Além das soluções aritméticas, também é possível usar uma rede neural de IA. A vantagem é que você pode adaptá-lo ao seu próprio gosto e necessidades (ou seja, o texto esbranquiçado em vermelhos saturados brilhantes parece bom e é tão legível quanto o preto).
Aqui está uma demonstração clara de Javascript que ilustra o conceito. Você também pode gerar sua própria fórmula JS diretamente na demonstração.
https://harthur.github.io/brain/
Abaixo estão alguns gráficos que me ajudaram a resolver o problema . No primeiro gráfico, a luminosidade é constante 128, enquanto o matiz e a saturação variam. No segundo gráfico, a saturação é uma constante 255, enquanto a tonalidade e a luminosidade variam.
fonte
Aqui está minha solução em Java para Android:
fonte
Com base na resposta de @MarkRansom, criei um script PHP que você pode encontrar aqui:
fonte
Esta é uma versão rápida da resposta de Mark Ransom como uma extensão do UIColor
fonte
Este é apenas um exemplo que mudará a cor de uma marca de seleção SVG ao clicar em um elemento. Ele definirá a cor da marca de seleção como preto ou branco com base na cor de fundo do elemento clicado.
https://gist.github.com/dcondrey/183971f17808e9277572
fonte
Eu uso essa função JavaScript para converter
rgb
/rgba
para'white'
ou'black'
.Você pode inserir qualquer um desses formatos e ele produzirá
'black'
ou'white'
rgb(255,255,255)
rgba(255,255,255,0.1)
color:rgba(255,255,255,0.1)
255,255,255,0.1
fonte
A resposta detalhada de Marcos funciona muito bem. Aqui está uma implementação em javascript:
Em seguida, pode chamar esta função
lum([111, 22, 255])
para obter branco ou preto.fonte
Eu nunca fiz nada assim, mas que tal escrever uma função para verificar os valores de cada uma das cores em relação à cor mediana do Hex 7F (FF / 2). Se duas das três cores forem maiores que 7F, você estará trabalhando com uma cor mais escura.
fonte
Com base em diferentes entradas do link Tornar as cores de primeiro plano em preto ou branco, dependendo do plano de fundo e desta discussão, criei uma classe de extensão para Color que fornece as cores de contraste necessárias.
O código é o seguinte:
fonte
Se, como eu, você estava procurando uma versão RGBA que leve em consideração o alfa, aqui está uma que funciona muito bem para ter alto contraste.
fonte
Esta é uma versão R da resposta de Mark Ransom, usando apenas a base R.
fonte
@ SoBiT, eu estava olhando para a sua resposta, o que parece bom, mas há um pequeno erro nela. Sua função hexToG e hextoB precisam de uma edição menor. O último número em substr é o comprimento da string e, nesse caso, deve ser "2", em vez de 4 ou 6.
fonte
MENOS tem uma
contrast()
função interessante que funcionou muito bem para mim, consulte http://lesscss.org/functions/#color-operations-contrast"Escolha qual das duas cores oferece o maior contraste com a outra. Isso é útil para garantir que uma cor seja legível contra um plano de fundo, o que também é útil para conformidade com acessibilidade. Essa função funciona da mesma maneira que a função de contraste no Compass for SASS. De acordo com as WCAG 2.0, as cores são comparadas usando o valor de luma corrigido por gama, e não a luminosidade ".
Exemplo:
Resultado:
fonte
De hex a preto ou branco:
fonte
Código da versão do Objective-c para iOS com base na resposta de Mark:
fonte
Que tal testar com todas as cores de 24 bits?
Esteja ciente de que o método YIQ retornará uma taxa de contraste mínima de 1,9: 1, que não passa nos testes AA e AAA WCAG2.0, assumindo um limite de 128.
Para o método W3C, ele retornará uma taxa de contraste mínima de 4,58: 1, que passa nos testes AA e AAA para texto grande e no teste AA para texto pequeno, não passa no teste AAA para texto pequeno para todas as cores.
fonte
Aqui está o meu próprio método que eu tenho usado e até agora não tive problemas 😄
fonte
Criei o módulo Python para selecionar a cor do primeiro plano com base no valor RGB ou HEX da cor do segundo plano: https://github.com/azaitsev/foreground
fonte
Aqui está o meu código para Java Swing com base na incrível resposta de Mark:
fonte