Skip to main content

Provjera kontrasta palete

Sposobnost Validate Palette Contrast provjerava parove boja u vašoj dizajnerskoj paleti radi usklađenosti s WCAG (Web Content Accessibility Guidelines) prije njihove primjene na vašu temu.

Pregled​

Ova sposobnost osigurava da shema boja vaše stranice zadovoljava standarde pristupačnosti provjerom omjera kontrasta između boja teksta i pozadine. Pomaže spriječiti kombinacije boja koje bi korisnicima s oštećenjima vida mogle biti teške za čitanje.

Format unosa​

Sposobnost prihvaća paletu boja kao unos:

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

Parametri​

ParametarTipObaveznoOpis
colorsarrayDaNiz objekata boja sa svojstvima name i hex
wcag_levelstringNeRazina usklađenosti s WCAG: "A", "AA" (zadano) ili "AAA"
pairs_to_checkarrayNeOdređeni parovi boja za provjeru (npr. ["primary-text", "background-text"])

Provjerene WCAG razine​

Sposobnost provjerava omjere kontrasta prema WCAG standardima:

RazinaNormalan tekstVeliki tekstMinimalni omjer
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Normalan tekst — tekst manji od 18 pt (ili 14 pt podebljan)
  • Veliki tekst — tekst od 18 pt ili veći (ili 14 pt podebljan ili veći)

Shema izlaza​

Sposobnost vraća detaljno izvješće o provjeri:

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

Izlazna polja​

PoljeTipOpis
compliantbooleanZadovoljava li cijela paleta navedenu WCAG razinu
wcag_levelstringWCAG razina koja je provjerena
pairsarrayDetaljni rezultati za svaki par boja
contrast_rationumberIzračunati omjer kontrasta (1:1 do 21:1)
statusstring"pass" ili "fail" za svaki par
recommendationsarrayPrijedlozi za poboljšanje neuspješnih parova

Primjer upotrebe​

Upit:

Provjeri zadovoljava li moja paleta boja WCAG AA standarde. Imam primarnu boju #678233, boju teksta #ffffff i pozadinu #f5f5f5.

Rezultat: Sposobnost provjerava sve kombinacije boja i vraća:

  • ✅ Primarna + tekst: omjer 5.2:1 (prolazi WCAG AA)
  • ✅ Pozadina + tekst: omjer 12.1:1 (prolazi WCAG AAA)
  • Ukupno: Usklađeno s WCAG AA

Integracija s Theme Builder​

Pri upotrebi odabira dizajnerskog smjera u Theme Builder, sposobnost Validate Palette Contrast:

  1. Analizira vašu odabranu paletu boja
  2. Provjerava sve kombinacije teksta i pozadine
  3. Provjerava prema vašoj odabranoj WCAG razini
  4. Pruža preporuke za neusklađene parove
  5. Sprječava primjenu nepristupačnih shema boja

Najbolje prakse​

  • Započnite s razinom AA — WCAG AA je standard za većinu web-stranica
  • Testirajte prije primjene — provjerite svoju paletu prije nego što se obvežete na dizajn
  • Provjerite sve kombinacije — osigurajte da tekst, poveznice i UI elementi zadovoljavaju standarde
  • Uzmite u obzir korisničke preferencije — neki korisnici mogu imati dodatnu osjetljivost na boje
  • Koristite alate za provjeru kontrasta — kombinirajte ovu sposobnost s alatima preglednika za verifikaciju

Neuspješni parovi i preporuke​

Ako par boja ne prođe provjeru, sposobnost pruža preporuke:

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