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

Керү мөмкинлеген тәэмин итү өчен алгы һәм фон төсмерләренең контраст нисбәтен тикшерегез.

Төсләреңне тикшер

Текст укыла алуын тәэмин итү өчен WCAG керү мөмкинлеге стандартларына туры килүен тикшерү өчен төсмер комбинацияләрен сынап карагыз.

5.80 ту 1
Контраст
AA
Текст нәтиҗәсе
Яхшы

Чагыштырылган: #000000 өстендә #CF6291

Текст

16px, Гадәти (400)

Бу гадәти текст буларак исәпләнә.

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

    Үтте
  • AAA (WCAG 1.4.6): ким дигәндә 7:1

    Тагы 1.20 кирәк

    Уңышсыз

Интерфейс элементлары һәм графика

Иконкалар, кертү кыры чикләре, фокус күрсәткечләре һәм интерфейста күренеп торырга кирәкле башка элементлар.

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

    Үтте
5.80 1 гә. Текст: AA таләбен үти, AAA таләбен үтәми. UI компонентлар: үти.
Ничек тикшерелә
Чагыштырылган төсләр (катнаштырганнан соң)
Текст #000000 фонда #CF6291
Чагыштырма яктылык
Текст 0.0000, фон 0.2404
Формула
(L1 + 0.05) / (L2 + 0.05) биредә L1 яктырак төстең яктыртуы, ә L2 караңгырак төстән.
Төгәл нисбәт
5.8090 1 гә, 5.80 1 гә дип күрсәтелә. Күрсәтелгән кыйммәт кыскартыла, түгәрәкләнми, шуңа күрә ул чыннан яхшырак кебек күренми. Таләп белән чагыштыру өчен төгәл кыйммәт кулланыла.

Текст зурлыгы: 16px, Гадәти (400)

Бу гадәти текст буларак исәпләнә. Зур текст ким дигәндә 24px (18pt), яки калын булганда (700 яки күбрәк) ким дигәндә 18.67px (14pt). Зурлыклар кисеп күрсәтелә, түгәрәкләнми.

Бу гадәти текст буларак исәпләнә. Зур текст ким дигәндә 24px (18pt), яки калын булганда (700 яки күбрәк) ким дигәндә 18.67px (14pt). Зурлыклар кисеп күрсәтелә, түгәрәкләнми.

Aa
Алдан карау исеме

Ашыккан төлке ялкау эт өстеннән сикерә

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

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

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

AA дәрәҗәсе

Гадәти текст өчен минимум 4.5:1 контраст нисбәте һәм зур текст өчен 3:1. Күп вебсайтлар өчен мәҗбүри.

AAA дәрәҗәсе

Гадәти текст өчен 7:1 кушылган контраст нисбәте һәм 4.5:1 зур текст өчен. Максатчан уңайлылык өчен тәкъдим ителә.

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

Текст һәм фон төсмерләренең контраст нисбәтен исәпләгез.

Матн һәм фон өчен төс сайлау өчен төслек сайлагычны кулланыгыз яки RGB унбиш алфавит форматында төс кертегез (мәсьәлән, #259 яки #2596BE). Төслек сайлау өчен сикерткечне көйли аласыз. Веб Контент Уңайлылык Күрсәтмәләрендә (WCAG) күрүчеләр өчен матнның укылучанлыгын тәэмин итү өчен махсус киңәш бар. Бу критерия төсләрне чагыштырып булсын өчен билгеле бер алгоритмны куллана. Бу формула буенча, WCAG тәкъдим итә, минимум контраст нисбәтен 4.5:1 матн һәм фон өчен кирәкле итеп саный, ә зур текст (18+ нокта гади, яки 14+ нокта көрән) өчен иң аз 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 белән чагыштырганда.

Дизайн максатын саклап, текст яки фонны көйләү өчен автомат төзәтү функциясен кулланыгыз, яки AA/AAA туры килү өчен оптималь зоналарны күрсәтүче HSL көйләүчеләре белән төсләрне кулдан көйләгез.

Яшел зоналар һәм AA/AAA билгеләре WCAG туры килүенә ирешү өчен оптималь диапазоннарны күрсәтә. Юнәлеш киңәшләре (яктырак/караңгырак) сезнең хәзерге төс комбинациягезгә карап яхшырак контрастка юнәлтә.

Әйе, сез теләсә нинди HEX кодны кертә аласыз яки төс сайлагыч белән махсус төсләр сайлый аласыз. URL автоматик рәвештә яңара, шуңа күрә сез аерым төс комбинацияләрен уртаклаша аласыз.