Без качване, 100% локално, без акаунт

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

Въведете или изберете два цвята и вижте веднага коефициента на контраст по WCAG, с отметки за преминаване на AA/AAA за обикновен и едър текст.

Как работи Проверка на контраста

Този инструмент изчислява WCAG съотношението на контраста между два цвята и показва дали двойката достига ниво AA или AAA за нормален текст, голям текст и нетекстови елементи на интерфейса. Всичко се изчислява локално във вашия браузър; въведените цветове никога не се качват.

Написано от Bastien Sulyan

Как да използвате Проверка на контраста, стъпка по стъпка

  1. Въведете или изберете цвета на преден план (текста).
  2. Въведете или изберете цвета на фона.
  3. Прочетете съотношението на контраста и значките AA/AAA за нормален текст, голям текст и нетекстови елементи на интерфейса.
  4. Използвайте «Разменете цветовете», за да проверите двойката в обратна посока.

Често срещани приложения

  • Проверка на основния цвят на марка спрямо бяло или черно преди пускането на компонент бутон.
  • Потвърждаване, че приглушен сив текст на тялото все още покрива AA върху светъл фон на карта.
  • Потвърждаване, че цветът на връзка в абзац достига прага 4,5:1 за нормален текст.
  • Проверка дали голямо, по-тънко заглавие все още покрива по-облекчения праг 3:1 за голям текст.

Често задавани въпроси

Този инструмент изпраща ли моите цветове към сървър?

Не, изчислението се извършва изцяло във вашия браузър чрез JavaScript; нищо от въведеното от вас не се качва.

Какво съотношение на контраста ми е нужно за AA или AAA?

WCAG 2.x изисква 4,5:1 за AA при нормален текст, 7:1 за AAA при нормален текст, 3:1 за AA при голям текст и 4,5:1 за AAA при голям текст.

Какво се брои за голям текст?

Поне 24px (18pt) с нормална дебелина, или около 18,7px (14pt) получер; всичко по-малко използва праговете за нормален текст.

Защо размяната на преден план и фон не променя съотношението?

Формулата за съотношението е симетрична: тя сравнява само по-светлата и по-тъмната яркост, а не кой цвят се използва за текста. Размяната все пак е полезна, защото показва дали двойката работи и при обратни роли, например тъмен текст върху светъл елемент спрямо светъл текст върху тъмен елемент.

Гарантира ли преминаването на AA, че дизайнът ми е достъпен?

Не. Контрастът е само един критерий за успех на WCAG сред много други. Изборът на цветове за хора с недостатъци в цветното зрение, видимостта на фокуса, преоразмеряването на текста и навигацията с клавиатура са отделни проверки; симулаторът за цветна слепота на този сайт покрива една от тях.

Официален инструмент на W3C или WebAIM ли е това?

Не. Той прилага публичната формула за контраст на WCAG 2.x независимо и не е свързан с W3C или друга организация за достъпност.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за разработчици