Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 Для решения этой и других задач доступности веб-страницы существует стандарт Web Content Accessibility Guidelines (WCAG). В этой статье нас интересует раздел, посвящённый контрасту цвета. Полную версию стандарта можно прочитать на сайте организации<a>W3C</a>.

3 Какие же требования предъявляются к тексту с точки зрения стандарта WCAG?

4 <ul><li>Текст на странице или изображении должен иметь коэффициент контраста не менее 4.5 : 1. В идеале это значение должно быть не менее 7 : 1.</li>

5 <li>Для увеличенного текста коэффициент контраста должен иметь значение не менее 3 : 1. В идеале это значение должно быть не менее 4.5 : 1. Увеличенным считается текст размером в 18 пикселей, либо 14 пикселей с полужирным начертанием.</li>

6 </ul>Кажется, всё логично: чем больше контраст, тем лучше читается текст. Закрываем статью и идём пить кофе. Но как же проверить, каким контрастом обладает тот или иной текст относительно фона? И что обозначают цифры 4.5 : 1, 7 : 1 и так далее?

7 <h2>Содержание</h2>

8 <ul><li><a>Что такое коэффициент контраста</a></li>

9 <li><a>Что такое относительная яркость</a></li>

10 <li><a>Пример вычисления коэффициент контраста</a></li>

11 <li><a>Как контролировать контраст с помощью SASS</a></li>

12 <li><a>Резюме</a></li>

13 <li><a>Дополнительные материалы</a></li>

14 </ul><h2>Что такое коэффициент контраста</h2>

15 Коэффициент контраста, согласно стандарту WCAG, высчитывается по формуле:(L1 + 0,05) / (L2 + 0,05), в которой:

16 <ul><li>L1- относительная яркость самого светлого цвета.</li>

17 <li>L2- относительная яркость самого тёмного цвета.</li>

18 </ul>Формула достаточно простая: берём два цвета, добавляем к ним константу, делим и смотрим на результат. Но как вы могли заметить, нужно взять не просто два цвета, а их относительную яркость.

19 <h2>Что такое относительная яркость</h2>

20 Относительной яркостью считается коэффициент от нуля до единицы, где 0 является чёрным цветом, а 1 белым цветом. Для получения этого значения используется следующая формула:L = 0,2126 * R + 0,7152 * G + 0,0722 * B. Самый сложный момент здесь - получение необходимых значений R (red), G (green), B (blue). Для этого нужно выполнить две операции над каждым из цветов:

21 <ul><li>RsRGB= R8bit/ 255</li>

22 <li>GsRGB= G8bit/ 255</li>

23 <li>BsRGB= B8bit/ 255</li>

24 </ul>После этого производятся следующие операции:

25 <ul><li>Если RsRGB<= 0,03928, тоR= RsRGB/ 12,92. ИначеR= ((RsRGB+ 0,055) / 1,055) ^ 2,4.</li>

26 <li>Если GsRGB<= 0,03928, тоG= GsRGB/ 12,92. ИначеG= ((GsRGB+ 0,055) / 1,055) ^ 2,4.</li>

27 <li>Если BsRGB<= 0,03928, тоB= BsRGB/ 12,92. ИначеB= ((BsRGB+ 0,055) / 1,055) ^ 2,4.</li>

28 </ul><h2>Пример вычисления коэффициент контраста</h2>

29 В качестве примера возьмём следующий блок:

30 Блок имеет такие значимые стили:

31 При использовании модели RGB достаточно легко получить значение каждого цвета. Для этого необходимо просто взять по 2 цифры из цвета. Первая пара является обозначением красного цвета, вторая пара обозначает зелёный цвет, а третья пара отвечает за голубой цвет. Фон блока можно определить следующим образом:

32 <ul><li>R: 84</li>

33 <li>G: 51</li>

34 <li>B: 43</li>

35 </ul>Данные значения записаны в шестнадцатеричной системе. Их необходимо перевести в десятичную. Это можно сделать самостоятельно или с помощью онлайн сервисов. Например<a>Color Scheme</a>. В ней нас интересует цвет в системеrgb().

36 <ul><li>R: 132</li>

37 <li>G: 81</li>

38 <li>B: 67</li>

39 </ul>Теперь можно получить относительную яркость фонового цвета.

40 <ul><li>RsRGB= 132 / 255 = 0.51

41 </li>

42 <li>GsRGB= 81 / 255 = 0.31

43 </li>

44 <li>BsRGB= 67 / 255 = 0.26

45 </li>

46 <li>R= ((0.51 + 0.055) / 1.055) ^ 2.4 = 0.2234

47 </li>

48 <li>G= ((0.31 + 0.055) / 1.055) ^ 2.4 = 0.0782

49 </li>

50 <li>B= ((0.26 + 0.055) / 1.055) ^ 2.4 = 0.0549

51 </li>

52 </ul>Итоговое значение относительной яркости (L): 0.2126 * 0.2234 + 0.7152 * 0.0782 + 0.0722 * 0.0549 =0.1074

53 С помощью этих же формул можно вычислить относительную яркость цвета текста.

54 <ul><li>R: 155</li>

55 <li>G: 179</li>

56 <li>B: 165</li>

57 </ul>Теперь можно получить относительную яркость текста.

58 <ul><li>RsRGB= 155 / 255 = 0.6078

59 </li>

60 <li>GsRGB= 179 / 255 = 0.7019

61 </li>

62 <li>BsRGB= 165 / 255 = 0.6470

63 </li>

64 <li>R= ((0.6078 + 0.055) / 1.055) ^ 2.4 = 0.3277

65 </li>

66 <li>G= ((0.7019 + 0.055) / 1.055) ^ 2.4 = 0.4506

67 </li>

68 <li>B= ((0.6470 + 0.055) / 1.055) ^ 2.4 = 0.3761

69 </li>

70 </ul>Итоговое значение относительной яркости (L): 0.2126 * 0.3277 + 0.7152 * 0.4506 + 0.0722 * 0.3761 =0.4190

71 Используя полученные значения относительной яркости, можно вычислить коэффициент контраста. Как было указано ранее, коэффициент контраста вычисляется по формуле(L1 + 0,05) / (L2 + 0,05), в которой:

72 <ul><li>L1- относительная яркость самого светлого цвета.</li>

73 <li>L2- относительная яркость самого тёмного цвета.</li>

74 </ul>Самым светлым будет считаться цвет, у которого относительная яркость выше. Подставим значения в формулу:

75 Contrast Ratio= (0.4190 + 0.05) / (0.1074 + 0.05) =2.9. Также это значение может быть представлено так:2.9 : 1, как это было показано в начале статьи.

76 Данное значение не вписывается в рамки стандарта WCAG. Если хотите сделать сайт более доступным для ваших пользователей, используйте другое сочетания фона и текста.

77 <h2>Как контролировать контраст с помощью SASS</h2>

78 Естественно, производить подобные вычисления вручную нет необходимости. Это отнимает много времени, к тому же, в вычислениях легко допустить ошибку. Вместо этого можно написать функцию, используя любой современный препроцессор. В качестве примера используем препроцессор SASS и создадим функцию contrast-ratio().

79 Функция contrast-ratio() принимает значения фонового и текстового цвета, после чего высчитывает относительную яркость каждого цвета и возвращает коэффициент контраста. На самом деле такой функции, как luminance(), в SASS не существует. Поэтому её тоже необходимо написать. Так как в функции возможна операция возведения в степень, необходимо подключить библиотеку, которая добавит необходимую операцию. В качестве такой библиотеки используем<a>sass-math-pow</a>.

80 Теперь можно отслеживать коэффициент контраста непосредственно в SASS. Для этого используем директиву @warn и при недостаточном контрасте покажем сообщение. Оно выведется при следующей компиляции кода.

81 Во время компиляции SASS предупредит о недостаточном контрасте:

82 <h2>Резюме</h2>

83 <ul><li>У людей может отличаться цветовосприятие, это надо учитывать при вёрстке страниц</li>

84 <li>Для контроля доступности в вебе используется стандарт Web Content Accessibility Guidelines (WCAG)</li>

85 <li>Контролировать контраст текста на странице можно с помощью SASS</li>

86 </ul><h2>Дополнительные материалы</h2>

87 <ul><li><a>Проверка контраста в Chrome DevTools</a></li>

88 </ul>