Skip to main content

Valide Kontras Palèt

Kapasite Validate Palette Contrast la tcheke pè koulè nan palèt konsepsyon ou pou konfòmite ak WCAG (Web Content Accessibility Guidelines) anvan li aplike yo sou theme ou.

Apèsi​

Kapasite sa a asire konbinezon koulè sit ou a satisfè estanda aksesibilite yo lè li valide rapò kontras ant koulè tèks ak koulè fon. Li ede anpeche konbinezon koulè ki ta ka difisil pou itilizatè ki gen pwoblèm vizyèl li.

Fòma Antre​

Kapasite a aksepte yon palèt koulè kòm antre:

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

Paramèt​

ParameterTypeRequiredDescription
colorsarrayYesLis objè koulè ki gen pwopriyete name ak hex
wcag_levelstringNoNivo konfòmite WCAG: "A", "AA" (default), oswa "AAA"
pairs_to_checkarrayNoPè koulè espesifik pou valide (pa egzanp, ["primary-text", "background-text"])

Nivo WCAG yo Tcheke​

Kapasite a valide rapò kontras yo dapre estanda WCAG:

NivoTèks NòmalGwo TèksRapò Minimòm
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Tèks Nòmal — tèks ki pi piti pase 18pt (oswa 14pt an gra)
  • Gwo Tèks — tèks 18pt oswa pi gwo (oswa 14pt an gra oswa pi gwo)

Chema Sòti​

Kapasite a retounen yon rapò validasyon detaye:

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

Chan Sòti​

FieldTypeDescription
compliantbooleanSi tout palèt la satisfè nivo WCAG ki espesifye a
wcag_levelstringNivo WCAG ki te tcheke a
pairsarrayRezilta detaye pou chak pè koulè
contrast_rationumberRapò kontras ki kalkile a (1:1 rive 21:1)
statusstring"pass" oswa "fail" pou chak pè
recommendationsarraySijesyon pou amelyore pè ki echwe yo

Egzanp Itilizasyon​

Prompt:

Tcheke si palèt koulè mwen an satisfè estanda WCAG AA. Mwen gen koulè prensipal #678233, koulè tèks #ffffff, ak fon #f5f5f5.

Rezilta: Kapasite a valide tout konbinezon koulè yo epi li retounen:

  • ✅ Prensipal + Tèks: rapò 5.2:1 (pase WCAG AA)
  • ✅ Fon + Tèks: rapò 12.1:1 (pase WCAG AAA)
  • An jeneral: Konfòm ak WCAG AA

Entegrasyon ak Theme Builder​

Lè w ap itilize seleksyon direksyon-konsepsyon Theme Builder la, kapasite Validate Palette Contrast la:

  1. Analize palèt koulè ou chwazi a
  2. Tcheke tout konbinezon tèks-fon yo
  3. Valide kont nivo WCAG ou chwazi a
  4. Bay rekòmandasyon pou pè ki pa konfòm yo
  5. Anpeche aplikasyon konbinezon koulè ki pa aksesib

Pi Bon Pratik​

  • Kòmanse ak nivo AA — WCAG AA se estanda a pou pifò sit entènèt
  • Teste anvan ou aplike — valide palèt ou anvan ou angaje w nan yon konsepsyon
  • Tcheke tout konbinezon yo — asire tèks, lyen, ak eleman UI yo tout satisfè estanda yo
  • Konsidere preferans itilizatè yo — kèk itilizatè ka gen plis sansiblite ak koulè
  • Sèvi ak zouti tcheke kontras — konbine kapasite sa a ak zouti navigatè pou verifikasyon

Pè ki Echwe ak Rekòmandasyon​

Si yon pè koulè echwe validasyon, kapasite a bay rekòmandasyon:

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