Skip to main content

Nyochaa Nkwekọrịta Palette Contrast

Ikike Validate Palette Contrast na-enyocha ụzọ abụọ agba n'ime palette imewe gị maka irube isi na WCAG (Web Content Accessibility Guidelines) tupu itinye ha na theme gị.

Nchịkọta​

Ikike a na-eme ka usoro agba nke saịtị gị kwekọọ na ụkpụrụ nnweta site n'ịkwado oke nkwekọrịta dị n'etiti ederede na agba ndabere. Ọ na-enyere aka igbochi njikọta agba ndị nwere ike isi ike ka ndị ọrụ nwere nsogbu ịhụ ihe gụọ.

Ụdị Ntinye​

Ikike a na-anabata palette agba dịka ntinye:

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

Parameters​

ParameterTypeRequiredDescription
colorsarrayYesArray nke ihe agba nwere njirimara name na hex
wcag_levelstringNoỌkwa irube isi WCAG: "A", "AA" (ndabara), ma ọ bụ "AAA"
pairs_to_checkarrayNoỤzọ abụọ agba akọwapụtara iji kwado (dịka, ["primary-text", "background-text"])

Ọkwa WCAG A Na-enyocha​

Ikike a na-akwado oke nkwekọrịta dịka ụkpụrụ WCAG si dị:

ỌkwaEderede NkịtịEderede UkwuOke kacha nta
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Ederede Nkịtị — ederede pere mpe karịa 18pt (ma ọ bụ 14pt bold)
  • Ederede Ukwu — ederede 18pt ma ọ bụ karịa (ma ọ bụ 14pt bold ma ọ bụ karịa)

Schema Mmepụta​

Ikike a na-eweghachi akụkọ nkwado zuru ezu:

{
  "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": []
  }
}

Ubi Mmepụta​

FieldTypeDescription
compliantbooleanMa palette niile na-emezu ọkwa WCAG akọwapụtara
wcag_levelstringỌkwa WCAG a nyochara
pairsarrayNsonaazụ zuru ezu maka ụzọ abụọ agba ọ bụla
contrast_rationumberOke nkwekọrịta a gbakọrọ (1:1 ruo 21:1)
statusstring"pass" ma ọ bụ "fail" maka ụzọ abụọ ọ bụla
recommendationsarrayAro maka imezi ụzọ abụọ dara ada

Ihe Nlereanya Ojiji​

Prompt:

Lelee ma palette agba m na-emezu ụkpụrụ WCAG AA. Enwere m agba primary #678233, agba ederede #ffffff, na ndabere #f5f5f5.

Nsonaazụ: Ikike a na-akwado njikọta agba niile ma weghachite:

  • ✅ Primary + Text: oke 5.2:1 (na-agafe WCAG AA)
  • ✅ Background + Text: oke 12.1:1 (na-agafe WCAG AAA)
  • N'ozuzu: Na-erube isi na WCAG AA

Njikọ na Theme Builder​

Mgbe ị na-eji nhọrọ ntụziaka-imewe nke Theme Builder, ikike Validate Palette Contrast:

  1. Na-enyocha palette agba ị họọrọ
  2. Na-enyocha njikọta ederede-ndabere niile
  3. Na-akwado megide ọkwa WCAG ị họọrọ
  4. Na-enye aro maka ụzọ abụọ na-adịghị erube isi
  5. Na-egbochi itinye usoro agba ndị na-adịghị enweta mfe

Omume Kacha Mma​

  • Malite na ọkwa AA — WCAG AA bụ ụkpụrụ maka ọtụtụ webụsaịtị
  • Nwalee tupu itinye — kwado palette gị tupu ịkwado imewe
  • Lelee njikọta niile — hụ na ederede, njikọ, na ihe UI niile na-emezu ụkpụrụ
  • Tụlee mmasị ndị ọrụ — ụfọdụ ndị ọrụ nwere ike inwe mmetụta agba ọzọ
  • Jiri ndị nyocha nkwekọrịta — jikọta ikike a na ngwá ọrụ nchọgharị maka nkwenye

Ụzọ Abụọ Dara Ada na Aro​

Ọ bụrụ na ụzọ abụọ agba adaa nkwado, ikike a na-enye aro:

{
  "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)"
  ]
}