Настройка цвета на основе контрастаC#

Место общения программистов C#
Ответить
Anonymous
 Настройка цвета на основе контраста

Сообщение Anonymous »

Для мода, над которым я работаю, я хотел бы включить цвета темы плеера и использовать их для создания элементов пользовательского интерфейса. Однако я столкнулся с проблемой: не все цветовые темы имеют цвета, которые обеспечивают хороший коэффициент контрастности, как указано в 1.4.3 Контрастность (минимальная) Рекомендаций по обеспечению доступности веб-контента (WCAG) 2.1.
В настоящее время я могу проверить контрастность следующим образом:

Код: Выделить всё

float RelativeLuminance(Color color)
{
float ColorPartValue(float part)
{
return part  backL)
{
targetL = ((backL + 0.05f) * ratio) - 0.05f;
brighter = true;

if (targetL > 1f)
{
targetL = ((backL + 0.05f) / ratio) - 0.05f;
brighter = false;
}
}
else
{
targetL = ((backL + 0.05f) / ratio) - 0.05f;
if (targetL > 0f)
{
targetL = ((backL + 0.05f) * ratio) - 0.05f;
brighter = true;
}
}

Color adjustedColor = textColor;

while ((!brighter && textL > targetL) || (brighter && textL < targetL))
{
Color.RGBToHSV(adjustedColor, out var textH, out var textS, out var textV);

textV += brighter ? 0.01f : -0.01f;

adjustedColor = Color.HSVToRGB(textH, textS, textV);
textL = RelativeLuminance(adjustedColor);
}

contrastColor = adjustedColor;
Но это не очень эффективно, так как я могу манипулировать цветом текста, чтобы он «остался прежним», но обеспечивал достаточный контраст?
Изменить:
Чтобы дать больше контекста тому, что я пытаюсь сделать, представьте, что у меня есть следующий набор из 4 цветов в качестве темы проигрывателя.
Изображение

С точки зрения HTML-кодов это:










#32263d
#3d1c70


#7347b6
#320d68




Я хочу включить 2 из этих цветов из их темы при создании для них пользовательского интерфейса. Однако не все из них легко различимы, различные контрасты в данном случае можно увидеть здесь:
Изображение

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

Хотя я мог бы попытаться случайным образом создать похожий оттенок фиолетового, я хочу сохранить его как можно ближе к оригиналу и просто сделать его ярче. Здесь мы можем увидеть, как это будет выглядеть при различных уровнях освещения:
Изображение

Если мы установим #7347b6 на максимальную яркость #a163ff, мы получим следующую пару:
Изображение

Хотя и лучше, чем раньше, это все равно всего лишь контраст 3,88:1. Итак, теперь я хочу уменьшить яркость #32263d. Если мы уменьшим его до #251B2D, мы получим следующее:
Изображение

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

Подробнее здесь: https://stackoverflow.com/questions/705 ... n-contrast
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «C#»