Провера контраста боја по WCAG

Процени однос контраста боја текста и позадине на основу WCAG 2.1 смерница. Тренутно генериши приступачне прилагођене боје.

HEX/RGB/HSL
HEX/RGB/HSL
Све се извршава локално у вашем прегледачу.

Преглед текста уживо

Велики наслов (18pt Bold / 24pt Regular)

Ово је преглед стила великог насловног текста.

Нормалан текст (испод 18pt)

Болор седиамет, конскетур адипискинг елит. Сед вел маса лектус.

Однос контраста

18.6:1

Статус усклађености са WCAG 2.1

Захтеви WCAG AA
Нормалан текст (4.5:1) PASS
Велики текст (3.0:1) PASS
Захтеви WCAG AAA
Нормалан текст (7.0:1) PASS
Велики текст (4.5:1) PASS

Смернице WCAG 2.1

Лако проверите стандарде контраста за изградњу приступачних интерфејса који су у складу са Section 508, ADA и WCAG AA или AAA смерницама.

Механизам за предлоге

Аутоматски прилагоди боје постепено дуж HSL координата да би се пронашле најближе алтернативе које задовољавају однос контраста.

Потпуно на страни клијента

Прорачуни се извршавају локално у контексту вашег прегледача. Никакве боје, датотеке или телеметријске координате се не преносе на наше сервере.

Повезани алати за боје

HEX RGB HSL конвертер боја
Конвертујте боје и подесите координате осветљености.
Бирач боја слике
Издвојите палете боја из дизајн макета.
CSS конвертер боја
Конвертујте између CMYK, HSV, RGB, HSL и HEX формата.

Провера контраста боја

Израчунајте WCAG односе контраста за боје предњег плана и позадине и прикажите резултате за уобичајене величине текста.

Улаз
две важеће CSS боје и опциони текст за преглед.
Излаз
A однос контраста са WCAG AA и AAA индикаторима пролаза или пада.
Стварна ограничења
Прорачун покрива само контраст осветљености; не сертификује интерфејс нити узима у обзир рендеровање фонта, покрет, фокус или не-колорне знакове.
Приватност и руковање подацима
две важеће CSS боје и опциони текст за преглед се обрађују у овом картици прегледача. Convertr не прима нити чува податке; затварање или поновно учитавање странице брише радно стање, осим ако алат експлицитно не нуди локално преузимање.

Како користити овај алат

  1. У контролама алата обезбедите две важеће CSS боје и опциони текст за преглед.
  2. Изаберите подешавања која утичу на однос контраста са WCAG AA и AAA индикаторима пролаза/пада, а затим покрените алатку.
  3. Прегледајте однос контраста са WCAG AA и AAA индикаторима пролаза или пада пре копирања или преузимања.

Уобичајени начини неуспеха

Неважеће боје се не могу измерити, а транспарентност без решене позадине може учинити однос бесмисленим.

Користан пример

Упоредите #1f2937 текст на #ffffff да бисте прегледали његов однос за нормалан и велики текст.