Түс контрастын текшерүүчү

Алдыңкы жана арткы пландагы түстөрдүн контраст коэффициентин текшерип, жеткиликтүүлүктү камсыз кылыңыз.

Түстөрүңдү текшер

Түс айкалыштарын текшерип, тексттин окумдуулугу үчүн WCAG жеткиликтүүлүк стандарттарына жооп берерин текшериңиз.

18.88 1ге
Контраст
AAA
Тексттин натыйжасы
Супер

Салыштырылды: #000000 фонунан #F5F2F4

Текст

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

    Өттү
18.88 1ге. Текст: AA боюнча өтөт, AAA боюнча өтөт. Интерфейс элементтери: өтөт.
Кантип текшерилет
Салыштырган түстөр (аралаштыргандан кийин)
Текст #000000 фон #F5F2F4 үстүндө
Релятивдүү люминанция
Текст 0.0000, фон 0.8944
Формула
(L1 + 0.05) / (L2 + 0.05) мында L1 — жарык түстүн люминанциясы, ал эми L2 — караңгы түстүн люминанциясы.
Так катыш
18.8896 : 1, көрсөтүлгөнү 18.88 : 1. Көрсөтүлгөн маани кесилип көрсөтүлөт, тегеректелбейт, ошондуктан ал чындыгынан жакшы көрүнбөйт. Так маани талап менен салыштырылат.

Тексттин өлчөмү: 16px, Кадимки (400)

Нормал текст катары эсептелет. Чоң текст — кеминде 24px (18pt), же жоон болгондо (салмагы 700 же андан жогору) кеминде 18.67px (14pt). Өлчөмдөр кесилип көрсөтүлөт, тегеректелбейт.

Нормал текст катары эсептелет. Чоң текст — кеминде 24px (18pt), же жоон болгондо (салмагы 700 же андан жогору) кеминде 18.67px (14pt). Өлчөмдөр кесилип көрсөтүлөт, тегеректелбейт.

Aa
Алдын ала көрүү аталышы

Тез күрөң түлкү жалкоо иттин үстүнөн секирет

Кичинекей текст мисалы (12px)

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

WCAG стандарттары

AA деңгээли

Адаттагы текст үчүн минимум контраст катышы 4.5:1 жана чоң текст үчүн 3:1. Көптөгөн веб-сайттар үчүн талап кылынат.

AAA деңгээли

Адаттагы текст үчүн жакшыртылган контраст катышы 7:1 жана чоң текст үчүн 4.5:1. Оптималдуу жеткиликтүүлүк үчүн сунушталат.

Түс контрастын текшерүүчү

Текст жана фон түстөрүнүн контраст коэффициентин эсептеңиз.

Текст жана фон үчүн түс тандоо же RGB он алтылык форматта түс киргизүү үчүн түс тандоочу куралды колдонуңуз (мисалы, #259 же #2596BE). Түс тандоо үчүн слайдерди жөндөй аласыз. Веб Мазмунуна Жеткиликтүүлүк боюнча Нускамалар (WCAG) тексттин көрүнүшү жакшы болуш үчүн атайын нускаманы сунуштайт. Бул критерий түстөрдүн айкалышын салыштырмалуу катыштарга карта үчүн атайын алгоритмди колдонуп жатат. Бул формулага ылайык, WCAG текст жана анын фону үчүн 4.5:1 түс контрасттын катышы дене (параграф) тексти жана чоң текст үчүн эң аз 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 автоматтык түрдө жаңыланат, ошондуктан конкреттүү түс айкалыштарын бөлүшө аласыз.