ImageColorPicker.com

Праверка кантрасту колераў

Праверка каэфіцыента кантрасту паміж пярэднім планам і фонам для забеспячэння даступнасці.

Праверь свае колеры

Праверка камбінацый колераў, каб пераканацца, што яны адпавядаюць стандартам даступнасці WCAG для чытэльнасці тэксту.

18.88 да 1
Кантраст
AAA
Вынік для тэксту
Супер

Параўнана: #000000 на #F5F2F4

Тэкст

16px, Звычайны (400)

Лічыцца звычайным тэкстам.

  • AA (WCAG 1.4.3): як мінімум 4.5:1

    Пройдзена

  • AAA (WCAG 1.4.6): як мінімум 7:1

    Пройдзена

Кампаненты UI і графіка

Іконкі, межы поляў уводу, індыкатары фокусу і іншыя часткі, якія трэба бачыць, каб карыстацца інтэрфэйсам.

  • AA (WCAG 1.4.11): як мінімум 3:1

    Пройдзена
18.88 да 1. Тэкст: праходзіць AA, праходзіць AAA. Кампаненты UI: праходзіць.
Як гэта правяраецца
Параўнаныя колеры (пасля змешвання)
Тэкст #000000 на фоне #F5F2F4
Адносная люмінанснасць
Тэкст 0.0000, фон 0.8944
Формула
(L1 + 0.05) / (L2 + 0.05) дзе L1 — люмінанснасць больш светлага колеру, а L2 — больш цёмнага.
Дакладнае суадносіны
18.8896 да 1, паказана як 18.88 да 1. Паказанае значэнне абразаецца, а не акругляецца, таму яно ніколі не выглядае лепшым, чым ёсць. Дакладнае значэнне тое, з якім параўноўваецца патрабаванне.

Памер тэксту: 16px, Звычайны (400)

Лічыцца звычайным тэкстам. Вялікі тэкст — гэта прынамсі 24px (18pt), або прынамсі 18.67px (14pt) пры тоўстым шрыфце (вага 700 і больш). Памеры паказваюцца зрэзанымі, не акругленымі.

Лічыцца звычайным тэкстам. Вялікі тэкст — гэта прынамсі 24px (18pt), або прынамсі 18.67px (14pt) пры тоўстым шрыфце (вага 700 і больш). Памеры паказваюцца зрэзанымі, не акругленымі.

Aa
Загаловак папярэдняга прагляду

Хуткая карычневая ліса пераскоквае праз лянівага сабаку

Прыклад малога тэксту (12px)

Тэкст
#000000
Фон
#f5f2f4

Стандарты WCAG

Узровень AA

Мінімальны каэфіцыент кантрасту 4.5:1 для звычайнага тэксту і 3:1 для вялікага тэксту. Неабходна для большай часткі сайтаў.

Узровень AAA

Пашыраны каэфіцыент кантрасту 7:1 для звычайнага тэксту і 4.5:1 для вялікага тэксту. Рэкамендуецца для аптымальнай даступнасці.

Праверка кантрасту колераў

Вылічэнне каэфіцыента кантрасту тэксту і фону.

Выберыце колер з дапамогай выбарніка колеру для тэксту і фонавага колеру або ўвядзіце колер у фармаце RGB шаснаццатковай сістэмы (напрыклад, #259 або #2596BE). Вы можаце адкарэктаваць паўзунок для выбару колеру. Вэб-кіраўніцтва па даступнасці кантэнту (WCAG) мае спецыфічныя рэкамендацыі, якія дапамогуць вызначыць, ці чытальны тэкст для зрокавых карыстальнікаў. Гэты крытэрый выкарыстоўвае асаблівы алгарытм для пераўтварэння колерных спалучэнняў у параўнальныя каэфіцыенты. Выкарыстоўваючы гэтую формулу, WCAG сцвярджае, што 4.5:1 каэфіцыент кантрасту колеру з тэкстам і яго фонам з'яўляецца дастатковым для звычайнага (тэксту цела) тэксту, а вялікі тэкст (18+ pt звычайны або 14+ pt тлусты) павінен мець як мінімум 3:1 каэфіцыент кантрасту колеру.

Асноўныя асаблівасці

  • Разлік суадносін кантрасту ў рэжыме рэальнага часу
  • Праверка адпаведнасці WCAG AA & AAA
  • Слайдары HSL для тонкай налады
  • Некалькі фарматаў прагляду

Прасунутыя інструменты

  • Аўтаматычная выпраўленне колеру
  • Узоры тэксту і фону
  • Вызначэнне назвы колеру
  • Экспарт вынікаў

Часта задаваныя пытанні

Для адпаведнасці WCAG AA звычайны тэкст патрабуе мінімальнага каэфіцыента кантрасту 4,5:1, а вялікі тэкст (18pt або 14pt паўтлустым шрыфтам) патрабуе 3:1.

WCAG AAA патрабуе большых каэфіцыентаў кантрасту: 7:1 для звычайнага тэксту і 4,5:1 для вялікага, у той час як AA патрабуе 4,5:1 і 3:1 адпаведна.

Скарыстай нашу функцыю аўтавыпраўлення, каб змяніць колер тэксту або фону і захаваць задуму дызайну, або ўручную наладзь колеры паўзункамі HSL з візуальнымі індыкатарамі, якія паказваюць аптымальныя зоны для адпаведнасці AA/AAA.

Зялёныя зоны і маркеры AA/AAA паказваюць аптымальныя дыяпазоны для адпаведнасці WCAG. Падказкі напрамку (Светлей/Цямней) паказваюць, у якім кірунку змяніць колер, каб палепшыць кантраст для тваёй камбінацыі.

Так, можна ўвесці любыя HEX-коды або выбраць уласныя колеры з колавыбіральніка. URL абнаўляецца аўтаматычна, таму ты можаш падзяліцца канкрэтнай камбінацыяй колераў.