Как увеличить контрастность текста в браузере
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
В открывшемся меню нажмите кнопку:
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Шрифт
Чтобы задать общий для всех страниц шрифт:
Чтобы увеличить размер шрифта:
Нечеткий, бледный или ломаный шрифт
Отключите сглаживание шрифтов ClearType в настройках Windows.
Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.
Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:
Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.
В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:
Кодировка
Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:
Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер.
Масштаб
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
Нажмите → Настройки → Сайты .
Нажмите значок .
В открывшемся меню нажмите кнопку:
— уменьшить масштаб,
— увеличить масштаб,
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Нажмите → Настройки → Сайты .
Когда дело доходит до рендеринга шрифта на Вебе, дизайнер может сделать не слишком многое. То, как шрифт выглядит на экране, по большей части зависит от операционных систем, браузеров, дизайна гарнитур, шрифтовых файлов и от того, дополнены ли эти файлы инструкциями для самых неожиданных сценариев рендеринга. Но иногда свойства CSS могут повлиять на то, как выглядит шрифт.
Примечание: на скриншотах показан рендеринг шрифтов в Сафари 5 на МакОси 10.6.
Размер шрифта
Незначительное изменение размера шрифта может очень сильно отразиться на внешнем виде гарнитуры
Прежде всего, есть свойство font-size . Растеризация векторных контуров шрифта под размеры, адекватные современным экранам, означает, что каждая буква представлена лишь кучкой пикселей. Следовательно, небольшая разница в размере шрифта может очень сильно отразиться на внешнем виде гарнитуры.
Свойство color — ещё один важный фактор. Изменяя контраст между цветами текста и фона, можно получить заметную разницу во внешнем виде гарнитуры. Анти-алиасинг выглядит менее заметным при слабом контрасте — переход от переднего плана (цвета шрифта) к фону становится менее броским.
Высокий контраст; тёмный текст на светлом фоне
Слабый контраст
Светлый текст на тёмном фоне
Светлый текст на тёмном фоне, как правило, выглядит толще, чем тёмный на светлом (см. также исследование на эту тему, выполненное Шоуном Бланком), поэтому в таких случаях стоит уделять особенное внимание низкой контрастности. Учитывайте, что недостаток контраста может вызвать затруднения у читателей с нарушенным зрением. Утилита Colour Contrast Check, написанная Джонатаном Снуком, проверяет цвета фона и переднего плана на соответствие WCAG.
WebKit и сглаживание шрифтов
Свойство -webkit-font-smoothing (работающее только в браузерах с поддержкой WebKit) позволяет дизайнеру указать один из трёх вариантов: subpixel-antialiased (по умолчанию), antialiased, или none. Тим Ван Дамм показал, что значение «antialised», как правило, делает текст более тонким в Сафари на Маках, чему очень сильно обрадовались дизайнеры, ранее использовавшие посторонние свойства — например, text-shadow — чтобы текст выглядел менее неуклюжим.
Другие чуваки подвергали сомнению использование -webkit-font-smoothing как средство утончения текста, хоть это и префикс, а не постхак. Кристоф Зиллгенс утверждает, что диагональные засечки выглядят плохо при отключённом сабпиксельном анти-алиасинге; Дмитрий Фадеев говорит, что мелкий текст менее резок.
Повороты
Наверное, очевидно, что вращение текста ведёт к проблемам с рендерингом. Плоские преобразования в CSS3, как объяснил Энди Кларк в своём посте для Typekit, позволяют дизайнерам поворачивать элементы; хотя этой фишкой можно достичь желаемого графического результата, негоризонтальный набор — это подлинные дебри рендеринга. К счастью, подобные эффекты менее заметны на экранах с высоким разрешением.
Скриншот текста, повёрнутого на 90 o ; изображение развёрнуто
Скриншот текста, повёрнутого на 45 o ; изображение развёрнуто
Скриншот текста на Safari Mobile, повёрнутого на 45 o ; изображение развёрнуто
Вывод
Рендеринг шрифта почти неподвластен веб-дизайнеру. Но важно помнить, что можно добиться желаемого результата, используя определённые подконтрольные стили. В процессе тестирования не забывайте, что разные стили для контраста, размера, цвета и поворота могут привести к значительным отличиям.
Наткнувшись на предложенную общественности статью (оригинальное название «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). Для этого нужно выполнить две операции над каждым из цветов:
После этого производятся следующие операции:
Пример вычисления коэффициент контраста
В качестве примера возьмём следующий блок:
Блок имеет такие значимые стили:
При использовании модели 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));
>
$result-luminance: ( map-get ($rgb , 'red') * .2126) + ( map-get ($rgb , 'green') * .7152) + ( map-get ($rgb , 'blue') * .0722);
@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
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
В открывшемся меню нажмите кнопку:
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Внимание. Если вы пользуетесь однокнопочной мышью в macOS, все жесты нужно выполнять, удерживая клавишу Ctrl и кнопку мыши.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Шрифт
Чтобы задать общий для всех страниц шрифт:
Чтобы увеличить размер шрифта:
Нечеткий, бледный или ломаный шрифт
Отключите сглаживание шрифтов ClearType в настройках Windows.
Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.
Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:
Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.
В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:
Кодировка
Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:
Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер.
Масштаб
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
Нажмите → Настройки → Сайты .
Нажмите значок .
В открывшемся меню нажмите кнопку:
— уменьшить масштаб,
— увеличить масштаб,
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Нажмите → Настройки → Сайты .
Читайте также: