Шаблон:Цветовой контраст
Перейти к навигации
Перейти к поиску
 | Этот шаблон реализован на основе Lua с использованием модуля Color contrast. |
Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный RGB hex color code (#RRGGBB) или стандартный HTML color с включением цвета orange из CSS (= #FFA500). Имена цветов не зависят от регистра (то есть, они могут быть написаны как строчными, так и заглавными буквами).
Использование
Примеры со светлым фоном
| Цвет текста |
Цвет фона |
Пример | Код | Коэффициент контраста |
WCAG 2.0 утв. |
|---|---|---|---|---|---|
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#000000;" title="Ошибка скрипта: Функции «title» не существует."> #000000 | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#FFFFFF;" title="Ошибка скрипта: Функции «title» не существует."> #FFFFFF | Пример | {{Цветовой контраст|#000000|#FFFFFF}}
|
21 | AAA |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#000080;" title="Ошибка скрипта: Функции «title» не существует."> #000080 | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#DDDDDD;" title="Ошибка скрипта: Функции «title» не существует."> #DDDDDD | Пример | {{Цветовой контраст|#000080|#DDDDDD}}
|
11.787 | AAA |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#7B0000;" title="Ошибка скрипта: Функции «title» не существует."> #7B0000 | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#FF9900;" title="Ошибка скрипта: Функции «title» не существует."> #FF9900 | Пример | {{Цветовой контраст|#7B0000|#FF9900}}
|
5.324 | AA |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#004800;" title="Ошибка скрипта: Функции «title» не существует."> #004800 | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#AAAAAA;" title="Ошибка скрипта: Функции «title» не существует."> #AAAAAA | Пример | {{Цветовой контраст|#004800|#AAAAAA}}
|
4.691 | AA |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:red;" title="Ошибка скрипта: Функции «title» не существует."> red | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:white;" title="Ошибка скрипта: Функции «title» не существует."> white | Пример | {{Цветовой контраст|red|white}}
|
3.998 | Нет |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#FF0000;" title="Ошибка скрипта: Функции «title» не существует."> #FF0000 | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#FF9999;" title="Ошибка скрипта: Функции «title» не существует."> #FF9999 | Пример | {{Цветовой контраст|#FF0000|#FF9999}}
|
1.955 | Нет |
Примеры с тёмным фоном
| Цвет текста |
Цвет фона |
Пример | Код | Коэффициент контраста |
WCAG 2.0 утв. |
|---|---|---|---|---|---|
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#BADFEE;" title="Ошибка скрипта: Функции «title» не существует."> #BADFEE | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:black;" title="Ошибка скрипта: Функции «title» не существует."> black | Пример | {{Цветовой контраст|#BaDFeE|BlAcK}}
|
14.878 | AAA |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:red;" title="Ошибка скрипта: Функции «title» не существует."> red | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:black;" title="Ошибка скрипта: Функции «title» не существует."> black | Пример | {{Цветовой контраст|red|black}}
|
5.252 | AA |
| <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#FFFF00;" title="Ошибка скрипта: Функции «title» не существует."> #FFFF00 | <span style="display:inline-block;width:1em;vertical-align: middle;height:1em;border:1.62px solid black;background:#00FFFF;" title="Ошибка скрипта: Функции «title» не существует."> #00FFFF | Пример | {{Цветовой контраст|#FFFF00|#00FFFF}}
|
1.168 | Нет |
WCAG 2.0
Для выбора оптимального цветового контраста текста и фона используйте «Руководство по обеспечению доступности веб-контента (WCAG) 2.0», в котором изложено следующее:
| Размер шрифта | Не соответствует | Уровень AA | Уровень AAA |
|---|---|---|---|
| Обычный | меньше 4.5 | от 4.5 до 7.0 | больше 7.0 |
| Большой (18 pt или жирный 14 pt) | меньше 3.0 | от 3.0 до 4.5 | больше 4.5 |
Обычный вики-текст в большинстве браузеров имеет размер от 9.5pt до 10.5pt (от 12.5px до 14px), в зависимости от используемого скина. Для того чтобы квалифицировать текст как «большой», его размер должен быть 180% от обычного, или жирным 140% от обычного, согласно WCAG.