WCAG анализатор на палитра
Анализирайте цялата си цветова палитра за WCAG съответствие, вижте кои двойки минават AA и AAA нива на контраст и коригирайте достъпността на дизайна си.
Палитра за анализ
Матрица на контраста
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Легенда за WCAG 2.1
Ниво AAA
Съотношение ≥ 7:1 - Отлично
Ниво AA
Съотношение ≥ 4,5:1 - Стандарт
AA едър
Съотношение ≥ 3:1 - Едър текст
Неуспешно
Съотношение < 3:1 - Несъответстващо
Анализирайте цялата си цветова палитра за WCAG съответствие, вижте кои двойки минават AA и AAA нива на контраст и коригирайте достъпността на дизайна си.
WCAG анализатор на палитра показва само контролите и резултатите, свързани с неговата функция. Наличните опции зависят от инструмента и входа.
Поддържани формати
Как работи
Стъпка 1
Отворете WCAG анализатор на палитра и подгответе входа, поискан от интерфейса
Стъпка 2
Настройте видимите контроли според желания резултат
Стъпка 3
Проверете резултата преди копиране, експортиране или повторна употреба
Чести грешки, които да избягвате
- Не приемайте, че формат или опция се поддържа, ако не е показана в интерфейса.
- Проверете стойностите преди употреба в бранд система, интерфейс или производствен файл.
- При текст или UI компоненти проверете и контраста.
Професионални съвети
- Пазете изходната стойност заедно с резултата, когато сравнявате варианти.
- Използвайте форматите, които инструментът действително показва, вместо да предполагате конверсия.
- На телефон и таблет оставете текстовете и контролите да се пренасят на нов ред.
Обработка на данни
Обработката зависи от използваната функция. Съгласието, аналитиката и функциите на акаунта са отделни от операцията с цвят.
Какво прави инструментът
Анализирайте цялата си цветова палитра за WCAG съответствие, вижте кои двойки минават AA и AAA нива на контраст и коригирайте достъпността на дизайна си. WCAG анализатор на палитра е фокусиран върху тази задача и не предполага функции, които не са показани в интерфейса. Използвайте наличните контроли за желания резултат и проверете показаните стойности, преди да ги прехвърлите в друг инструмент, стилов файл, дизайн или документ.
Подготовка на подходящ вход
Започнете с входа, който WCAG анализатор на палитра изисква: цвят, стойност, изображение или настройка според екрана. Форматите, посочени на тази страница, са Palette, HEX, CSS Variables, JSON. Ако формат или опция не се вижда в интерфейса, не го приемайте като поддържан от тази функция.
Прочит и проверка на резултата
Прочетете резултата в контекста на извършената операция. Сравнете го с изходната стойност и прегледайте настройките, повлияли на изчислението. За важна визуална работа проверете резултата и в реалния интерфейс, където ще се използва.
Работа на телефон и таблет
WCAG анализатор на палитра използва адаптивното оформление на сайта. Заглавията, подзаглавията, breadcrumbs и контролите могат да се пренасят на тесни екрани, за да не се изрязват дълги преводи. Все пак проверете крайния резултат на устройството, на което ще го използвате.
Повторна употреба на резултата
След проверка използвайте само действията, които WCAG анализатор на палитра реално предлага, например копиране или експортиране, когато са налични. Пазете изходната стойност, ако настройката трябва да се повтори, а за UI цветове документирайте и ролята им и нужния контраст.
Свързани инструменти
Ръководства и уроци
Научете как да използвате нашите инструменти с нашите подробни ръководства.
wcag-analyzer: практическо ръководство за accessibility
Локализирано ръководство за wcag-analyzer, добри практики за accessibility и чести грешки.
wcag-analyzer: практическо ръководство за accessibility
Локализирано ръководство за wcag-analyzer, добри практики за accessibility и чести грешки.
wcag-analyzer: практическо ръководство за export
Локализирано ръководство за wcag-analyzer, добри практики за export и чести грешки.
Често задавани въпроси
Научете как да използвате нашите инструменти с нашите подробни ръководства.