Tagasuri ng contrast at readability ng kulay

Ang readability ay ang pagkakaiba ng luminance sa pagitan ng kulay ng teksto at kulay ng background. Kapag mas malaki ang pagkakaiba, mas madaling basahin ang teksto. Ang masyadong mababang contrast ay nagpapahirap sa pagbasa ng nilalaman – lalo na para sa mga taong may kapansanan sa paningin, matatanda, o sa mahirap na kondisyon ng ilaw (hal. sa telepono sa direktang sikat ng araw).

Ayon sa World Health Organization (WHO), humigit-kumulang 2.2 bilyon na tao sa buong mundo ang may anumang anyo ng kapansanan sa paningin. Bukod dito, milyon-milyon ang may color blindness (mga 8% ng mga lalaki at 0.5% ng mga babae), at marami pa ang nakakaranas ng pagbaba ng paningin dahil sa edad.

Kinakalkula ng tool ang contrast ratio gamit ang formula na tinukoy sa WCAG 2.1 (Web Content Accessibility Guidelines) – internasyonal na alituntunin sa digital accessibility. Ang resulta ay nagbibigay-daan sa objektibong pagsusuri kung sapat na ba ang readability ng mga kulay, anuman ang setting ng monitor o indibidwal na pananaw sa kulay.

Ipinapakita ng tool ang contrast ratio sa scale mula 1:1 (walang contrast) hanggang 21:1 (maximum na contrast – itim sa puti). Ang resulta ay inihahambing sa mga threshold na tinukoy sa WCAG standard:

• Normal na teksto – nangangailangan ng hindi bababa sa 4.5:1 para sa Level AA (minimum standard) o 7:1 para sa Level AAA (enhanced standard). Nalalapat sa teksto na mas mababa sa 18pt (24px) o mas mababa sa 14pt (18.5px) bold.
• Malaki / bold na teksto – nangangailangan ng hindi bababa sa 3:1 para sa Level AA o 4.5:1 para sa Level AAA. Nalalapat sa teksto mula 18pt (24px) o mula 14pt (18.5px) bold – mga heading, button, highlight.
• Mga icon at UI element – nangangailangan ng hindi bababa sa 3:1 para sa Level AA. Nalalapat sa mga icon, button, form field, at iba pang elemento ng interface na naghahatid ng impormasyon.

Level AA ang minimum na kinakailangan ng mga regulasyon sa digital accessibility sa maraming bansa, kabilang ang EU Web Accessibility Directive. Level AAA ay nagbibigay ng mas magandang readability ngunit hindi palaging praktikal na makamit para sa lahat ng elemento.

Kung masyadong mababa ang contrast, hindi kailangan hanapin ang tamang kulay sa pamamagitan ng pagsubok. Awtomatikong hinahanap ng feature na Match ang variant ng kulay ng teksto na natutugunan ang napiling contrast threshold.

Paano gumagana ang matching:

1. Piliin ang matching target mula sa listahan – hal. AA para sa normal na teksto o AAA para sa malaking teksto.
2. I-click ang button na Match.
3. Maghahanap ang tool sa mga lightness variant ng kulay ng teksto at magmumungkahi ng pinakamalapit na natutugunan ang mga kinakailangan.
4. Ang iminungkahing kulay ay maaaring kopyahin sa clipboard o agad na itakda bilang bagong kulay ng teksto.

Pinapanatili ng algorithm ang hue at saturation ng orihinal na kulay, binabago lang ang lightness. Ang iminungkahing kulay ay nananatiling consistent sa visual identity habang natutugunan ang accessibility standard.

Ang color blindness ay nakakaapekto sa mga 8% ng mga lalaki at 0.5% ng mga babae. Ang mga taong may color blindness ay maaaring mahirapang makilala ang ilang pares ng kulay, kahit sapat ang luminance contrast.

Mga pinakakaraniwang uri ng color blindness:

• Deuteranopia – kahirapan sa pagkilala ng berde at pula (pinakakaraniwang anyo)
• Protanopia – kahirapan sa pagtingin ng pula
• Tritanopia – kahirapan sa pagtingin ng asul at dilaw (bihira)

Sinusuri ng tool na ito ang luminance contrast, na mahalaga para sa lahat ng gumagamit. Gayunpaman, kapag nagdidisenyo, mahalaga ring iwasan ang mga problematikong kombinasyon ng kulay (hal. pulang teksto sa berdeng background) at huwag umasa lang sa kulay para maghatid ng impormasyon – gumamit din ng mga hugis, icon, at teksto.