Контрастність

дивитись опис критерію у WCAG 2.1

Що таке коефіцієнт контрастності

дивитись визначення згідно з WCAG 2.1

Нижче показано, як змінюється коефіцієнт контрастності залежно від зміни кольору тексту на білому фоні.
У квадратах вказано коди кольорів в HEX-форматі, а під ними - відповідні коефіцієнти контрастності.

Нижче показано, як змінюється коефіцієнт контрастності залежно від зміни кольору тексту на чорному фоні.
У квадратах вказано коди кольорів в HEX-форматі, а під ними - відповідні коефіцієнти контрастності.

Зустрічаються випадки, коли тексту встановлюється деякий колір і напівпрозорість (наприклад, шляхом встановлення CSS-параметру "opacity" значення, меншого за одиницю).
Наприклад, якщо на білому фоні (#FFF) встановити тексту чорний колір #000 і opacity: 0.5, то фактичний колір тексту в HEX-форматі буде становити #7F7F7F, і, відповідно, коефіцієнт контрастності – 4:1.
Нижче наведена шкала, що показує, як змінюється коефіцієнт контрастності чорного тексту на білому фоні зі зміною значення opacity.

Приклад максимальної контрастності

Цей чорний колір (#000000) на білому фоні має контрастність 21:1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna.

Приклад мінімальної рекомендованої контрастності для мобільних пристроїв

Цей темно-сірий колір (#595959) на білому фоні має контрастність 7:1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna.

Приклад мінімально необхідної контрастності для дрібного тексту

Цей сірий колір (#767676) на білому фоні має контрастність 4.54:1. Необхідним мінімумом є 4.5:1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna.

Приклад замалої контрастності для дрібного тексту

Цей сірий колір (#888888) на білому фоні має контрастність 3.54:1. Необхідним мінімумом є 4.5:1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna.

Цей сірий колір (#B2B2B2) на білому фоні має контрастність 2.12:1. Необхідним мінімумом є 4.5:1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna.

Що таке великий текст

дивитись визначення згідно з WCAG 2.1

Для великого тексту необхідним мінімумом контрастності є 3.0:1. Текст вважається великим, якщо виконується одна з цих умов:

• його розмір становить 14 або більше пунктів (еквівалентно 18.6 пікселям);
• його розмір становить 18 або більше пунктів (еквівалентно 24 пікселям) і він жирний (bold).

Приклади дрібних і великих текстів

У цій таблиці показані приклади розмірів текстів та їхня класифікація:

Класифікація	Мін. коеф. контрастності	Приклад тексту
дрібний	4.5:1	Цей текст має розмір 14px, тобто він вважається дрібним.
дрібний	4.5:1	Цей текст має розмір 18px, тобто він вважається дрібним.
дрібний	4.5:1	Цей текст має розмір 23px, тобто він вважається дрібним.
великий	3:1	Цей текст має розмір 24px, тобто він вважається великим.
великий	3:1	Цей текст має розмір 30px, тобто він вважається великим.
дрібний	4.5:1	Цей текст має розмір 18px і є жирним, тобто він вважається дрібним.
великий	3:1	Цей текст має розмір 19px і є жирним, тобто він вважається великим.

Контрастність маркера фокуса

До маркера фокуса інтерактивних елементів теж ставляться вимоги щодо контрастності,
а саме порівнюються колір маркера і колір фону, на якому розташований відповідний елемент.
Необхідний мінімум - 3:1.