Найдите наиболее читаемый цвет текста, нарисованного на цветной поверхности

StackOverflow https://stackoverflow.com/questions/646068

Вопрос

Я не уверен, как спросить об этом, но вот что.

Я рисую на экране заполненный цветной прямоугольник.Цвет имеет форму R, G, B

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

Пример:

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

То, что я попробовал прямо сейчас, это вот что.Я передаю этой функции цвет прямоугольника, и она возвращает перевернутый цвет, который я затем использую для своего текста.

Это работает, но это не самый лучший способ.

Есть какие-нибудь предложения?

// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
    int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));

    return Color.FromArgb(greyscale, greyscale, greyscale);
}
Это было полезно?

Решение

Один простой подход, который гарантированно даст значительно отличающийся цвет, заключается в переключении верхнего бита каждого компонента тройки RGB.

Color inverse(Color c)
{
    return new Color(c.R ^ 0x80, c.G ^ 0x80, c.B ^ 0x80);
}

Если исходным цветом был #1AF283, то "обратным" будет #9A7203.

Контраст будет значительным.Я не даю никаких гарантий относительно эстетики.

Обновление, 2009/4/3: Я экспериментировал с этой и другими схемами.Результаты в мой блог.

Другие советы

Наиболее читаемым цветом будет либо белый, либо черный.Самым "успокаивающим" цветом будет то, что не является ни белым, ни черным, это будет цвет, слегка контрастирующий с цветом вашего фона.Нет никакого способа сделать это программно, потому что это субъективно.Вы не найдете наиболее читаемый цвет для всех, потому что все видят вещи по-разному.

Несколько советов о цвете, особенно касающихся сопоставления переднего плана и фона, например, с текстом.

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

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

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

Лучший способ всегда иметь что-то читаемое - это иметь белый текст с черным вокруг него или наоборот.

Часто этого достигают, сначала рисуя черный текст в точках (x-1, y-1), (x + 1,y-1), (x + 1,y-1), (x + 1,x + 1), а затем белый текст в точках (x, y).

В качестве альтернативы вы могли бы сначала нарисовать полупрозрачный черный блок, а затем поверх него непрозрачный белый текст.Это гарантирует, что между вашим фоном и вашим текстом всегда будет определенный контраст.

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

(кстати, вам не нужны теги .net, c # или asp.net)

Вам нужно изучить какую-нибудь теорию цвета.С программой под названием "Color Wheel Pro" интересно поиграть, и она даст вам общее представление.

По сути, вы ищете дополнительные цвета для данного цвета.

Тем не менее, я думаю, вы обнаружите, что, хотя теория цвета помогает, вам все равно нужен человеческий глаз для точной настройки.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top