Палитра контрастын тикшерү

Validate Palette Contrast мөмкинлеге дизайн палитрагыздагы төс парларын темагызга кулланганчы WCAG (Web Content Accessibility Guidelines) таләпләренә туры килүен тикшерә.

Гомуми күзәтү

Бу мөмкинлек сайтыгызның төс схемасы керү мөмкинлеге стандартларына туры килүен текст һәм фон төсләре арасындагы контраст коэффициентларын тикшереп тәэмин итә. Ул күрү мөмкинлеге чикләнгән кулланучыларга укуы кыен булырга мөмкин төс кушылмаларын булдырмаска ярдәм итә.

Кертү форматы

Мөмкинлек кертү итеп төс палитрасын кабул итә:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

Параметрлар

Parameter	Type	Required	Description
colors	array	Әйе	name һәм hex үзлекләре булган төс объектлары массивы
wcag_level	string	Юк	WCAG туры килү дәрәҗәсе: "A", "AA" (килешү буенча), яки "AAA"
pairs_to_check	array	Юк	Тикшереләчәк конкрет төс парлары (мәс., ["primary-text", "background-text"])

Тикшерелә торган WCAG дәрәҗәләре

Мөмкинлек контраст коэффициентларын WCAG стандартлары буенча тикшерә:

Дәрәҗә	Гади текст	Зур текст	Минималь коэффициент
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

• Гади текст — 18pt тан кечерәк текст (яки 14pt калын)
• Зур текст — 18pt яки зуррак текст (яки 14pt калын яки зуррак)

Чыгыш схемасы

Мөмкинлек җентекле тикшерү хисабын кайтара:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

Чыгыш кырлары

Field	Type	Description
compliant	boolean	Бөтен палитра күрсәтелгән WCAG дәрәҗәсенә туры киләме
wcag_level	string	Тикшерелгән WCAG дәрәҗәсе
pairs	array	Һәр төс пары өчен җентекле нәтиҗәләр
contrast_ratio	number	Исәпләнгән контраст коэффициенты (1:1 дән 21:1 гә кадәр)
status	string	Һәр пар өчен "pass" яки "fail"
recommendations	array	Үтмәгән парларны яхшырту өчен тәкъдимнәр

Куллану мисалы

Сорау:

Төс палитрам WCAG AA стандартларына туры киләме икәнен тикшерегез. Миндә төп төс #678233, текст төсе #ffffff һәм фон #f5f5f5.

Нәтиҗә: Мөмкинлек барлык төс кушылмаларын тикшерә һәм кайтара:

• ✅ Төп + Текст: 5.2:1 коэффициенты (WCAG AA үтә)
• ✅ Фон + Текст: 12.1:1 коэффициенты (WCAG AAA үтә)
• Гомумән: WCAG AA белән туры килә

Theme Builder белән интеграция

Theme Builder'ның дизайн-юнәлеш сайлавын кулланганда, Validate Palette Contrast мөмкинлеге:

1. Сез сайлаган төс палитрасын анализлый
2. Барлык текст-фон кушылмаларын тикшерә
3. Сез сайлаган WCAG дәрәҗәсенә каршы тикшерә
4. Туры килми торган парлар өчен тәкъдимнәр бирә
5. Керү мөмкинлеге булмаган төс схемаларын куллануны булдырмый

Иң яхшы практикалар

• AA дәрәҗәсеннән башлагыз — WCAG AA күпчелек веб-сайтлар өчен стандарт
• Кулланганчы сынагыз — дизайнга керешкәнче палитрагызны тикшерегез
• Барлык кушылмаларны тикшерегез — текст, сылтамалар һәм UI элементларының барысы да стандартларга туры килүен тәэмин итегез
• Кулланучы өстенлекләрен исәпкә алыгыз — кайбер кулланучыларның өстәмә төс сизгерлеге булырга мөмкин
• Контраст тикшергечләрен кулланыгыз — раслау өчен бу мөмкинлекне браузер кораллары белән берләштерегез

Үтмәгән парлар һәм тәкъдимнәр

Әгәр төс пары тикшерүне үтәмәсә, мөмкинлек тәкъдимнәр бирә:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Lighten the text color to #ffffff (ratio would be 5.2:1)",
    "Darken the background color to #556b2f (ratio would be 4.8:1)",
    "Use a different primary color like #4a6b1f (ratio would be 6.1:1)"
  ]
}

Бәйле мөмкинлекләр

• Logo SVG ясау — тикшерелгән төс палитрагыз белән логотиплар ясагыз
• Меню ясау — керү мөмкинлеге булган төсләр белән навигация төзегез