Инструментът използва официалната WCAG формула за относителна яркост, затова числата съвпадат с резултатите на WebAIM checker и повечето одити за достъпност. Всичко се изчислява в браузъра ви - цветовете не се качват никъде и няма ограничения.
Проверка на контраста на цветовете
Работи изцяло в браузъра - без качване и без регистрация.
Коефициент на контраст
Преминаванужни 4.5:1
Преминаванужни 3:1
Не преминаванужни 7:1
Преминаванужни 4.5:1
Едър = 18pt (24px) или 14pt (18,66px) получер.
Какво е проверка на контраста на цветовете?
Проверката на контраста на цветовете измерва съотношението между цвета на текста и фона и показва дали комбинацията отговаря на стандартите за достъпност WCAG. Резултатът е число от 1:1 до 21:1, последвано от оценка pass/fail за AA и AAA - и при обикновен, и при едър текст.
Как се използва
- 1Въведете цветовете. Напишете hex код, стойност rgb() или CSS цветово наименование за текста и фона, или изберете с цветовата палитра.
- 2Прочетете коефициента. Коефициентът на контраст се обновява на живо, заедно с визуален преглед на текста върху фона.
- 3Проверете значките. Всяка значка показва pass или fail за WCAG AA и AAA при обикновен и едър текст.
За кого е
- Дизайнери, тестващи цветовете на бранда преди предаване към разработката.
- Фронт-енд разработчици, проверяващи цветовете на бутони, връзки и етикети спрямо WCAG AA.
- Одитори по достъпност, документиращи нарушения на контраста с точни коефициенти.
- Контент и имейл екипи, потвърждаващи че текстът остава четим върху цветен фон.
Често задавани въпроси
Безплатна ли е проверката на контраста?
Да - напълно безплатна е, без регистрация и без ограничения. Работи изцяло в браузъра ви.
Какъв коефициент на контраст е нужен за WCAG AA?
WCAG 2.1 ниво AA изисква минимален коефициент 4,5:1 за обикновен текст и 3:1 за едър текст. Ниво AAA повишава изискванията до 7:1 за обикновен и 4,5:1 за едър текст.
Какво се смята за едър текст?
Едър текст е поне 18pt (около 24px) при нормална дебелина или 14pt (около 18,66px) при получер. За едрия текст се допуска по-нисък контраст, тъй като по-големите знаци се четат по-лесно.
Как се изчислява коефициентът на контраст?
По формулата (L1 + 0,05) / (L2 + 0,05), където L1 и L2 са относителната яркост на по-светлия и по-тъмния цвят. Яркостта се изчислява от sRGB каналите за червено, зелено и синьо по дефиницията в WCAG 2.x.
Поддържа ли hex, RGB и цветови наименования?
Да. Може да въведете 3-, 4-, 6- или 8-цифрен hex, стойности rgb() и rgba(), или CSS цветово наименование като 'teal'. Може и да изберете цвят с вградената палитра.
Защо едно и също съотношение понякога преминава, а понякога не?
Изискваният коефициент зависи от размера на текста и нивото, към което се стремите. Коефициент 3,5:1 не преминава AA за обикновен текст, но преминава AA за едър - затова винаги проверявайте спрямо реалния размер и ниво.