Белый текст часто используется для обеспечения хорошего контраста на темном фоне. При указании белого текста в HTML и CSS цвет определяется с помощью RGB или шестнадцатеричных значений цвета, которые соответствуют белому цвету.
В цветовой модели RGB цвета определяются путем указания уровней красного, зеленого и синего света. Значение RGB для чистого белого цвета равно (255, 255, 255). Это означает, что максимальная интенсивность красного света, максимальная интенсивность зеленого света и максимальная интенсивность синего света объединяются для создания белого цвета.
Значения RGB находятся в диапазоне от 0 до 255 для каждого компонента цвета. При установке значений красного, зеленого и синего на максимальное значение 255 в результате получается яркий белый цвет.
Шестнадцатеричные значения цвета — это способ указания цветов с помощью шестнадцатеричных цифр 0-9 и AF. Белый цвет представлен шестнадцатеричным значением #FFFFFF. Это связано с тем, что:
Шестнадцатеричным значениям предшествует символ #, и они указываются в порядке RGB (красный, зеленый, синий). Шестнадцатеричный формат обеспечивает удобный способ записи значений RGB в более короткой форме, чем десятичная.
Чтобы сделать текст белым в HTML, можно задать белый стиль цвета с помощью шестнадцатеричных или RGB-значений:
<p style="color: #FFFFFF;">Этот текст белый</p> <p style="color: rgb(255, 255, 255);">Этот текст также белый</p>
Для таблиц стилей CSS белый текст можно определить, указав элементы и задав свойство цвета:
p { color: #FFF; } h1 { color: rgb(255, 255, 255); } Это сделает все элементы <p> белыми, а все элементы <h1> — белыми.
Шестнадцатеричное значение безопасного веб-цвета #FFFFFF гарантирует, что белый цвет будет правильно отображаться на любом компьютерном мониторе. Другие оттенки белого, такие как #F8F8FF (призрачный белый) и #FAFAFA (снег), также считаются безопасными для веб-сайтов.
Безопасные веб-цвета используют шестнадцатеричные значения, состоящие из 3 наборов дубликатов, таких как FF, CC, 99, 66 и т. д. Это гарантирует, что цвета будут выглядеть правильно на дисплеях с различными цветовыми возможностями.
Белый текст на черном фоне обеспечивает чрезвычайно высокую контрастность. Черный текст на белом фоне также обеспечивает сильную контрастность. Высокая контрастность важна для доступности для людей с нарушениями зрения.
Однако чисто белый (#FFFFFF) текст на чисто черном (#000000) фоне может быть резким для глаз при длительном чтении. Оттенки черного и белого цвета могут помочь снизить нагрузку на глаза, обеспечивая при этом достаточную контрастность.
Руководство по доступности веб-контента (WCAG) рекомендует коэффициент контрастности не менее 4,5:1 для обычного текста. Белый на черном обеспечивает коэффициент контрастности 21:1, что намного превышает минимальные рекомендации.
Вот несколько примеров эффективного использования белого текста:
Области с большим количеством текста, такие как абзацы и статьи, иногда лучше оформлять черным текстом на белом фоне. Но разумное использование белого текста может быть высококонтрастным и визуально привлекательным.
Помимо чистого белого, другие светлые оттенки могут обеспечить хороший контраст с темным фоном:
| Цвет | Шестнадцатеричное значение | Коэффициент контрастности (с #000000) |
|---|---|---|
| Белый | #FFFFFF | 21:1 |
| Снег | #FFFAFA | 20:1 |
| Цветочный белый | #FFFAF0 | 19:1 |
| Lavendar Blush | #FFF0F5 | 17:1 |
| White Smoke | #F5F5F5 | 16:1 |
Эти цвета можно использовать вместо чистого белого для текста в зависимости от потребностей дизайна. Для обеспечения доступности WCAG рекомендует коэффициент контрастности не менее 4,5:1.
Для текста на темном фоне наилучший контраст обеспечивают белые или светлые оттенки. Но для некоторых креативных дизайнов другие более светлые цвета могут работать, используя следующее:
Следует позаботиться о том, чтобы текст оставался легко читаемым. Но более светлые зеленые, синие, розовые и т. д. могут работать, если в дизайне подчеркивается смелость и читаемость.
Белый текст обеспечивает сильный визуальный контраст на темном фоне. В HTML и CSS белый цвет определяется с помощью шестнадцатеричного #FFFFFF или RGB rgb(255,255,255). Белый текст улучшает читаемость, обеспечивает высокую контрастность для доступности и позволяет тексту выделяться.
Другие светлые оттенки также могут хорошо работать. При использовании более светлых цветов обеспечьте достаточный контраст с помощью стиля шрифта и избегайте цветов, которые напрягают глаза. Белый текст добавляет визуальную привлекательность и ясность любому дизайну.