Към съдържанието
PN Scripts

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

Swatchwell

от PN Scripts

Пипета за цветове и проверка на контраста по WCAG 2.2 в лентата на браузъра, която показва кои нива минават и предлага най-близкия цвят, който минава.

  • Chrome (Manifest V3)
  • Firefox (Manifest V3)
  • JavaScript
  • EyeDropper API
  • Очаквайте скоро

Очаквайте скоро

Още не е публикуван в магазина, затова няма връзка за покупка или изтегляне. PN Scripts не приема плащане за него тук.

Инструменти за разработчици
Прозорецът на Swatchwell със сив текст на бял фон, който не минава AA, значки и два предложени цвята за текста

Какъв проблем решава

Празнината

Проверката на контраста обикновено означава да копирате hex кодове в някой сайт, да прочетете съотношението и после на ръка да търсите по-тъмен нюанс, докато мине, и така за всяка двойка.

Какво представлява

Swatchwell взима цветовете направо от екрана, дава веднага оценката по WCAG 2.2 и изчислява най-близкия цвят, който минава, като запазва тона, така че поправката е един клик вместо налучкване.

Как се използва

Стигате от неуспешна двойка цветове до успешна за секунди, с точното съотношение и стойност, готова за поставяне в CSS.

За дизайнери, фронтенд разработчици и проверяващи достъпността Swatchwell е частна, офлайн проверка на контраста, която не спира при съотношението, а предлага цвят, който отговаря на изискванията.

За кого е

Използвайте го когато

  • Проверка на цветовете на бутони и връзки за WCAG AA преди пускане
  • Достъпен нюанс на фирмен цвят, без да се губи тонът му
  • Преглед на работещ сайт за проблеми с контраста при одит на достъпността

Направено за

  • Уеб дизайнери и фронтенд разработчици
  • Проверяващи достъпността и QA специалисти

Какво има вътре

Взимате или въвеждате

Всеки ред, за текст и за фон, има пипета за всеки пиксел на екрана, стандартен избор на цвят и поле, което приема hex, rgb(), hsl(), oklch() и oklab() в стар и нов запис. Полупрозрачният текст се измерва така, както изглежда върху фона.

Оценката

Съотношението се показва отрязано, а не закръглено, както изисква WCAG, със зелени или червени значки за AA нормален текст (4.5:1), AA едър текст (3:1), AAA нормален (7:1), AAA едър (4.5:1) и елементи на интерфейса (3:1), и с преглед на текст 24px и 16px.

Най-близкият цвят, който минава

За всяко неуспешно ниво Swatchwell търси светлина в OKLCH в двете посоки и запазва тона и наситеността на цвета, където е възможно. Предложенията показват hex кода и точното съотношение, а вариант за фона се появява, когато близък фон минава.

Копирате и пазите

Избраният цвят се копира като HEX, RGB, HSL или OKLCH, а форматът се запомня. Всеки взет, въведен или приложен цвят влиза в палитра от 24, която ползвате с един клик или изчиствате.

Спецификации

Наличност
Очаквайте скоро
Разработчик
PN Scripts
Вид
Разширение
Платформи
JavaScript
Ценообразуване
Еднократно плащане Цената ще бъде обявена.
Лиценз
Собственически лиценз
Внедряване
Изтегляне (ZIP с разархивираното разширение за Chromium браузъри и за Firefox)
Зрялост
v1.0.0

Съвместимост

Платформа или среда Поддържани версии Тествано до
Google Chrome and Chromium browsers 102 или по-нова popup rendered in Chrome 155 (headless); not installed
Firefox 115 или по-нова not tested
Node.js (to run the tests) 20 или по-нова 22.23

Стек

  • Chrome (Manifest V3)
  • Firefox (Manifest V3)
  • JavaScript
  • EyeDropper API

Swatchwell предстои

Продуктът е завършен и тестван. Още не се продава; тази страница ще посочи откъде да го вземете, когато започне.

Очаквайте скоро

Още не е публикуван в магазина, затова няма връзка за покупка или изтегляне. PN Scripts не приема плащане за него тук.

Въпроси

Разширение за Chromium браузъри и Firefox, което взима цветове, проверява контраста по WCAG 2.2 за текст и елементи на интерфейса, показва APCA като допълнителна стойност и предлага най-близкия цвят, който минава.

Chrome, Edge, Opera, Brave или друг Chromium браузър версия 102 или по-нова, или Firefox 115 или по-нов. Взимането на цвят от екрана изисква EyeDropper API, което Chromium браузърите имат, а Firefox няма. Инсталирането става чрез зареждане на разархивираната папка в режим за разработчици или като временна добавка във Firefox.

Разширението не сканира цели страници, не симулира цветна слепота и не проверява текст върху изображения и преливки. Не е публикувано в магазин за разширения. По време на тестовете пакетите не са инсталирани в истински браузър, а пипетата и версията за Firefox не са изпробвани.

Написано е на чист JavaScript без зависимости: модул за цветовите изчисления, модул за състоянието и самият прозорец. Създадено с помощта на AI; цветовите изчисления и логиката на прозореца са проверени от PN Scripts с автоматизирани тестове на Node.js спрямо публикувани еталонни стойности на WCAG и APCA, а истинският прозорец е рендиран в Google Chrome без интерфейс за всяко изображение в галерията.

Още не се продава. Когато започне, тази страница ще води към магазина; PN Scripts не приема плащания на този сайт.