Как обеспечить с помощью пользовательских цветов комментарии по-прежнему доступны для чтения?

Question

Я изучаю идею, которую я имел на днях.

Что делать, если я разрешаю зарегистрированным пользователям на сайте выбирать свои цвета для своих комментариев и сообщений? Таким образом, проявление их присутствия и личности будет сильнее, а также было бы легче выявить (и игнорировать/запретить) создателей проблем (# 900 символов на фоне # 000). ;)

Как я могу по-прежнему гарантировать, что их сообщения все еще доступны для чтения? Можете ли вы рекомендовать соответствующие алгоритмы?

В первую очередь я ищу JavaScript и PHP-решения, но могут быть полезны и другие подходы.

Answer 1

Очень очень хорошая формула для расчета воспринимаемой яркости цвета. Чтобы обеспечить достаточный контраст, убедитесь, что разница в значениях контрастности выше определенного порога.

Calculating the Perceived Brightness of a Color

Пример в C# (я знаю, что оригинальный плакат хотел решения JavaScript - который я в настоящее время не очень хорошо знаком с):

bool ValidateContrast(Color foreColor, Color backColor) 
    { 
     double foreBrightness = CalcBrightness(foreColor), 
       backBrightness = CalcBrightness(backColor); 
     double threshold = 70; // Just a value, test this. 
     bool enoughContrast = Math.Abs(foreBrightness - backBrightness) > threshold; 
     return enoughContrast; 
    } 

    private double CalcBrightness(Color color) 
    { 
     double r = color.R, g = color.G, b = color.B; 
     double brightness = Math.Sqrt(.241 * r * r + .691 * g * g + .068 * b * b); 
     return brightness; 
    } 

Answer 2

Вы можете рассчитать дополнительный цвет I asked для подхода JS на SO недавно. Это не даст вам оптимальной читаемости, некоторые дополнения довольно дрянные, чтобы читать. Но он по-прежнему всегда читабельен и не позволяет людям помещать текст #0000001 на фон #000000.

Мне интересно узнать, возникают ли какие-либо алгоритмы, обеспечивая оптимальный или близкий к оптимальному контраст.

Answer 3

Вы могли бы дать пользователям ограниченный набор цвета на выбор. Возможно, только белые или бледные цвета можно использовать в качестве фона, и только черные или темные цвета окрашены в цвет текста. Или просто не позволяйте им выбирать цвет фона вообще (это может привести к тому, что ваш сайт будет выглядеть довольно неприятно, если каждый комментарий имеет другой цвет фона).

Answer 4

Просто вычислить обратный цвет фона и переднего плана:

function contrastingColor (color) { // color specified in #xxxxxx notation 
    var rgb = color.match(/(\d{2})/g); 
    for (var i=0;i<3;i++) { 
     rgb[i] = parseInt(rgb[i],16); 
     var new_color = 255-rgb[i]; 
     // if the color is too similar then shift to white (or black, your choice): 
     if (Math.abs(rgb[i]-new_color) < 20) { 
      new_color = 255; 
     } 
     rgb[i] = new_color.toString(16); 
    } 
    return '#'+rgb.join(); 
} 

// usage: 
contrastingColor('#123456');