Contrast Checker изчислява WCAG 2.1 контрастното съотношение между два цвята и ги оценява спрямо праговете AA/AAA за нормален и едър текст. Преглед на живо показва текст, изобразен в избраните цветове, а бутон „вземи фона на страницата“ взема проба от текущата страница.
Достъпността все по-често е задължителна — съответствието с WCAG е законово изискване в много юрисдикции, а и там, където не е, слабият контраст отблъсква потребителите. Contrast Checker ви казва мигновено дали произволни два цвята отговарят на стандартите на WCAG. Изберете преден план и фон чрез цветоизбирач или поставете hex стойности; инструментът изчислява контрастното съотношение по официалната формула за яркост на WCAG и го оценява спрямо четири прага: AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1) и AAA large (≥4.5:1). Всеки праг показва ясен бадж Pass/Fail. Преглед на живо изобразява едър и нормален текст в избраните цветове, за да видите реалния визуален ефект. Удобен бутон взема проба от изчисления фон на body-то на текущата страница — полезно при проверка дали дадена цветова комбинация на реален сайт минава. Всичко работи локално в браузъра ви, без качване на данни.
Използва официалната формула за яркост на WCAG, за да изчисли контрастното съотношение. Резултатът е точен и съвпада с всеки съответстващ инструмент за достъпност.
Pass/fail за AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4.5:1) — всички показани като мрежа.
Изобразява реален едър и нормален текст в избраните от вас цветове, така че да виждате визуалния ефект заедно с числовото съотношение.
С едно кликване взема проба от изчисления цвят на body фона на текущата страница — полезно за тестване на реални комбинации.
Въведете hex стойност или използвайте вградения цветоизбирач. Стойностите се синхронизират двупосочно, докато редактирате всяка от тях.
Размяна с едно кликване разменя предния план и фона — полезно при проверка на обърнати теми или hover състояния.
Преди да финализирате цветова палитра, проверете всеки цвят на текста спрямо неговия фон, за да гарантирате WCAG AA съответствие — избягвате преработка по-късно.
Използвайте „вземи фона на страницата“ на реален сайт, след което поставете действителния цвят на текста — открийте a11y нарушения за минути, без да отваряте Lighthouse.
Когато марка избере цвят, който може да не мине a11y проверка, използвайте checker-а, за да намерите най-близкия съответстващ вариант (по-тъмен/по-светъл нюанс).
Проверете дали цветовете на hover/active/disabled състоянията все още отговарят на изискванията за контраст, а не само стандартните.
Тъмните теми често не покриват контраста при текст сиво върху сиво. Проверете най-тъмните си сиви нюанси спрямо най-тъмните фонове, за да уловите тези случаи.
Кликнете иконата Contrast в дока на DevSuite Pro. Отваря се панел с полета за цвят на преден план и фон.
Използвайте цветоизбирача или поставете hex стойност за всеки от тях. Прегледът на живо се обновява при промяна на цветовете.
Голямото число (напр. 4.8:1) е контрастното съотношение. По-високото е по-добре. 3 е абсолютният минимум; 4.5 е целта за нормален текст.
Баджове Pass/fail за AA и AAA, за нормален и едър текст, показват с един поглед за какво отговаря вашата комбинация.
Ако не минава, коригирайте цветовете. Затъмнете предния план или изсветлете фона (или обратното), докато целевото ниво покаже Pass.
Инсталирайте DevSuite Pro безплатно и отключете 64+ инструмента за разработчици за вашия браузър.
