Проверка на контраста на цветовете

Тествай съотношението на контраста между преден и фонов цвят, за да осигуриш достъпност.

1.00:1
Контраст
Fail
Много лошо

Нормален текст

AA (4.5:1)
AAA (7:1)

Голям текст

AA (3:1)
AAA (4.5:1)
White
#ffffff
Black
#b400ff

Бързи корекции

Aa

Заглавие на прегледа

Бързата кафява лисица прескача мързеливото куче

Пример за малък текст (12px)

Текст
#ffffff
Фон
#b400ff

Стандарти на WCAG

Level AA

Минимално съотношение на контраста 4.5:1 за нормален текст и 3:1 за голям текст. Задължително за повечето уебсайтове.

Level AAA

Подобрено съотношение на контраста 7:1 за нормален текст и 4.5:1 за голям текст. Препоръчително за оптимална достъпност.

Недостатъчен контраст за всички размери на текста - не отговаря на стандартите на WCAG.

Проверка на цветови контраст

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

Избери цвят с помощта на селектор на цветове за текст и фонов цвят или въведи цвят в RGB шестнадесетичен формат (например, #259 или #2596BE). Можеш да регулираш плъзгача, за да избереш цвят. Насоките за достъпност на уеб съдържание (WCAG) имат специфична насока, която помага да се определи дали текстът е четим за зрящи потребители. Този критерий използва определен алгоритъм за картографиране на цветови комбинации в сравними съотношения. Използвайки тази формула, WCAG заявява, че съотношение на контраста 4.5:1 между текст и неговия фон е адекватно за обикновен (текст на тяло), а големият текст (18+ pt обикновен, или 14+ pt удебелен) трябва да има поне 3:1 съотношение на контраста.

Ключови функции

  • Изчисляване на контраста в реално време
  • Проверка за съответствие с WCAG AA & AAA
  • HSL плъзгачи за фина настройка
  • Множество формати за преглед

Разширени инструменти

  • Автоматично коригиране на цветовете
  • Примери за текст и фон
  • Откриване на имена на цветове
  • Експортиране на резултати