Как да проверя дали цветовете на текста и фона ми отговарят на WCAG?

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

Какъв коефициент на контраст изисква WCAG AA?

AA изисква 4,5:1 за нормален текст и 3:1 за едър текст. AAA изисква 7:1 за нормален текст и 4,5:1 за едър текст. UI компонентите и графичните обекти се нуждаят от 3:1.

Какво се счита за едър текст?

Инструментът третира 18pt (24px) нормален текст или 14pt (18,66px) удебелен текст като едър. По-малкият текст трябва да отговаря на по-високите прагове за нормален текст.

Цветовете ми не покриват AA. Как да ги коригирам?

Използвайте предложенията с едно кликване Коригиране на цвета на текста или Коригиране на фона. Те регулират светлотата, като запазват същия нюанс, докато двойката достигне 4,5:1.

Какви цветови формати приема и мога ли да избирам от екрана?

Приема 3-цифрени и 6-цифрени шестнадесетични стойности, като #abc или #1e293b. Бутон Изберете цвят от екрана се появява в браузъри, които поддържат EyeDropper API, като Chromium.

Наистина ли е безплатно?

Да. Всеки инструмент е безплатен, без акаунт и кредитна карта. Работата се извършва на вашето устройство, а не на наши сървъри, което позволява да бъде безплатна.

Работи ли на мобилни устройства?

Да. Работи в съвременните мобилни браузъри на iOS и Android, без да инсталирате нищо.

🌓

Проверка на цветния контраст по WCAG — безплатно

Проверете дали два цвята отговарят на стандартите за контраст WCAG AA и AAA за достъпност. Жив преглед при различни размери на текст с автоматични предложения при недостатъчен контраст.

Работи в браузъраБез регистрация, без изскачащи прозорциНе се изисква входБезплатно завинаги

Работи офлайн след зареждане

Цвят на текста

Цвят на фона

Голям заглавен текст

Среден основен текст (18px) за четене на съдържание.

Нормален основен текст (16px) за абзаци.

Малък основен текст (14px) за надписи и метаданни.

14,63:1

Коефициент на контраст

✓WCAG AA — Нормален текст

Изисква 4.5:1 · Вие имате 14,63:1

✓WCAG AA — Голям текст

Изисква 3.0:1 · Вие имате 14,63:1

✓WCAG AAA — Нормален текст

Изисква 7.0:1 · Вие имате 14,63:1

✓WCAG AAA — Голям текст

Изисква 4.5:1 · Вие имате 14,63:1

✓UI компоненти / графични обекти

Изисква 3.0:1 · Вие имате 14,63:1

Бързи предварителни настройки

Базирано на насоките за контраст WCAG 2.1. Голям текст = 18pt (24px) нормален или 14pt (18,66px) удебелен. HEX кодовете се обновяват и в двете посоки: въведете hex или изберете цвят — двата входа остават синхронизирани.

Често срещани употреби

Одит на уеб страниците за WCAG съответствиеПроверете, че цветовете на текста на вашия сайт отговарят на WCAG AA или AAA стандарти за контрастност за достъпност.
Проверка на комбинациите на цветовете на мрежатаТествайте комбинациите от палета цветове на марката, за да гарантирате, че работят за достъпен дизайн на потребителския интерфейс.
Тест на палетите на цветовете на тъмния режимСветлият текст на тъмна подложка все още може да провали контраста - проверете комбинациите от палета на тъмния режим тук.
Цветни комбинации за печатни материалиПлакати, знаци и печатни материали също имат нужда на четлив контрас - особено за по-възрастни читатели.
Проектирайте достъпни цветове на бутониУверете се, че CTA, бутони за действие и връзки преминават WCAG срещу техните фонове.

Как работи

Проверката на контраста работи изцяло във вашия браузър чрез алгоритъма за относителна яркост от WCAG 2.1 — без библиотека, без сървър, само ръчно написана математика, точно следваща спецификацията. Всеки резултат се обновява в реално време, докато пишете или избирате цвят.

1
Шестнадесетичен вход и нормализация
Приемат се и се нормализират до пълни RGB триплети както 3-цифрени (#abc), така и 6-цифрени (#aabbcc) шестнадесетични стойности. Невалиден вход се отхвърля незабавно, вместо мълчаливо да се приема черно, така че се появява червена рамка вместо подвеждащ резултат за успех.
2
Изчисление на яркостта по WCAG
Всеки цвят се преобразува в относителна яркост чрез формулата на WCAG 2.1: стойностите на sRGB каналите се линеаризират с частична гама корекция (деление на 12.92 под 0.03928, повдигане на степен 2.4 над него), след което се претеглят като 0.2126R + 0.7152G + 0.0722B.
3
Проверки на коефициента на контраст и съответствие
Коефициентът на контраст се изчислява като (по-светлия + 0.05) / (по-тъмния + 0.05) и се проверява спрямо всичките пет прага на WCAG: AA обикновен текст (4.5:1), AA едър текст (3:1), AAA обикновен текст (7:1), AAA едър текст (4.5:1) и компоненти на потребителския интерфейс (3:1). Резултатите се обновяват при всяко натискане на клавиш.
4
Предложения за поправка, запазващи тона
Когато двойката не премине WCAG AA, инструментът търси в пространството на HSL светлината — стъпвайки навън от оригиналната светлина в двете посоки — за да намери най-близкия вариант на всеки цвят, който преминава 4.5:1, запазвайки същите тон и наситеност. EyeDropper API (Chromium) също е достъпен за вземане на проба от произволен цвят директно от екрана ви.

Свързани инструменти

👁️

Симулатор на цветна слепота

Вижте как изглежда дизайнът ви за хора с нарушения в цветното зрение. Симулира протанопия, дейтеранопия, тританопия, ахроматопсия и по-леки аномалии.

ОпитайтеФайловете остават локални

📐

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

Вижте разделителната способност на екрана си в CSS и реални пиксели, размера на прозореца, съотношението на пикселите, дълбочината на цвета, HDR, поддръжката на допир и честотата на опресняване, и копирайте всичко.

Опитайте

🖥️

Тест за мъртви пиксели

Проверете екрана си за мъртви или заседнали пиксели с плътни цветове на цял екран – черно, бяло, червено, зелено, синьо и сиво, плюс опционален инструмент за отпушване на заседнал пиксел.