Цвета для сайта: что проверить в макете и на готовой странице

Коротко: цвета для сайта проверяют по четырём признакам, которые называют источники. Первый - контраст текста и фона: WCAG называет для обычного текста 4,5:1 на уровне AA и 7:1 на уровне AAA. Второй - контраст значков и элементов управления: 3:1. Третий - цвет не единственный признак: кнопку или ошибку отмечают ещё чем-то. Четвёртый - вид сайта при настройках системы, например при тёмной теме. Контраст на готовой странице видно в инспекторе Chrome DevTools и в отчёте Lighthouse.

Цвета для сайта в макете выбрал дизайнер и просит их утвердить. Ниже - что такое контраст текста и фона и откуда берутся числа 4,5:1, 3:1 и 7:1, что считается крупным текстом, почему цвет не может быть единственным признаком, что решает заказчик в тёмной теме и как самому посмотреть контраст на готовой странице. В конце - таблица проверок и вопросы дизайнеру.

Подборок палитр и сочетаний, советов по выбору цвета под отрасль и кодов цвета здесь нет. Сведения приведены по страницам источников на 10.10.2026. Английские цитаты даны в оригинале, перевод наш. Даты страниц web.dev и Chrome DevTools - 2020-2022 годы, они указаны рядом с пересказом. Примеры вымышленные: сервис проката велосипедов с сайтом example.ru.

По каким признакам проверяют цвета сайта?

Коротко: источники называют четыре признака: контраст текста и фона, контраст значков и элементов управления, второй признак помимо цвета, вид сайта при настройках системы. К ним добавлен быстрый способ проверки - просмотр в оттенках серого. Какими будут сами цвета, эти страницы не определяют.

На русской странице MDN «Цветовой контраст» в описании проблемы цвет связан с читаемостью:

«Хорошо иметь крутой дизайн на своём сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.»

• Цветовой контраст - Доступность | MDN, русская версия (перевод сообщества), страница изменена 24 июня 2025 года

Там же сказано, кому полезен хороший контраст:

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

• Цветовой контраст - Доступность | MDN, русская версия

Дальше в статье по порядку:

1. Контраст текста и фона: критерии 1.4.3 и 1.4.6 (раздел о контрасте).
2. Контраст значков, границ элементов управления и частей графиков: критерий 1.4.11 (тот же раздел).
3. Второй признак помимо цвета: критерий 1.4.1 (раздел о едином признаке).
4. Вид сайта при тёмной теме и при высокой контрастности (раздел о тёмной теме).
5. Быстрая проверка: просмотр страницы в оттенках серого (раздел о едином признаке).

Для заказчика эти признаки превращаются в вопросы к дизайнеру и в пункты приёмки. Это вывод автора: страницы-источники адресованы тем, кто делает сайт.

Что такое WCAG и что значат уровни A, AA и AAA?

Коротко: WCAG (Web Content Accessibility Guidelines) - рекомендации W3C по доступности веб-содержимого. У каждого критерия в тексте стоит уровень: A, AA или AAA. MDN советует в идеале выбирать для цвета уровень AAA и как минимум выполнить AA. Формулировки критериев ниже взяты из редакторского черновика WCAG 2.2.

Критерии в этой статье приведены по странице Web Content Accessibility Guidelines (WCAG) 2.2. На ней стоит отметка W3C Editor's Draft 04 October 2026, то есть это редакторский черновик. О его статусе страница пишет сама:

«It is inappropriate to cite this document as other than a work in progress.»

Перевод наш: цитировать этот документ иначе как рабочий материал неуместно.

• Web Content Accessibility Guidelines (WCAG) 2.2, раздел «Status of This Document»

Поэтому формулировки критериев ниже даны как текст черновика на 10.10.2026. Для тех же критериев приведены изложения MDN и web.dev с названиями страниц; где они расходятся, это сказано.

Уровни A, AA и AAA - уровни критериев WCAG: в черновике после названия критерия стоит пометка Level A, Level AA или Level AAA. MDN использует слова AA rating и AAA rating и даёт совет для выбора цветов:

«ideally go for the AAA rating (see 1.4.6 below), but at least meet the AA rating (see 1.4.3 below)»

Перевод наш: в идеале стремитесь к рейтингу AAA (см. 1.4.6 ниже), но как минимум выполните рейтинг AA (см. 1.4.3 ниже).

• Color contrast - Accessibility | MDN, раздел «Solution», страница изменена 23 июня 2025 года

WCAG - рекомендации организации W3C. Обязателен ли WCAG для сайта конкретной компании, в статье не рассматривается. Уровень (AA или AAA) заказчик может записать в задание как свой выбор.

Что такое контраст текста и фона и откуда числа 4,5:1, 3:1 и 7:1?

Коротко: контраст - число от 1 до 21, которое получают из яркости двух цветов; у чёрного на белом он 21:1. Для обычного текста WCAG называет 4,5:1 на уровне AA и 7:1 на уровне AAA, для крупного текста 3:1 и 4,5:1, для элементов интерфейса и частей графики 3:1. Считать самому не нужно: расчёт делают инструменты.

Формулу контраста приводит определение в черновике WCAG 2.2 (contrast ratio):

(L1 + 0.05) / (L2 + 0.05)
L1 - относительная яркость более светлого из двух цветов
L2 - относительная яркость более тёмного из двух цветов

Относительную яркость (relative luminance) черновик определяет так:

«the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white»

Перевод наш: относительная яркость любой точки цветового пространства, нормированная так, что 0 соответствует самому тёмному чёрному, а 1 - самому светлому белому.

• Web Content Accessibility Guidelines (WCAG) 2.2, раздел «Glossary», определение «relative luminance»

Диапазон назван в примечании к определению: контраст может быть от 1 до 21. Курс web.dev даёт пример:

«pure black against pure white has the largest color contrast ratio at 21:1»

Перевод наш: чистый чёрный на чистом белом имеет наибольший коэффициент контраста, 21:1.

• Color and contrast | web.dev, раздел «Calculate color contrast», страница обновлена 2022-09-30

Для заказчика формула нужна только для понимания. Курс пишет, что считать вручную не придётся:

«no advanced math is required as there are a lot of tools that will do the color contrast calculations for you»

Перевод наш: сложная математика не нужна, потому что есть много инструментов, которые посчитают контраст за вас.

• Color and contrast | web.dev, раздел «Calculate color contrast»

Сами числа стоят в трёх критериях. Таблица сводит их по тексту черновика (уровни - как они помечены в черновике):

Первый критерий записан так:

«The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:»

Перевод наш: визуальное представление текста и изображений текста имеет коэффициент контраста не менее 4.5:1, за исключением следующего.

• Web Content Accessibility Guidelines (WCAG) 2.2, критерий 1.4.3 Contrast (Minimum) (Level AA)

Изображения текста - это, например, надпись, нарисованная картинкой. Для них порог тот же, что для обычного текста. Критерий 1.4.11 относится не к тексту. MDN в своей таблице называет его предмет так:

«Active user interface components and graphical objects such as icons and graphs»

Перевод наш: активные компоненты пользовательского интерфейса и графические объекты, такие как значки и графики.

• Color contrast - Accessibility | MDN, таблица в начале страницы

Значки и графики назвал MDN. Кнопки и поля форм как примеры компонентов интерфейса - пример автора, перечня компонентов в черновике нет. Слайдер с кнопками на светлом и тёмном слайде разобран в статье о слайдере на сайте: там web.dev пишет, что стрелка, хорошо видная на тёмном фоне, на светлом может быть плохо видна.

Откуда взято число 4,5:1, объясняет статья web.dev (обновлена 2020-03-31):

«The contrast ratio of 4.5:1 is the required minimum set by the Web Content Accessibility Guidelines (WCAG) 2.0.»

Перевод наш: коэффициент контраста 4.5:1 - минимум, заданный Руководством по доступности веб-содержимого (WCAG) 2.0.

• Color and contrast accessibility | web.dev

Следующее предложение страницы объясняет выбор: число компенсирует потерю контрастной чувствительности у пользователей с ослабленным зрением, примерно соответствующую остроте зрения 20/40. О 7:1 страница пишет:

«Again, 4.5:1 is just the minimum. To support users with low vision or other color blindness, meet level AAA and create content with a 7:1 contrast.»

Перевод наш: повторим, 4.5:1 - только минимум. Чтобы поддержать пользователей с плохим зрением или другим нарушением цветового зрения, выполните уровень AAA и создавайте содержимое с контрастом 7:1.

• Color and contrast accessibility | web.dev

Откуда взято 3:1, страницы-источники этой статьи не объясняют. Значение контраста для пар цветов вашего макета покажет инструмент из раздела о проверке на готовой странице.

Что считается крупным текстом и какие исключения называют источники?

Коротко: у крупного текста порог ниже: 3:1 на уровне AA и 4,5:1 на уровне AAA. Размер крупного текста записан по-разному в WCAG, MDN и web.dev, поэтому формулировки приведены по отдельности. Из проверки исключены текст логотипа, чисто декоративный текст и неактивные элементы.

Определение крупного текста стоит в разделе Glossary черновика WCAG 2.2 (large scale):

«with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts»

Перевод наш: размером не менее 18 пунктов или 14 пунктов полужирным, либо размером, дающим эквивалентный размер для китайских, японских и корейских шрифтов.

• Web Content Accessibility Guidelines (WCAG) 2.2, раздел «Glossary», определение «large scale (text)»

В примечании к определению черновик говорит, что для многих распространённых шрифтов основного текста 14 и 18 пунктов примерно равны 120% и 150% размера основного текста, и добавляет: «authors would need to check this for the particular fonts in use». Перевод наш: авторам нужно будет проверить это для конкретных используемых шрифтов. Другие страницы записывают то же понятие иначе:

В одно определение эти записи сводить не нужно: у каждой страницы своё. Практический вопрос заказчика один: какие тексты макета дизайнер считает крупными и по какой странице. Какие числа размеров для шрифта называют Lighthouse и web.dev, описано в статье о шрифтах для сайта.

Теперь исключения. Черновик перечисляет их в критериях 1.4.3 и 1.4.6. Первое касается неактивных и декоративных элементов:

«Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.»

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

• Web Content Accessibility Guidelines (WCAG) 2.2, критерии 1.4.3 и 1.4.6, пункт Incidental

Второе - логотип:

«Text that is part of a logo or brand name has no contrast requirement.»

Перевод наш: у текста, который входит в логотип или название бренда, требования к контрасту нет.

• Web Content Accessibility Guidelines (WCAG) 2.2, критерии 1.4.3 и 1.4.6, пункт Logotypes

Курс web.dev формулирует это короче: «Logos and decorative elements are exempt from these color contrast requirements». Перевод наш: логотипы и декоративные элементы исключены из этих требований к контрасту. Вопрос к дизайнеру: какие тексты макета он относит к исключениям и по какому пункту. Это вывод автора.

Что значит: цвет не единственный признак?

Коротко: критерий 1.4.1 (уровень A) говорит, что цвет не используется как единственное визуальное средство, чтобы передать информацию, обозначить действие, запросить ответ или выделить элемент. MDN советует добавить второй признак: у значков - форму, у ошибок в форме - другое оформление подписи. Быстрая проверка по web.dev - посмотреть страницу в оттенках серого.

Критерий записан в черновике так:

«Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.»

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

• Web Content Accessibility Guidelines (WCAG) 2.2, критерий 1.4.1 Use of Color (Level A)

Решение предлагает страница MDN о критерии 1.4.1:

«Use another factor in addition to color to convey information.»

Перевод наш: используйте ещё один признак в дополнение к цвету, чтобы передать информацию.

• Use of color - Accessibility | MDN, раздел «Solution», страница изменена 7 июня 2025 года

Для форм MDN называет другое оформление подписи полей в дополнение к цвету, для значков - различие по форме. Что web.dev пишет о цвете сообщения об ошибке в форме, приведено в статье о форме обратной связи, здесь это не повторяется. Статья web.dev о цвете и контрасте (2020-03-31) добавляет разрешение:

«You can still underline the invalid input in red, as long as there are additional, non-visual cues.»

Перевод наш: вы можете по-прежнему подчёркивать неверное поле красным, если есть дополнительные невизуальные подсказки.

• Color and contrast accessibility | web.dev, раздел «Convey important information with more than color»

MDN отдельно пишет о метафоре светофора (stoplight) с зелёным для хороших значений и красным для плохих: люди с красно-зелёной слепотой с трудом различают красный и зелёный, и хорошие и плохие значения нельзя передавать только этими цветами:

«Using an additional factor to signal "good" vs. "bad" is necessary. Avoid pure red and green in this situation; a reddish-orange and a bluish-green are distinguishable by color blind users»

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

• Use of color - Accessibility | MDN, раздел «Solution»

Курс web.dev (обновлён 2022-09-30) называет число людей, для которых это важно, оценкой: «the estimated 300 million people with color blindness» (перевод наш: по оценкам, 300 миллионов человек с нарушением цветового зрения). Это слова страницы, отчёты, на которые она опирается, в статье не пересказываются. Тот же курс объясняет проблему на примере с кнопкой: если сказать посетителю нажать зелёную кнопку, чтобы продолжить, и ничем больше эту кнопку не обозначить, людям с некоторыми типами дальтонизма трудно понять, какую кнопку нажимать. Графики, диаграммы и таблицы курс разбирает так же и называет решение:

«Adding another identifier, like a pattern, text, or icon, is crucial to help people understand the content.»

Перевод наш: добавить ещё один признак, например узор, текст или значок, крайне важно, чтобы люди поняли содержимое.

• Color and contrast | web.dev, раздел «Using color»

Способ проверить это без инструментов называет тот же раздел:

«Reviewing your digital products in grayscale is a good way to detect potential color issues quickly.»

Перевод наш: просмотр цифровых продуктов в оттенках серого - хороший способ быстро обнаружить возможные проблемы с цветом.

• Color and contrast | web.dev, раздел «Using color»

Как получить страницу в оттенках серого, курс не описывает. Макет в оттенках серого можно попросить у дизайнера. Если на таком макете не видно, какая кнопка главная, где ошибка и какой пункт меню выбран, второго признака нет. Оба шага - вывод автора на основе курса web.dev и критерия 1.4.1.

Что такое тёмная тема и что здесь решает заказчик?

Коротко: MDN описывает медиафункцию prefers-color-scheme: по ней сайт узнаёт, запросил ли посетитель светлую или тёмную тему в системе или браузере. У функции отметка Baseline Widely available, в браузерах она с января 2020 года. Нужна ли сайту тёмная версия, источники не говорят. Для заказчика это пункт задания: будет ли она, как выглядят в ней цвета бренда и проверен ли в ней контраст.

Определение стоит в первых строках страницы MDN:

«The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.»

Перевод наш: CSS-медиафункция prefers-color-scheme используется, чтобы определить, запросил ли пользователь светлую или тёмную цветовую тему.

• prefers-color-scheme CSS media feature - CSS | MDN, страница изменена 4 августа 2026 года

Пользователь выбирает тему в настройках операционной системы или браузера. Учёт этой настройки курс web.dev о темах (обновлён 2021-12-09) называет так: многие операционные системы, по словам страницы, позволяют указать предпочтение светлой или тёмной палитры, и это

«a good idea to optimize your site to your user's theme preferences»

Перевод наш: хорошая идея, чтобы оптимизировать сайт под предпочтения пользователя в выборе темы.

• Theming | web.dev, раздел «Provide a dark mode»

Курс web.dev о цвете и контрасте (2022-09-30, Color and contrast | web.dev) объясняет, кому такая тема может помочь: тёмную тему через prefers-color-scheme можно создать для людей с фотофобией или чувствительностью к свету. Как включить тёмную тему на своём устройстве, в статье не описывается. Тот же курс называет второй вариант, высококонтрастную тему через prefers-contrast, которая поддерживает людей с нарушениями цветового зрения и чувствительностью к контрасту.

Вопрос заказчика состоит в том, будет ли у сайта тёмная версия. Источники на него не отвечают. Если версия есть, web.dev о темах в разделе о формах пишет про цвета бренда:

«It's common for dark themes to have subdued brand colors.»

Перевод наш: для тёмных тем распространены приглушённые цвета бренда.

• Theming | web.dev, раздел «Forms»

Это слова страницы, других данных о распространённости в статье нет. Из них следует вопрос к дизайнеру: какой цвет из палитры бренда используется в тёмной версии и показан ли он в макете. Контраст в тёмной версии проверяют так же, как в светлой: критерии 1.4.3, 1.4.6 и 1.4.11 говорят о коэффициенте контраста и не называют тему (вывод автора).

Настройки системы интересны и без тёмной темы. Статья web.dev о цвете и контрасте (2020-03-31) пишет про режим высокой контрастности и инверсию цветов, которые пользователь включает в операционной системе. Пример страницы: на панели навигации выбранная страница отмечена едва заметным фоном. В режиме высокой контрастности это различие пропадает, и пользователь не понимает, какая страница активна. Совет страницы:

«If you meet level AA or higher contrast, your content should still work as expected when the colors are inverted or in high contrast. However, it's still worth testing to ensure the experience is as expected.»

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

• Color and contrast accessibility | web.dev, раздел «Increase contrast and invert colors»

Статья web.dev адресует эту проверку разработчикам: они включают настройки и проверяют интерфейс вручную. Заказчик может спросить, сделана ли она. Ещё одна настройка системы, которую сайт может учитывать, - уменьшение движения; она разобрана в статье об анимации на сайте.

Как самому посмотреть контраст на готовой странице?

Коротко: страница Chrome DevTools (обновлена 2022-10-19) называет три места, где виден список проблем с контрастом: панель CSS Overview, вкладку Issues (предварительная функция, по умолчанию выключена) и отчёт Lighthouse. Контраст отдельного элемента показывает подсказка инспектора. Шаги даны по странице 2022 года, названия приведены как на ней; совпадают ли они с текущей версией Chrome, в статье не утверждается.

Страница «Make your website more readable» начинается с оценки масштаба:

«Low contrast text is the top accessibility issue on the web. In February 2022, 83.9% of the top million home pages had this issue.»

Перевод наш: текст с низким контрастом - главная проблема доступности в вебе. В феврале 2022 года она была у 83,9% из миллиона самых популярных главных страниц.

• Make your website more readable | Chrome DevTools | Chrome for Developers, страница обновлена 2022-10-19

Цифра принадлежит странице: она ссылается на отчёт WebAIM Million 2022, сам отчёт в статье не пересказывается, новых цифр нет.

Страница описывает инструменты, которые встроены в браузер Chrome. Шаги web.dev для режима устройства в инструментах разработчика Chrome приведены в статье об адаптивном сайте. Шаги для отчёта Lighthouse по английской версии страницы:

1. Откройте инструменты разработчика на своей странице.
2. Откройте More tabs > Lighthouse.
3. Задайте настройки: Mode - Navigation (default), Categories - Accessibility, Device - Desktop.
4. Нажмите Analyze page load и дождитесь отчёта.
5. Откройте раздел Contrast. Из списка элементов щёлкните ссылку на нужный элемент.

Список проблем можно получить и в панели CSS Overview: открыть панель, запустить сбор данных (Capture an overview), в разделе Colors перейти к Contrast issues и щёлкнуть проблему. Вкладка Issues на странице названа предварительной функцией, выключенной по умолчанию: включение начинается в Settings > Experimental.

Контраст отдельного элемента страница показывает через подсказку инспектора:

«Click Inspect at the top-right corner of DevTools and hover over the element in the viewport. DevTools shows a tooltip for this element.»

Перевод наш: нажмите Inspect в правом верхнем углу DevTools и наведите курсор на элемент в окне просмотра. DevTools показывает подсказку для этого элемента.

• Make your website more readable | Chrome DevTools | Chrome for Developers, раздел «Fix low contrast text»

В примере страницы рядом со значением контраста в подсказке стоит предупреждающий знак. В палитре цветов (Color Picker) есть раздел Contrast ratio: он сообщает, достигает ли контраст уровней AA и AAA; кнопка Use suggested color подставляет цвет, подходящий под выбранный уровень. Страница называет и эмуляцию нарушений зрения (Emulate vision deficiencies), шагов для неё на этой странице нет. Раздел Contrast отчёта относится к контрасту; второй признак помимо цвета и тёмную версию он не описывает (вывод автора).

Другие инструменты названы на страницах MDN и web.dev. MDN называет Color Contrast Checker от WebAIM и инспектор доступности в инструментах разработчика Firefox (Accessibility inspector). Курс web.dev называет Adobe Color, Color Contrast Analyzer, Leonardo и палитру цветов в Chrome DevTools. Статья web.dev (2020-03-31) пишет, что контраст можно проверить аудитом Lighthouse Accessibility в DevTools. Названия приведены так, как они стоят на страницах, сравнения и рекомендации инструментов здесь нет.

Что проверить, чем проверить и на что опереться?

Коротко: шесть проверок. Для каждой в таблице названы инструмент или вопрос и страница, на которую можно сослаться при разговоре с дизайнером. Все ячейки пересказывают страницы выше; цифры порогов взяты из черновика WCAG 2.2.

Таблица - перечень для разговора с исполнителем: в последнем столбце названы страницы, на которые можно сослаться. Пороги в ней принадлежат WCAG; решение, на каком уровне работать, остаётся за заказчиком и исполнителем.

Что записать в задание и что спросить у дизайнера до утверждения макета?

Коротко: до утверждения макета стоит получить от дизайнера ответы на восемь вопросов, каждый из которых опирается на раздел выше. В задание можно записать уровень контраста (AA или AAA), список исключений, второй признак для кнопок, ошибок и графиков, решение о тёмной версии и отчёт Lighthouse при сдаче.

На главной странице BITSPARK шаг процесса «Дизайн» описан так: «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.» Вопросы о цвете имеет смысл задать до утверждения макета, пока дизайн не перешёл в разработку (вывод автора).

1. Какие пары цвета текста и фона стоят в макете и какой контраст у каждой пары по названному инструменту? Опора: критерии 1.4.3 и 1.4.6, инструменты по MDN и web.dev.
2. Какие тексты считаются крупными и по какой странице взято определение? Опора: раздел о крупном тексте.
3. Какие тексты отнесены к исключениям: логотип, декоративные надписи, неактивные элементы? Опора: пункты Incidental и Logotypes в черновике.
4. Какой контраст у значков, границ полей, кнопок и частей графиков? Опора: критерий 1.4.11.
5. Чем, кроме цвета, отмечены ошибки в форме, выбранный пункт меню, состояния кнопок и значения на графиках? Опора: критерий 1.4.1, MDN, web.dev.
6. Как выглядит макет в оттенках серого? Опора: курс web.dev.
7. Будет ли тёмная версия, какие в ней цвета бренда и проверен ли в ней контраст? Опора: MDN о prefers-color-scheme, раздел web.dev о тёмном режиме.
8. Какой отчёт Lighthouse (категория Accessibility, раздел Contrast) приложат к сдаче готовой страницы и проверен ли интерфейс при высокой контрастности? Опора: страница Chrome DevTools, статья web.dev (2020-03-31).

Пункты задания для example.ru, сервиса проката велосипедов, могли бы выглядеть так:

Цвета на example.ru
Ц-1. Для каждой пары цвета текста и фона в макете указан контраст, полученный инструментом, и название инструмента.
Ц-2. Для основного текста выбран уровень AA или AAA; для крупного текста указано, по какой странице определён размер.
Ц-3. Исключения (логотип, декоративные надписи, неактивные элементы) перечислены списком.
Ц-4. Для значков, границ полей, кнопок и частей графиков указан контраст с соседним цветом.
Ц-5. Ошибки в форме, выбранный пункт меню, состояния кнопок и значения на графиках отмечены ещё каким-либо признаком, кроме цвета.
Ц-6. Тёмная версия: будет или не будет; если будет, показаны цвета бренда в ней и указан контраст.
Ц-7. К сдаче готовой страницы приложен отчёт Lighthouse (Accessibility, раздел Contrast) для главной страницы и страницы выбора велосипеда.

Пункты Ц-1 - Ц-7 в источниках не стоят: это вывод автора на основе разделов выше. Как записывать требования, чтобы по ним можно было принимать работу, показано в статье о техническом задании на сайт.

Источники

Заголовки страниц даны по тегу title. Дата обращения ко всем страницам: 10.10.2026. Даты обновления указаны так, как они стоят на самих страницах.

• Web Content Accessibility Guidelines (WCAG) 2.2 - редакторский черновик W3C Editor's Draft 04 October 2026; критерии 1.4.1, 1.4.3, 1.4.6, 1.4.11, определения contrast ratio, large scale (text), relative luminance (английский текст, перевод наш).
• Color contrast - Accessibility | MDN - таблица соотношений, совет об уровнях AA и AAA, инструменты (английская версия, страница изменена 23 июня 2025 года, перевод наш).
• Цветовой контраст - Доступность | MDN - вступление и определение крупного текста (русская версия, перевод сообщества, страница изменена 24 июня 2025 года).
• Use of color - Accessibility | MDN - критерий 1.4.1, второй признак, метафора светофора (английская версия, страница изменена 7 июня 2025 года, перевод наш).
• prefers-color-scheme CSS media feature - CSS | MDN - определение медиафункции, отметка Baseline (английская версия, страница изменена 4 августа 2026 года, перевод наш).
• Color and contrast | web.dev - формула контраста, определение крупного текста, исключения, оттенки серого, prefers-color-scheme и prefers-contrast, перечень инструментов (курс, английская версия, обновлена 2022-09-30, перевод наш).
• Color and contrast accessibility | web.dev - происхождение 4.5:1, уровень AAA, пример формы, высокая контрастность и инверсия цветов, Lighthouse (английская версия, обновлена 2020-03-31, перевод наш).
• Make your website more readable | Chrome DevTools | Chrome for Developers - три места со списком проблем контраста, подсказка инспектора, Color Picker, цифра 83,9% по отчёту WebAIM Million 2022 (английская версия, обновлена 2022-10-19, перевод наш).
• Theming | web.dev - разделы «Provide a dark mode» и «Forms» (курс, английская версия, обновлена 2021-12-09, перевод наш).
• Шрифты для сайта: что проверить до утверждения макета - BITSPARK - статья раздела.
• Форма обратной связи на сайте: что это и что проверить до запуска - BITSPARK - статья раздела.
• Анимация на сайте: что это, виды и что проверить при приёмке - BITSPARK - статья раздела.
• Слайдер на сайте: что это и что проверить при приёмке - BITSPARK - статья раздела.
• Адаптивный сайт: что это и как проверить адаптив до приёмки - BITSPARK - статья раздела.
• Техническое задание на сайт: что это и что в него входит - BITSPARK - статья раздела.
• BITSPARK - Digital studio - шаг процесса «Дизайн».

Обсудить проект в Telegram: t.me/billioniks