Шаблон:Цветовой контраст/doc: различия между версиями
Перейти к навигации
Перейти к поиску
Andras (обсуждение | вклад) (Новая страница: «{{Docpage}}<noinclude>{{К улучшению|2023-07-08}}</noinclude> <!-- Categories and interwikis go at the bottom of this page. --> {{OnLua|Color contrast}} Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный ''RGB hex color code'' (<cod...») |
Andras (обсуждение | вклад) мНет описания правки |
||
| Строка 13: | Строка 13: | ||
| {{Color sample|#FFFFFF}} #FFFFFF | | {{Color sample|#FFFFFF}} #FFFFFF | ||
| {{oncolor|#FFFFFF|#000000| Пример }} | | {{oncolor|#FFFFFF|#000000| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#000000|#FFFFFF}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#000000|#FFFFFF}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#000000|#FFFFFF}} round3}} | ||
| AAA | | AAA | ||
| Строка 20: | Строка 20: | ||
| {{Color sample|#DDDDDD}} #DDDDDD | | {{Color sample|#DDDDDD}} #DDDDDD | ||
| {{oncolor|#DDDDDD|#000080| Пример }} | | {{oncolor|#DDDDDD|#000080| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#000080|#DDDDDD}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#000080|#DDDDDD}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#000080|#DDDDDD}} round3}} | ||
| AAA | | AAA | ||
| Строка 27: | Строка 27: | ||
| {{Color sample|#FF9900}} #FF9900 | | {{Color sample|#FF9900}} #FF9900 | ||
| {{oncolor|#FF9900|#7B0000| Пример }} | | {{oncolor|#FF9900|#7B0000| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#7B0000|#FF9900}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#7B0000|#FF9900}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#7B0000|#FF9900}} round3}} | ||
| AA | | AA | ||
| Строка 34: | Строка 34: | ||
| {{Color sample|#AAAAAA}} #AAAAAA | | {{Color sample|#AAAAAA}} #AAAAAA | ||
| {{oncolor|#AAAAAA|#004800| Пример }} | | {{oncolor|#AAAAAA|#004800| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#004800|#AAAAAA}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#004800|#AAAAAA}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#004800|#AAAAAA}} round3}} | ||
| AA | | AA | ||
| Строка 41: | Строка 41: | ||
| {{Color sample|white}} white | | {{Color sample|white}} white | ||
| {{oncolor|white|red| Пример }} | | {{oncolor|white|red| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|red|white}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|red|white}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|red|white}} round3}} | ||
| {{no}} | | {{no}} | ||
| Строка 48: | Строка 48: | ||
| {{Color sample|#FF9999}} #FF9999 | | {{Color sample|#FF9999}} #FF9999 | ||
| {{oncolor|#FF9999|#FF0000| Пример }} | | {{oncolor|#FF9999|#FF0000| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#FF0000|#FF9999}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#FF0000|#FF9999}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#FF0000|#FF9999}} round3}} | ||
| {{no}} | | {{no}} | ||
| Строка 61: | Строка 61: | ||
| {{Color sample|black}} black | | {{Color sample|black}} black | ||
| {{oncolor|black|#BADFEE| Пример }} | | {{oncolor|black|#BADFEE| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#BaDFeE|BlAcK}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#BaDFeE|BlAcK}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#BaDFeE|BlAcK}} round3}} | ||
| AAA | | AAA | ||
| Строка 68: | Строка 68: | ||
| {{Color sample|black}} black | | {{Color sample|black}} black | ||
| {{oncolor|black|red| Пример }} | | {{oncolor|black|red| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|red|black}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|red|black}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|red|black}} round3}} | ||
| AA | | AA | ||
| Строка 75: | Строка 75: | ||
| {{Color sample|#00FFFF}} #00FFFF | | {{Color sample|#00FFFF}} #00FFFF | ||
| {{oncolor|#00FFFF|#FFFF00| Пример }} | | {{oncolor|#00FFFF|#FFFF00| Пример }} | ||
| {{ | | {{Tc|_tag=code|Цветовой контраст|#FFFF00|#00FFFF}} | ||
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#FFFF00|#00FFFF}} round3}} | | style="text-align: right;" | {{#expr: {{Цветовой контраст|#FFFF00|#00FFFF}} round3}} | ||
| {{no}} | | {{no}} | ||
Текущая версия от 09:18, 29 февраля 2024
 |
 | Эта страница требует существенной переработки. |
 | Этот шаблон реализован на основе Lua с использованием модуля Color contrast. |
Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный RGB hex color code (#RRGGBB) или стандартный HTML color с включением цвета orange из CSS (= #FFA500). Имена цветов не зависят от регистра (то есть, они могут быть написаны как строчными, так и заглавными буквами).
Использование
Примеры со светлым фоном
| Цвет текста |
Цвет фона |
Пример | Код | Коэффициент контраста |
WCAG 2.0 утв. |
|---|---|---|---|---|---|
| Шаблон:Color sample #000000 | Шаблон:Color sample #FFFFFF | Шаблон:oncolor | {{Цветовой контраст|#000000|#FFFFFF}}
|
21 | AAA |
| Шаблон:Color sample #000080 | Шаблон:Color sample #DDDDDD | Шаблон:oncolor | {{Цветовой контраст|#000080|#DDDDDD}}
|
11.787 | AAA |
| Шаблон:Color sample #7B0000 | Шаблон:Color sample #FF9900 | Шаблон:oncolor | {{Цветовой контраст|#7B0000|#FF9900}}
|
5.324 | AA |
| Шаблон:Color sample #004800 | Шаблон:Color sample #AAAAAA | Шаблон:oncolor | {{Цветовой контраст|#004800|#AAAAAA}}
|
4.691 | AA |
| Шаблон:Color sample red | Шаблон:Color sample white | Шаблон:oncolor | {{Цветовой контраст|red|white}}
|
3.998 | Шаблон:no |
| Шаблон:Color sample #FF0000 | Шаблон:Color sample #FF9999 | Шаблон:oncolor | {{Цветовой контраст|#FF0000|#FF9999}}
|
1.955 | Шаблон:no |
Примеры с тёмным фоном
| Цвет текста |
Цвет фона |
Пример | Код | Коэффициент контраста |
WCAG 2.0 утв. |
|---|---|---|---|---|---|
| Шаблон:Color sample #BADFEE | Шаблон:Color sample black | Шаблон:oncolor | {{Цветовой контраст|#BaDFeE|BlAcK}}
|
14.878 | AAA |
| Шаблон:Color sample red | Шаблон:Color sample black | Шаблон:oncolor | {{Цветовой контраст|red|black}}
|
5.252 | AA |
| Шаблон:Color sample #FFFF00 | Шаблон:Color sample #00FFFF | Шаблон:oncolor | {{Цветовой контраст|#FFFF00|#00FFFF}}
|
1.168 | Шаблон:no |
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.
См. также
- ВП:ЦВЕТ
- Проект:Технические работы/Цвета
- {{Проверка цветового контраста}}
- Contrast ratio от LeaVerou
- Colour Contrast Check
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- Index of Color Contrast Samples