Skip to main content

Dilysu Cyferbyniad Palet

Mae’r gallu Dilysu Cyferbyniad Palet yn gwirio parau lliw yn eich palet dylunio am gydymffurfiaeth â WCAG (Web Content Accessibility Guidelines) cyn eu cymhwyso i’ch thema.

Trosolwg​

Mae’r gallu hwn yn sicrhau bod cynllun lliw eich gwefan yn bodloni safonau hygyrchedd drwy ddilysu cymarebau cyferbyniad rhwng testun a lliwiau cefndir. Mae’n helpu i atal cyfuniadau lliw a allai fod yn anodd i ddefnyddwyr ag anableddau gweledol eu darllen.

Fformat Mewnbwn​

Mae’r gallu yn derbyn palet lliw fel mewnbwn:

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

Paramedrau​

ParameterTypeRequiredDescription
colorsarrayYesArae o wrthrychau lliw gyda phriodweddau name a hex
wcag_levelstringNoLefel gydymffurfio WCAG: "A", "AA" (diofyn), neu "AAA"
pairs_to_checkarrayNoParau lliw penodol i’w dilysu (e.e., ["primary-text", "background-text"])

Lefelau WCAG a Wirir​

Mae’r gallu yn dilysu cymarebau cyferbyniad yn ôl safonau WCAG:

LefelTestun ArferolTestun MawrCymhareb Isaf
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Testun Arferol — testun llai na 18pt (neu 14pt trwm)
  • Testun Mawr — testun 18pt neu fwy (neu 14pt trwm neu fwy)

Sgema Allbwn​

Mae’r gallu yn dychwelyd adroddiad dilysu manwl:

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

Meysydd Allbwn​

FieldTypeDescription
compliantbooleanA yw’r palet cyfan yn bodloni’r lefel WCAG benodedig
wcag_levelstringY lefel WCAG a wiriwyd
pairsarrayCanlyniadau manwl ar gyfer pob pâr lliw
contrast_rationumberY gymhareb cyferbyniad a gyfrifwyd (1:1 i 21:1)
statusstring"pass" neu "fail" ar gyfer pob pâr
recommendationsarrayAwgrymiadau ar gyfer gwella parau sy’n methu

Enghraifft Defnydd​

Anogiad:

Gwiriwch a yw fy mhaleg lliw yn bodloni safonau WCAG AA. Mae gennyf liw cynradd #678233, lliw testun #ffffff, a chefndir #f5f5f5.

Canlyniad: Mae’r gallu yn dilysu pob cyfuniad lliw ac yn dychwelyd:

  • ✅ Cynradd + Testun: cymhareb 5.2:1 (yn pasio WCAG AA)
  • ✅ Cefndir + Testun: cymhareb 12.1:1 (yn pasio WCAG AAA)
  • Cyffredinol: Yn gydymffurfiol â WCAG AA

Integreiddio â Theme Builder​

Wrth ddefnyddio dewis cyfeiriad-dylunio Theme Builder, mae’r gallu Dilysu Cyferbyniad Palet yn:

  1. Dadansoddi eich palet lliw a ddewiswyd
  2. Gwirio pob cyfuniad testun-cefndir
  3. Dilysu yn erbyn eich lefel WCAG ddewisol
  4. Darparu argymhellion ar gyfer parau nad ydynt yn gydymffurfiol
  5. Atal cymhwyso cynlluniau lliw anhygyrch

Arferion Gorau​

  • Dechreuwch gyda lefel AA — WCAG AA yw’r safon ar gyfer y rhan fwyaf o wefannau
  • Profwch cyn cymhwyso — dilyswch eich palet cyn ymrwymo i ddyluniad
  • Gwiriwch bob cyfuniad — sicrhewch fod testun, dolenni, ac elfennau UI i gyd yn bodloni safonau
  • Ystyriwch ddewisiadau defnyddwyr — gall fod gan rai defnyddwyr sensitifrwydd lliw ychwanegol
  • Defnyddiwch wirwyr cyferbyniad — cyfuno’r gallu hwn ag offer porwr ar gyfer gwirio

Parau sy’n Methu ac Argymhellion​

Os yw pâr lliw yn methu dilysu, mae’r gallu yn darparu argymhellion:

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