ImageColorPicker.com

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

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

Провери цветовете си

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

19.81 към 1
Контраст
AAA
Резултат за текст
Супер

Сравнено: #000000 върху #E7FDF9

Текст

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

    Успешно
19.81 към 1. Текст: отговаря на AA, отговаря на AAA. Компоненти на интерфейса: отговаря.
Как се проверява
Цветове за сравнение (след смесване)
Текст #000000 върху фон #E7FDF9
Относителна яркост
Текст 0.0000, фон 0.9407
Формула
(L1 + 0.05) / (L2 + 0.05) където L1 е относителната яркост на по-светлия цвят, а L2 на по-тъмния.
Точно съотношение
19.8158 към 1, показано като 19.81 към 1. Показаната стойност е отрязана, не е закръглена, така че никога не изглежда по-добра, отколкото е. Точната стойност е тази, която се сравнява с изискването.

Размер на текста: 16px, Обикновен (400)

Счита се за нормален текст. Големият текст е най-малко 24px (18pt), или най-малко 18.67px (14pt) когато е удебелен (тегло 700 или повече). Размерите се показват отсечени, не закръглени.

Счита се за нормален текст. Големият текст е най-малко 24px (18pt), или най-малко 18.67px (14pt) когато е удебелен (тегло 700 или повече). Размерите се показват отсечени, не закръглени.

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

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

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

Текст
#000000
Фон
#e7fdf9

Стандарти на 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 адресът се обновява автоматично, така че можеш да споделиш конкретна комбинация от цветове.