Skip to main content

Validēt paletes kontrastu

Spēja Validate Palette Contrast pārbauda krāsu pārus jūsu dizaina paletē attiecībā uz WCAG (Web Content Accessibility Guidelines) atbilstību, pirms tos piemēro jūsu theme.

Pārskats​

Šī spēja nodrošina, ka jūsu site krāsu shēma atbilst pieejamības standartiem, validējot kontrasta attiecības starp teksta un fona krāsām. Tā palīdz novērst krāsu kombinācijas, kuras lietotājiem ar redzes traucējumiem varētu būt grūti salasīt.

Ievades formāts​

Spēja kā ievadi pieņem krāsu paleti:

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

Parametri​

ParametrsTipsObligātsApraksts
colorsarrayJāKrāsu objektu masīvs ar name un hex īpašībām
wcag_levelstringNēWCAG atbilstības līmenis: "A", "AA" (noklusējums) vai "AAA"
pairs_to_checkarrayNēKonkrēti validējamie krāsu pāri (piem., ["primary-text", "background-text"])

Pārbaudītie WCAG līmeņi​

Spēja validē kontrasta attiecības atbilstoši WCAG standartiem:

LīmenisParasts tekstsLiels tekstsMinimālā attiecība
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Parasts teksts — teksts, kas ir mazāks par 18pt (vai 14pt treknrakstā)
  • Liels teksts — teksts 18pt vai lielāks (vai 14pt treknrakstā vai lielāks)

Izvades shēma​

Spēja atgriež detalizētu validācijas pārskatu:

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

Izvades lauki​

LauksTipsApraksts
compliantbooleanVai visa palete atbilst norādītajam WCAG līmenim
wcag_levelstringWCAG līmenis, kas tika pārbaudīts
pairsarrayDetalizēti rezultāti katram krāsu pārim
contrast_rationumberAprēķinātā kontrasta attiecība (no 1:1 līdz 21:1)
statusstring"pass" vai "fail" katram pārim
recommendationsarrayIeteikumi neveiksmīgo pāru uzlabošanai

Lietošanas piemērs​

Uzvedne:

Pārbaudi, vai mana krāsu palete atbilst WCAG AA standartiem. Man ir primārā krāsa #678233, teksta krāsa #ffffff un fons #f5f5f5.

Rezultāts: Spēja validē visas krāsu kombinācijas un atgriež:

  • ✅ Primārā + teksts: attiecība 5.2:1 (atbilst WCAG AA)
  • ✅ Fons + teksts: attiecība 12.1:1 (atbilst WCAG AAA)
  • Kopumā: atbilst WCAG AA

Integrācija ar Theme Builder​

Izmantojot Theme Builder dizaina virziena izvēli, Validate Palette Contrast spēja:

  1. Analizē jūsu izvēlēto krāsu paleti
  2. Pārbauda visas teksta un fona kombinācijas
  3. Validē pret jūsu izvēlēto WCAG līmeni
  4. Sniedz ieteikumus neatbilstošiem pāriem
  5. Novērš nepieejamu krāsu shēmu piemērošanu

Labākā prakse​

  • Sāciet ar AA līmeni — WCAG AA ir standarts lielākajai daļai tīmekļa vietņu
  • Testējiet pirms piemērošanas — validējiet savu paleti, pirms apstiprināt dizainu
  • Pārbaudiet visas kombinācijas — pārliecinieties, ka teksts, saites un UI elementi atbilst standartiem
  • Ņemiet vērā lietotāju preferences — dažiem lietotājiem var būt papildu jutība pret krāsām
  • Izmantojiet kontrasta pārbaudītājus — apvienojiet šo spēju ar pārlūka rīkiem verifikācijai

Neveiksmīgi pāri un ieteikumi​

Ja krāsu pāris neiztur validāciju, spēja sniedz ieteikumus:

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