Уравнение 50% сравнивает цвет фона с шестнадцатеричным значением 50% расстояния между чистым черным и чистым белым (среднее шестнадцатеричное значение).
- Если значение цвета фона меньше отметки 50%, оно находится на более темной стороне спектра и возвращает белый цвет в качестве цвета текста.
- Если значение цвета фона больше отметки 50%, оно находится на более светлой стороне спектра и возвращает черный цвет для текста.
Ниже представлена соответствующая функция для расчета доступного цвета текста. Он преобразует шестизначное шестизначное значение фона в целое число и сравнивает его с 50% значения для чистого белого цвета.
Нет ничего проще!
Уравнение 50% в действии можно найти здесь:
Уравнение YIQ
Уравнение YIQ преобразует цвет RGB (от 0 до 255) в цветовое пространство YIQ. YIQ - это стандартная формула для расчета воспринимаемой яркости цвета, рекомендованная Консорциумом Всемирной паутины (W3C).
Уравнение YIQ ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Ниже представлена функция для расчета цветового пространства YIQ. Я выбрал значение яркости 128, что считается ярким.
- Сначала разбейте шестнадцатеричное значение на отдельные значения RGB.
- После того, как все будет масштабировано и нормализовано, оно будет содержать целое число в диапазоне от 0 до 255.
- Подобно функции 50%, мы должны проверить, выше или ниже значение цвета ввода, чем отметка 50% между черным и белым. Это вернет либо черный, либо белый цвет в зависимости от того, какое значение обеспечивает наиболее оптимальный цветовой контраст.
Вот и все - два простых уравнения контраста, которые хорошо работают, чтобы определить лучший цвет шрифта для оптимальной читаемости. В большинстве случаев эти два алгоритма контрастирования дают одинаковый результат. В некоторых случаях результаты противоречат друг другу, но обычно вы можете использовать любое уравнение, которое вам больше нравится.
Уравнение YIQ в действии можно найти здесь:
Теперь давайте решим проблему цветового контраста с помощью машинного обучения и нейронной сети. нам нужно всего несколько строк кода. Мы не будем вдаваться в подробности машинного обучения и нейронных сетей, однако мы можем использовать их для решения проблемы выбора оптимального цвета текста для максимальной читабельности.
Нейронные сети
Нейронные сети (NN) - один из подходов, используемых в машинном обучении. С помощью нейронных сетей мы можем лучше моделировать сложные отношения между входами и выходами, чтобы находить закономерности в данных.
Brain.js
Brain.js - отличная библиотека для реализации подходов машинного обучения в веб-приложениях. Brain.js очень полезен и может добавить большую ценность приложениям JavaScript / Node. Его простота использования позволяет любому начать работу с нейронными сетями.
Установить библиотеку машинного обучения brain.js очень просто.
yarn add brain.js
Теперь импортируйте модуль brain.js в свой проект.
const brain = require('brain.js')
Теперь мы можем решить проблему цветового контраста за три шага:
- Создайте нейронную сеть:
let network = new brain.NeuralNetwork(); - Обучите сеть с помощью обучающих данных:
network.train(data, { log: true }); - Управляйте сетью с реальными данными:
network.run();
Вы тренируете свою сеть, просто предоставляя ей массив значений, где каждый вход массива имеет два атрибута: входной и выходной атрибут. Сеть обучается на исторических данных, где входные и выходные значения уже известны.
Brain.js ожидает значений от 0 до 1. Входные и выходные данные могут иметь одно или несколько значений. Мы обучим нашу сеть цветового контраста, отформатировав входные данные как цвета RGB, а выходы - как черные или белые.
Теперь приступим к обучению нашей сети.
- Выберите случайный цвет
- Нормализовать значение RGB до значения от 0 до 1, разделив на 255
- Добавьте это значение в качестве входных данных для обучающих данных
- Дайте вашему входному значению соответствующее выходное значение черного или белого цвета.
- Повторите шаги 1-4.
Имея данные обучения, теперь вы можете запустить свою сеть и позволить ей вычислить распределение вероятностей цвета с наивысшим контрастом.
Brain.js будет обучать сеть и предсказывать, какой цвет текста должен быть черным или белым. У вас должно получиться примерно следующее:
...
iterations: 530, training error: 0.006119754857500322
iterations: 540, training error: 0.005870729613810573
iterations: 550, training error: 0.005638886768098001
iterations: 560, training error: 0.005422631733361282
iterations: 570, training error: 0.0052205261001664685
iterations: 580, training error: 0.005031314834044752
result { white: 0.059708621352910995, black: 0.9404082298278809 }
Brain.js предсказал, что цветовой контраст невелик с точностью 0.94 (94%). Я использовал обучающий набор из четырех входных значений, что чрезвычайно мало для модели машинного обучения, но уже дает мне относительно хорошие результаты.
Сеть становится более точной, если вы добавляете больше исторических данных для обучения. Нейронная сеть хороша ровно настолько, насколько хороша ее качество и количество точек данных; данные - самый ценный элемент машинного обучения.
Если вы хотите указать, как вы хотите, чтобы ваша модель машинного обучения обучалась, вы можете указать параметры в качестве второго аргумента в функции обучения.
Сеть будет обучаться до тех пор, пока ошибка обучения не упадет ниже порога ошибки (по умолчанию 0.005) или пока не будет достигнуто максимальное количество итераций (по умолчанию 20000), в зависимости от того, что наступит раньше.
По умолчанию обучение не будет сообщать вам, как оно продвигается до конца, но если вы установите log на true, чтобы получать периодические обновления текущей ошибки обучения сети. Ошибка обучения должна каждый раз уменьшаться. Обновления будут выведены на консоль. Если вы установите log для функции, эта функция будет вызываться с обновлениями вместо вывода на консоль.
Скорость обучения - это параметр, который влияет на скорость обучения сети. Это число от 0 до 1. Если скорость обучения близка к 0, тренировка займет больше времени. Если скорость обучения приближается к 1, он будет тренироваться быстрее, но существует опасность тренировки до локального минимума и плохой работы с новыми данными. Скорость обучения по умолчанию - 0.3.
В color-prediction.js выше я использовал network.run() и получил значения вероятности черного и белого. С его помощью я могу проверить, больше ли значение вероятности белого, чем значение вероятности черного; если это так, цвет должен быть белым. Но в brain.js есть метод brain.likely(rgb, network), который может сделать это за нас. Если мы хотим, чтобы результат был белым или черным, мы можем добавить следующий код:
const result = brain.likely({ r: 0, g: 1, b: 0.65 }, network);
console.log(result);
Теперь, если вы обнаружите неправильный цветовой контраст, вместо того, чтобы добавлять дополнительные граничные случаи к вашему традиционному алгоритму, вам просто нужно добавить еще один набор данных к вашим обучающим данным, чтобы немного лучше обучить вашу модель.
Таким образом, он намного ближе к тому, как я ожидал, что он будет работать. Поэтому вместо решения некоторых странных крайних случаев вы можете просто добавить еще одну точку данных к обучающим данным.
Вместо того, чтобы решать крайние случаи, я стараюсь находить места в данных и более эффективно тренировать модель. В считанные секунды мы смогли решить эту проблему. Было бы очень сложно решить эту проблему в коде.
Вы можете позволить своим пользователям решать, какой цветовой контраст они считают лучшим для своих глаз. Вы можете создать случайный генератор RGB и позволить пользователям голосовать. Каждый раз, когда пользователь голосует, входные данные, представляющие собой комбинацию данных RGB, и цвет с наивысшим контрастом будут преобразованы во входные и выходные данные.
Таким образом, краудсорсинг может помочь вам накапливать данные о тренировках. Кроме того, вы можете просто попросить своих дизайнеров предоставить вам действительные точки данных RGB с их ожидаемым контрастным цветом.
Нейронную сеть с brain.js в действии можно найти здесь:
Если вы заинтересованы в решении проблемы цветового контраста с помощью нейронных сетей и Tensorflow.js, вы можете найти мое решение здесь:
Существует множество других нетрадиционных методов, с помощью которых вы можете улучшить доступность своих приложений, например, использование распознавания изображений для автоматизированных описаний изображений, чтобы помочь слепым людям более эффективно понимать ваш контент, или машинное обучение, которое можно использовать для создания автоматических текстовых сводок по порядку. чтобы помочь людям с ограниченными возможностями обучения, перевод в реальном времени или распознавание речи для автоматизированных субтитров.
Заключение
Цветовой контраст - важная тема. Важно сделать контраст между цветами как можно более высоким, так как это облегчает пользователям чтение контента, увеличивает доступность и, как правило, просто упрощает восприятие.
Обсуждаемые выше нетрадиционные способы - это всего лишь несколько способов, появившихся благодаря машинному обучению и нейронным сетям. Такие решения уже находят применение во вспомогательных технологиях.
По мере того, как творческие люди добавляют эти решения в новые продукты и приложения, это закрывает пробелы, с которыми сталкиваются люди с ограниченными возможностями. Это захватывающие времена, и это только начало.
Есть много других выходов, и не имеет значения, используете ли вы традиционные или нетрадиционные способы решения машинного обучения. Важно выбрать один метод и реализовать его в своем приложении.
✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
