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

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

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

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

3.65 1ге
Контраст
Өтпөдү
Тексттин натыйжасы
Начар

Салыштырылды: #FFFFFF фонунан #C15ECC

Текст

16px, Кадимки (400)

Нормал текст катары эсептелет.

  • AA (WCAG 1.4.3): кеминде 4.5:1

    Дагы 0.85 керек

    Өтпөдү
  • AAA (WCAG 1.4.6): кеминде 7:1

    Дагы 3.35 керек

    Өтпөдү

UI компоненттери жана графика

Иконкалар, кирүү чегаралары, фокус көрсөткүчтөр жана интерфейсти колдонуу үчүн көрүүсү керек болгон башка бөлүктөр.

  • AA (WCAG 1.4.11): кеминде 3:1

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

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

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

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

Тез оңдоолор

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

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

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

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

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 автоматтык түрдө жаңыланат, ошондуктан конкреттүү түс айкалыштарын бөлүшө аласыз.