🌓Color Contrast Checker

Ano ang Contrast Ratio

Ang contrast ratio ay isang indicator na nagpapahayag ng pagkakaiba sa brightness ng kulay ng teksto at background bilang numerical value mula 1:1 hanggang 21:1. Ang kombinasyon ng itim at puti ay may pinakamataas na 21:1, at ang parehong kulay ay may pinakamababa na 1:1.

• Paano gumagana ang pagkalkula：Ang contrast ratio ay kinakalkula sa pamamagitan ng pagbabago ng 2 kulay sa relative luminance ng sRGB, at pagkatapos ay paghahati ng resulta ng (luminance ng mas maliwanag + 0.05) / (luminance ng mas madilim + 0.05).
• Gabay sa numerical value：Laban sa puting background (#FFFFFF), ang gray #777777 ay may contrast ratio na 4.47:1, #999999 ay 2.84:1, at black (#000000) ay 21:1.

Pagkakaiba ng WCAG AA at AAA

Ang WCAG ay isang international guideline tungkol sa accessibility ng web content, at itinakda nito ang compliance line ng contrast ratio sa 2 levels: AA at AAA.

• AA (Standard Level)：Ang AA ay ang standard na nangangailangan ng 4.5:1 o mas mataas para sa regular text at 3.0:1 o mas mataas para sa large text, at ito ang level na karaniwang sinanayan ng mga website.
• AAA (Mas Mahigpit na Level)：Ang AAA ay ang standard na nangangailangan ng 7:1 o mas mataas para sa regular text at 4.5:1 o mas mataas para sa large text, at layunin nito ay maging readable kahit para sa mga taong may mababang vision.

Kahulugan ng Large Text

Ang large text sa WCAG ay tumutukoy sa text na humigit-kumulang 18 points (24px) o mas malaki, o bold na 14 points (humigit-kumulang 18.7px) o mas malaki.

• Regular na teksto：Ang regular text ay text na hindi kasama sa large text category, tulad ng body text at annotations, at nangangailangan ng contrast ratio na 4.5:1 o mas mataas.
• Relasyon sa heading：Kahit na heading, kung mas mababa sa 24px at hindi bold, ito ay tinatrato bilang regular text, kaya kailangan suriin ang parehong size at weight.