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

Оценяване на съотношението на контраста между текстовете и цветовете на фона въз основа на насоките WCAG 2.1.

HEX/RGB/HSL
HEX/RGB/HSL
Всичко се изпълнява локално във вашия браузър.

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

Голяма глава (18pt Bold / 24pt Regular)

Това е преглед на големия заглавен текст стил.

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

Lorem ipsum dolor sit amet, консектуру adipiscing elit.

Противоречиви съотношения

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 Указания

Лесно проверяват стандартите за контраст, за да създадат достъпни интерфейси, които отговарят на насоките на секция 508, ADA и WCAG AA или AAA.

Моторът на предложенията

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

Пълна клиентска страна

Компютрите се изпълняват локално в контекста на браузъра Ви. Няма цветове, файлове или телеметрични координати, които се предават на нашите сървъри.

Свързани цветове

HEX RGB HSL Конвертор на цветове
Конвертирайте цветовете и коригирайте координатите на светлината.
Снимка на цветовете Picker
Извличайте цветови палети от дизайнерските мокъпи.
CSS Конвертор на цветове
Конвертирайте между CMYK, HSV, RGB, HSL и HEX формати.

Цветни контрастни проверка

Изчислете съотношението на контраста на WCAG за предните и фонови цветове и покажете общи резултати от текстовия размер.

Вход
2 валидни CSS цветове и изберете текст за преглед.
Изход
Противоречието на пропорциите с WCAG AA и AAA пропускат или не пропускаат показателите.
Реални ограничения
Изчислението покрива само световен контраст; не сертифицира интерфейс или сметка за шрифтове, движение, фокус или не-цветни съединения.
Личност и обработка на данни
2 валидни CSS цветове и опционален преглед текст се обработват в тази таблица на браузъра. конверторът не го получава или съхранява; затварянето или презареждането на страницата изчиства работното състояние, освен ако инструментът изрично предлага локално изтегляне.

Как да използваме този инструмент

  1. Предлагайте две валидни CSS цветове и изберете текст за преглед в контролите на инструментите.
  2. Изберете настройките, които засягат съотношението на контраст с WCAG AA и AAA пропуска или неудачни показатели, след което изпълнете инструмента.
  3. Преглед на съотношението контраст с WCAG AA и AAA пропуска или не пропуска показателите преди копиране или изтегляне.

Общ начин на неуспех

Невалидни цветове не могат да бъдат измерени, а прозрачността без разрешен фон може да направи съотношението без значение.

Полезен пример

Сравнете текста #f2937 на #ffffff, за да прегледате съотношението му за нормален и голям текст.