Codarsnacht dathanna do théacs, cnaipí agus deilbhíní

Cén fáth a bhfuil tábhacht le codarsnacht

Cuireann téacs lag isteach ar léitheoirí. Teastaíonn difríocht shoiléir idir téacs agus cúlra ó dhaoine a bhfuil lagú radhairc orthu, ó léitheoirí níos sine agus ó aon duine a bhreathnaíonn ar fhón i solas geal. Socraíonn na Treoirlínte um Inrochtaineacht Ábhair Ghréasáin (WCAG) ón W3C íosluachanna dá bhrí sin do théacs, do rialtáin mar chnaipí agus réimsí ionchuir, agus do dheilbhíní agus grafaicí. Is féidir iad a thomhas agus a sheiceáil roimh sheoladh.

Conas a oibríonn an cóimheas codarsnachta

Cuireann an cóimheas codarsnachta i gcomparáid cé chomh geal is atá dhá dhath. Ní bhreathnaíonn WCAG ar an lí ach ar an lonras coibhneasta: luach idir 0 don dubh is dorcha agus 1 don bhán is gile. Tiontaítear agus ualaítear na trí chainéal dearg, glas agus gorm: is mó a áirítear glas, níos lú dearg agus is lú gorm. Is é an cóimheas (L1 + 0.05) / (L2 + 0.05), áit arb é L1 lonras an datha is gile. Bíonn an toradh idir 1:1 do dhá dhath chomhionanna agus 21:1 do dhubh ar bhán.

Tá dhá riail ón W3C tábhachtach go praiticiúil. Ar dtús, ní shlánaítear na luachanna: ní chomhlíonann cóimheas 4.499:1 an teorainn 4.5:1. Ar an dara dul síos, tomhaistear codarsnacht i gcoinne an chúlra atá socraithe don téacs. Má shocraíonn leathanach dath téacs amháin agus gan dath cúlra, áiríonn an W3C é sin mar theip, mar nach eol cúlra réamhshocraithe an chuairteora. Socraigh an dá dhath le chéile i gcónaí.

Na trí chritéar ratha

• 1.4.3 Contrast (Minimum), leibhéal AA: teastaíonn 4.5:1 ar a laghad ó théacs agus ó íomhánna téacs, 3:1 ar a laghad ó théacs mór.
• 1.4.6 Contrast (Enhanced), leibhéal AAA: teastaíonn 7:1 ar a laghad ó théacs, 4.5:1 ar a laghad ó théacs mór. Is é an leibhéal is déine é agus is mó a chabhraíonn sé le téacsanna fada.
• 1.4.11 Non-text Contrast, leibhéal AA: 3:1 ar a laghad i gcoinne na ndathanna in aice leis, do gach rud a chaithfidh tú a fheiceáil chun rialtán agus a staid a aithint (mar shampla imlíne réimse ionchuir nó táscaire fócais) agus do na codanna de ghrafaicí a theastaíonn chun an t-ábhar a thuiscint, mar dheilbhíní nó línte i gcairt.

Cad a áirítear mar théacs mór

Is téacs mór é téacs 18 bpointe ar a laghad, nó 14 phointe ar a laghad i gcló trom. Tiontaíonn an W3C é seo go thart ar 24 picteilín agus thart ar 18.5 picteilín i gcló trom. Is féidir níos lú codarsnachta a bheith ag téacs mór mar go bhfuil na litreacha níos mó agus a stríoca níos leithne. Bí cúramach le clónna tanaí: de réir an W3C, is féidir le frithailiasáil a chur faoi deara go mbreathnaíonn clónna tanaí nó neamhghnácha níos laige ná a ndath sainithe. Molann sé clónna níos tibhe nó péire dathanna atá go soiléir os cionn an íosmhéid.

Cad nach gá dó an tairseach a bhaint amach

• Comhpháirteanna neamhghníomhacha, mar chnaipe díchumasaithe.
• Maisiúchán amháin agus téacs nach féidir le duine ar bith a fheiceáil.
• Téacs atá mar chuid de lógó nó d’ainm branda.
• Téacs teagmhasach i bpictiúr ina bhfuil ábhar suntasach eile, mar chomhartha sráide i ngrianghraf.

Botúin choitianta

• Liath éadrom ar bhán. Is minic a bhíonn liath do dhátaí, d’fhotheidil nó do théacs tánaisteach ró-lag: ní shroicheann #999999 ar bhán ach 2.84:1. Is é #767676 le 4.54:1 an liath glan is éadroime a éiríonn leis AA do ghnáth-théacs ar bhán.
• Téacs ar íomhánna. Athraíonn an chodarsnacht le gach cuid den ghrianghraf. Liostaíonn an W3C íomhánna cúlra gan dóthain codarsnachta mar theip (F83). Cuir an téacs ar limistéar soladach, dorchaigh an íomhá taobh thiar de nó cuir an téacs in aice leis an íomhá. Seiceáil an spota is gile taobh thiar den téacs.
• Téacs sealadach. Is téacs é an leid liath i réimse ionchuir folamh, agus baineann 1.4.3 leis. Ní shroicheann liath éadrom mar #9ca3af ar bhán ach 2.53:1. Ní hionann téacs sealadach agus lipéad infheicthe ach oiread.
• Staideanna hover agus fócais. Ní mór do théacs a thagann chun solais nó a athraíonn nuair a ainlíonn an luch os a chionn nó nuair a fhaigheann sé fócas méarchláir na luachanna céanna a bhaint amach. Ní ceadmhach d’éifeacht hover codarsnacht rialtáin a laghdú ná an táscaire fócais a lagú. Teastaíonn 3:1 i gcoinne an chúlra in aice leis ó tháscaire fócais a dhearann tú féin.
• Téacs bán ar dhathanna branda geala. Is minic a theipeann ar chnaipí oráiste, buí, glas éadrom nó turcaide le téacs bán: sroicheann bán ar #ff6600 2.93:1.
• Imlínte agus deilbhíní lag. Más í an imlíne an t-aon rud a thaispeánann cá bhfuil réimse ionchuir, teastaíonn 3:1 uaithi: tá 1.60:1 ag #cccccc ar bhán. Teastaíonn 3:1 freisin ó dheilbhíní a iompraíonn brí gan téacs, mar shaighead roghchláir anuas nó deilbhín dúnta.
• Téama amháin a sheiceáil. Má tá mód dorcha ar do shuíomh, seiceáil a phéirí dathanna ar leith. D’fhéadfadh dath a oibríonn ar bhán teip ar chúlra dorcha.

Ceartaigh pailéad branda gan an branda a chailleadh

1. 1Scríobh síos gach dath lena ról: téacs, cúlra, aiceann nó cnaipe, imlíne. Tosaíonn go leor fadhbanna nuair a dhéanann dath amháin gach jab.
2. 2Coinnigh an dath branda san áit ina bhfuil na rialacha níos éasca le comhlíonadh nó nach mbaineann siad: sa lógó, ar limistéir mhóra, le haghaidh maisiúcháin agus do cheannteidil mhóra.
3. 3Do théacs agus d’eilimintí beaga, úsáid scáth níos dorcha nó níos gile den lí céanna. Mura n-athraíonn ach an ghile, fanann an dath so-aitheanta: sroicheann téacs bán ar #c74f00, oráiste níos dorcha, 4.61:1.
4. 4Nó athraigh dath an téacs ina ionad. Is minic a oibríonn téacs dorcha ar dhath branda geal níos fearr ná bán: sroicheann #1a1a1a ar #ff6600 5.92:1.
5. 5Sainigh liath amháin do théacs tánaisteach a éiríonn leis, mar shampla #767676 ar bhán, agus úsáid i ngach áit é in ionad roinnt liathanna laga.
6. 6Seiceáil gach staid: gnáth, hover, fócas, earráid agus mód dorcha. Sábháil na dathanna deiridh mar athróga i do stílbhileog, ionas nach roghnaíonn aon duine dath lag de láimh arís.

Seiceáil do dhathanna le Do4U

Ríomhann an Seiceáil codarsnachta dathanna na luachanna seo do do dhathanna féin. Cuireann tú isteach do dhathanna, ceann in aghaidh na líne, agus tugann tú ról do gach ceann: téacs, cúlra, aiceann (mar shampla cnaipe) nó imlíne. Seiceálann an cód gach péire ciallmhar i gcoinne AA agus AAA do ghnáth-théacs agus do théacs mór agus i gcoinne 3:1 d’imlínte, do dheilbhíní agus do limistéir chnaipí, gan slánú suas. Do gach péire a dteipeann air, faigheann tú an dath is gaire a éiríonn leis, uair amháin níos dorcha agus uair amháin níos gile, sa lí céanna. Tógann Do4U pailéad coigeartaithe freisin, seiceálann sé arís é ina iomláine agus easpórtálann sé é mar airíonna saincheaptha CSS, SCSS nó JSON. Ritheann gach rud i gcód, gan AI, agus tá an tseiceáil saor in aisce.

Ní aithníonn an tseiceáil ach na péirí dathanna a chuireann tú isteach. Ní fheiceann sí clómhéideanna, íomhánna taobh thiar de théacs, trédhearcacht ná staideanna hover agus fócais, mar sin tástáil na leathanaigh chríochnaithe freisin. Tógann Do4U an dréacht, seiceálann tusa agus cinneann tusa.