Preskoči na vsebino

Preverjanje kontrasta palete

Zmožnost Validate Palette Contrast preveri barvne pare v vaši oblikovalski paleti glede skladnosti z WCAG (Web Content Accessibility Guidelines), preden jih uporabite v svoji temi.

Pregled​

Ta zmožnost zagotavlja, da barvna shema vašega spletnega mesta izpolnjuje standarde dostopnosti, tako da preverja kontrastna razmerja med barvami besedila in ozadja. Pomaga preprečiti barvne kombinacije, ki bi jih uporabniki z okvarami vida težko brali.

Oblika vnosa​

Zmožnost kot vnos sprejme barvno paleto:

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

Parametri​

ParameterTypeRequiredDescription
colorsarrayYesPolje barvnih objektov z lastnostma name in hex
wcag_levelstringNoRaven skladnosti WCAG: "A", "AA" (privzeto) ali "AAA"
pairs_to_checkarrayNoDoločeni barvni pari za preverjanje (npr. ["primary-text", "background-text"])

Preverjene ravni WCAG​

Zmožnost preverja kontrastna razmerja v skladu s standardi WCAG:

LevelNormal TextLarge TextMinimum Ratio
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Običajno besedilo — besedilo, manjše od 18 pt (ali 14 pt krepko)
  • Veliko besedilo — besedilo 18 pt ali večje (ali 14 pt krepko ali večje)

Shema izhoda​

Zmožnost vrne podrobno poročilo o preverjanju:

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

Izhodna polja​

FieldTypeDescription
compliantbooleanAli celotna paleta izpolnjuje določeno raven WCAG
wcag_levelstringRaven WCAG, ki je bila preverjena
pairsarrayPodrobni rezultati za vsak barvni par
contrast_rationumberIzračunano kontrastno razmerje (1:1 do 21:1)
statusstring"pass" ali "fail" za vsak par
recommendationsarrayPredlogi za izboljšanje neuspešnih parov

Primer uporabe​

Poziv:

Preveri, ali moja barvna paleta izpolnjuje standarde WCAG AA. Imam primarno barvo #678233, barvo besedila #ffffff in ozadje #f5f5f5.

Rezultat: Zmožnost preveri vse barvne kombinacije in vrne:

  • ✅ Primarna + besedilo: razmerje 5.2:1 (ustreza WCAG AA)
  • ✅ Ozadje + besedilo: razmerje 12.1:1 (ustreza WCAG AAA)
  • Skupno: skladno z WCAG AA

Integracija s Theme Builder​

Pri uporabi izbire oblikovalske usmeritve v Theme Builder zmožnost Validate Palette Contrast:

  1. Analizira vašo izbrano barvno paleto
  2. Preveri vse kombinacije besedila in ozadja
  3. Preveri glede na izbrano raven WCAG
  4. Poda priporočila za neskladne pare
  5. Prepreči uporabo nedostopnih barvnih shem

Najboljše prakse​

  • Začnite z ravnjo AA — WCAG AA je standard za večino spletnih mest
  • Preizkusite pred uporabo — preverite svojo paleto, preden se zavežete oblikovanju
  • Preverite vse kombinacije — zagotovite, da besedilo, povezave in elementi uporabniškega vmesnika vsi izpolnjujejo standarde
  • Upoštevajte uporabniške nastavitve — nekateri uporabniki imajo lahko dodatno občutljivost na barve
  • Uporabite preverjevalnike kontrasta — združite to zmožnost z orodji brskalnika za preverjanje

Neuspešni pari in priporočila​

Če barvni par ne prestane preverjanja, zmožnost poda priporočila:

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