Как увеличить контрастность текста в браузере

Обновлено: 04.07.2024

Сложности с чтением текста можно испытывать и при работе с широкоэкранными 27-дюймовыми мониторами, и с обычными 19-дюймовыми. Зачастую читаемость ухудшается при увеличении разрешения, поскольку это приводит к уменьшению размера текста. Чтобы понять, почему это происходит, надо вникнуть в суть параметра DPI.

При печати на принтере количество точек на дюйм (DPI) определяет качество печати. В целом, чем выше DPI, тем качественнее печать, поскольку изображение и текст выглядят четче. Например, изображение высокого разрешения обычно выглядит гораздо лучше при печати с разрешением 1200 × 600 DPI, чем при печати с разрешением 300 × 300 DPI. Однако если вы прибегнете к масштабированию, чтобы отпечатать изображение размером 9 × 12 см как изображение размера 10 × 15 см, результат, как правило, плачевен – из-за масштабирования изображение становится зернистым.

На компьютерах под управлением Windows для большинства мониторов по умолчанию устанавливается разрешение 96 DPI. В Windows 7, 8, 10 не является исключением из этого правила и по умолчанию отображает все элементы пользовательского интерфейса, включая текст, с разрешением 96 DPI. Изменяя разрешение, вы изменяете и масштаб элементов интерфейса. Например, если оптимальное разрешение монитора 1920 × 1200, а работает он в разрешении 800 × 600, элементы интерфейса будут выглядеть большими и зернистыми, поскольку вы заставляете компьютер растягивать элементы с разрешением 800 × 600 на пространство, оптимизированное для разрешения 1920 × 1200 точек.

Проще всего определить оптимальное разрешение умножением ширины и высоты экрана в дюймах на 96. Допустим, 27-дюймовый монитор имеет 20 дюймов в ширину и 12,5 в высоту. В этом случае, оптимальным для него будет разрешение 1920 × 1200. Однако в этом случае текст и элементы интерфейса будут выглядеть очень мелкими, и вам придется изменять настройки для улучшения читаемости. Один из способов сделать это – воспользоваться средствами приложений. Например, в Microsoft Word есть кнопка Масштаб для масштабирования текста.

Данные об измененном масштабе сохраняются в бета-версии Яндекс.Браузера . При повторном открытии страница будет отображаться в выбранном вами масштабе.

Чтобы удалить настройки масштаба для отдельных страниц:

Горячие клавиши и жесты мыши для изменения масштаба

При нажатой клавише Ctrl прокрутите колесо мыши вперед.

При нажатой клавише Ctrl прокрутите колесо мыши назад.

При нажатой клавише Ctrl прокрутите колесо мыши вперед.

При нажатой клавише Ctrl прокрутите колесо мыши назад.

Шрифт

Чтобы задать общий для всех страниц шрифт:

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

Чтобы увеличить размер шрифта:

На странице Настройки шрифтов в блоке Размер шрифта передвиньте ползунок вправо.

Нечеткий, бледный или ломаный шрифт

Отключите сглаживание шрифтов ClearType в настройках Windows.

Выберите Система и введите в поисковой строке Настройка текста ClearType .

Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.

Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:

В области уведомлений Windows запустите программу управления видеокартой.

Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.

В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:

Выберите шрифт Roboto и над списком шрифтов нажмите Удалить .

Кодировка

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

Нажмите   → Дополнительно  → Дополнительные инструменты  → Кодировка . Укажите предполагаемую кодировку страницы или выберите из списка пункт Автоматически . Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер. ","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Масштаб, шрифт и кодировка - Бета-версия Яндекс.Браузера. Справка","productName":"Бета-версия Яндекс.Браузера","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Масштаб

Нажмите → Настройки → Сайты . В блоке Масштаб страниц выберите из списка нужный Масштаб страницы .

Нажмите значок .

В открывшемся меню нажмите кнопку:

— уменьшить масштаб,

— увеличить масштаб,

— развернуть окно во весь экран.

Чтобы удалить настройки масштаба для отдельных страниц:

Нажмите → Настройки → Сайты .

Наткнувшись на предложенную общественности статью (оригинальное название «Typographic Contrast and Flow»), не мог не перевести, т. к. во-первых, она написана простым и понятным языком, а во-вторых, изобилует множеством примеров и иллюстраций.

1. Размер

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

С другой стороны вы можете уменьшить значимость за счет использования меньшего размера шрифта.

2. Шрифт

Контраста можно добиться за счет комбинирования различных шрифтов. Однако необходимо использовать «веб-безопасные» шрифты двух основных типов: serif и sans-serif.

Как правило, для создания контраста между заголовком и текстовым блоком можно использовать шрифт с засечками (serif) для заголовка и без засечек (sans-serif) для остального текста.

3. Цвет

Цветовой контраст — это обычный путь различия между навигацией, заголовками, ссылками и основным текстом.

Вы можете воспользоваться блёклыми цветами для указания чего-то запрещенного или невозможного.

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

Вы также можете использовать цвет для различия отдельных слов внутри текста.

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

4. Регистр

Когда в заголовке и тексте используется один и тот же шрифт, контраст может быть усилен за счет регистра. Строчные притягивают больше внимания, чем прописные, следовательно, этот метод больше подходит для заголовков. CSS свойство для смены регистра букв text-transform: uppercase.

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

5. Стиль

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

Взамен вы можете применить курсив (italic).

6. Начертание

Подчеркнуть значимость определенного текста можно, выделив его полужирным (bold) шрифтом.

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

7. Пространство

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

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

Для решения этой и других задач доступности веб-страницы существует стандарт Web Content Accessibility Guidelines (WCAG). В этой статье нас интересует раздел, посвящённый контрасту цвета. Полную версию стандарта можно прочитать на сайте организации W3C .

Какие же требования предъявляются к тексту с точки зрения стандарта WCAG?

Текст на странице или изображении должен иметь коэффициент контраста не менее 4.5 : 1. В идеале это значение должно быть не менее 7 : 1.
Для увеличенного текста коэффициент контраста должен иметь значение не менее 3 : 1. В идеале это значение должно быть не менее 4.5 : 1. Увеличенным считается текст размером в 18 пикселей, либо 14 пикселей с полужирным начертанием.

Кажется, всё логично: чем больше контраст, тем лучше читается текст. Закрываем статью и идём пить кофе. Но как же проверить, каким контрастом обладает тот или иной текст относительно фона? И что обозначают цифры 4.5 : 1, 7 : 1 и так далее?

Что такое коэффициент контраста

Коэффициент контраста, согласно стандарту WCAG, высчитывается по формуле: (L1 + 0,05) / (L2 + 0,05) , в которой:

L1 — относительная яркость самого светлого цвета.
L2 — относительная яркость самого тёмного цвета.

Формула достаточно простая: берём два цвета, добавляем к ним константу, делим и смотрим на результат. Но как вы могли заметить, нужно взять не просто два цвета, а их относительную яркость.

Изучайте вёрстку на Хекслете
Пройдите профессию и научитесь профессионально верстать веб-страницы. В рамках профессии вы изучите позиционирование HTML-элементов, технологии Flex и Grid, работу с препроцессором Sass. Также вы сверстаете несколько лендингов и добавите их в портфолио. Подписывайтесь, базовые курсы в профессии доступны бесплатно.

Что такое относительная яркость

Относительной яркостью считается коэффициент от нуля до единицы, где 0 является чёрным цветом, а 1 белым цветом. Для получения этого значения используется следующая формула: L = 0,2126 * R + 0,7152 * G + 0,0722 * B . Самый сложный момент здесь — получение необходимых значений R (red), G (green), B (blue). Для этого нужно выполнить две операции над каждым из цветов:

После этого производятся следующие операции:

Если R sRGB <= 0,03928, то R = R sRGB / 12,92. Иначе R = ((R sRGB + 0,055) / 1,055) ^ 2,4.
Если G sRGB <= 0,03928, то G = G sRGB / 12,92. Иначе G = ((G sRGB + 0,055) / 1,055) ^ 2,4.
Если B sRGB <= 0,03928, то B = B sRGB / 12,92. Иначе B = ((B sRGB + 0,055) / 1,055) ^ 2,4.

Пример вычисления коэффициент контраста

В качестве примера возьмём следующий блок:

Блок имеет такие значимые стили:

При использовании модели RGB достаточно легко получить значение каждого цвета. Для этого необходимо просто взять по 2 цифры из цвета. Первая пара является обозначением красного цвета, вторая пара обозначает зелёный цвет, а третья пара отвечает за голубой цвет. Фон блока можно определить следующим образом:

Данные значения записаны в шестнадцатеричной системе. Их необходимо перевести в десятичную. Это можно сделать самостоятельно или с помощью онлайн сервисов. Например Color Scheme . В ней нас интересует цвет в системе rgb() .

Теперь можно получить относительную яркость фонового цвета.

R sRGB = 132 / 255 = 0.51
G sRGB = 81 / 255 = 0.31
B sRGB = 67 / 255 = 0.26
R = ((0.51 + 0.055) / 1.055) ^ 2.4 = 0.2234
G = ((0.31 + 0.055) / 1.055) ^ 2.4 = 0.0782
B = ((0.26 + 0.055) / 1.055) ^ 2.4 = 0.0549

Итоговое значение относительной яркости ( L ): 0.2126 * 0.2234 + 0.7152 * 0.0782 + 0.0722 * 0.0549 = 0.1074

С помощью этих же формул можно вычислить относительную яркость цвета текста.

Теперь можно получить относительную яркость текста.

R sRGB = 155 / 255 = 0.6078
G sRGB = 179 / 255 = 0.7019
B sRGB = 165 / 255 = 0.6470
R = ((0.6078 + 0.055) / 1.055) ^ 2.4 = 0.3277
G = ((0.7019 + 0.055) / 1.055) ^ 2.4 = 0.4506
B = ((0.6470 + 0.055) / 1.055) ^ 2.4 = 0.3761

Итоговое значение относительной яркости ( L ): 0.2126 * 0.3277 + 0.7152 * 0.4506 + 0.0722 * 0.3761 = 0.4190

Используя полученные значения относительной яркости, можно вычислить коэффициент контраста. Как было указано ранее, коэффициент контраста вычисляется по формуле (L1 + 0,05) / (L2 + 0,05) , в которой:

L1 — относительная яркость самого светлого цвета.
L2 — относительная яркость самого тёмного цвета.

Самым светлым будет считаться цвет, у которого относительная яркость выше. Подставим значения в формулу:

Contrast Ratio = (0.4190 + 0.05) / (0.1074 + 0.05) = 2.9 . Также это значение может быть представлено так: 2.9 : 1 , как это было показано в начале статьи.

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

Как контролировать контраст с помощью SASS

Естественно, производить подобные вычисления вручную нет необходимости. Это отнимает много времени, к тому же, в вычислениях легко допустить ошибку. Вместо этого можно написать функцию, используя любой современный препроцессор. В качестве примера используем препроцессор SASS и создадим функцию contrast-ratio().

@function contrast-ratio ($background-color , $text-color) $l-background: luminance ($background-color);
$l-text: luminance ($text-color);

@if ($l-background > $l-text) @return ($l-background + .05) / ($l-text + .05);
>

@return ($l-text + .05) / ($l-background + .05)
>

Функция contrast-ratio() принимает значения фонового и текстового цвета, после чего высчитывает относительную яркость каждого цвета и возвращает коэффициент контраста. На самом деле такой функции, как luminance(), в SASS не существует. Поэтому её тоже необходимо написать. Так как в функции возможна операция возведения в степень, необходимо подключить библиотеку, которая добавит необходимую операцию. В качестве такой библиотеки используем sass-math-pow .

@function luminance ($color) $rgb: (
"red" : red ($color) ,
"green" : green ($color) ,
"blue" : blue ($color)
);

@each $color , $value in $rgb $value: $value / 255;

@if ($value <= 0.03928) $value: $value / 12.92;
> @else $value: ($value + .055) / 1.055;
$value: poly-pow ($value , 2.4);
>

$rgb: map-merge ($rgb , ($color : $value));
>

@return $result-luminance;
>

$color-contrast: contrast-ratio ($bg-color , $text-color);

Во время компиляции SASS предупредит о недостаточном контрасте:

Warning: Current contrast ratio is 2.8974077644:1, but should be minimum 4.5:1

Читайте также: