Проверка на контраст WCAG – AA и AAA за текст
Тази проверка на контраст по WCAG изчислява съотношението на контраст между цвят на преден план и цвят на фон, след което го проверява спрямо изискванията AA или AAA за нормален или голям текст. Визуализацията на живо показва текста върху фона, за да ви помогне да оцените четимостта. Праговете са 4.5:1 и 3:1 за AA, и 7:1 и 4.5:1 за AAA.
Тази проверка на контраст по WCAG изчислява съотношението на контраст между цвят на преден план и цвят на фон. Тя оценява резултата спрямо праговете WCAG AA и AAA за нормален и голям текст и предоставя визуализация на живо, за да виждате текста върху фона му. Използвайте я, за да проверите цветовия контраст и да получите ясен резултат, докато оценявате четимостта.
Изберете дали да оцените цветовете спрямо критериите AA или AAA и дали текстът е нормален или голям. За AA изискваното съотношение на контраст е 4.5:1 за нормален текст и 3:1 за голям текст. За AAA праговете са 7:1 за нормален текст и 4.5:1 за голям текст. Проверката съобщава как съотношението се сравнява с избраното изискване.
Цветовете на преден план и фон имат различни роли във визуализацията: предният план е цветът на текста, а фонът е цветът зад него. Проверката на двойката ви помага да оцените контраста им заедно, вместо да съдите всеки цвят поотделно. Визуализацията на живо предлага бърза визуална проверка наред със съотношението и оценката.
Проверката работи изцяло във вашия браузър, а вашият вход се обработва на вашето устройство; никакви данни не се изпращат до сървър. Работи офлайн, след като страницата е заредена, и е безплатна. Разработчици, дизайнери и DevOps инженери могат да я използват, за да проверяват цветови комбинации спрямо критериите на WCAG и да улавят проблеми с контраста, преди да споделят или пуснат интерфейс.
Стъпка 1: Въведете цветовете на преден план и фон, които искате да проверите. Това са двата цвята, които проверката сравнява.
Стъпка 2: Изберете критериите за оценка. Проверката оценява контраста спрямо праговете AA или AAA за нормален или голям текст.
Стъпка 3: Прегледайте съотношението на контраст и оценката. Резултатът показва дали избраните цветове отговарят на избраните критерии.
Стъпка 4: Проверете визуализацията на живо. Виждането на текста върху фона ви помага да прецените четимостта с един поглед.
Случай на употреба: Проверете дали комбинация от цвят на преден план и фон отговаря на изисквания праг на контраст по WCAG, преди да я използвате в интерфейс.
Случай на употреба: Уловете неуспешна цветова комбинация, преди да стигне до рецензент или потребител, за да я оцените по-рано.
Случай на употреба: Получете резултат „успешно“ или „неуспешно“ с причината, вместо да разчитате само на съотношение на контраст.
Случай на употреба: Използвайте визуализацията на живо, за да прецените как изглежда текстът върху фона, докато проверявате контраста му.
Случай на употреба: Проверявайте нормален и голям текст спрямо критериите AA или AAA, когато трябва да оцените различни изисквания за текст.
Случай на употреба: Проверете предложена цветова комбинация спрямо праговете, които вашият проект трябва да спазва.