HEX, RGB at HSL, kasama ang WCAG contrast ratio.
Para saan ito
Alamin kung madaling mabasa ang teksto sa isang kulay sa ibabaw ng background na ibang kulay, at makuha ang parehong kulay sa ibang anyong hinihingi ng website o design program.
Bago magsimula
Ihanda ang dalawang kulay — ang kulay ng teksto at ng background — bilang code gaya ng #3366cc, rgb() o hsl() na value, o karaniwang pangalan gaya ng navy.
Ilagay ang kulay ng teksto
I-type ito sa Kulay. Napupuno ng kulay ang parisukat sa tabi ng kahon kapag nabasa na ito ng pahina.
Ilagay ang background
I-type ang background sa Laban sa, o pindutin ang Sa puti o Sa itim para sa dalawang pinakakaraniwan. Pinagpapalit ng Magpalit ang dalawang kulay.
I-convert
Pindutin ang I-convert. Nag-a-update rin ang ratio sa itaas habang nagta-type ka, kaya puwede mong galawin nang kaunti ang kulay at panoorin ang pagbabago.
Basahin ang sample, saka ang mga check
Ipinapakita ng kahon sa ibaba ang totoong teksto sa dalawa mong kulay — tingnan ito, dahil tungkol sa pagbasa ang ratio. Saka basahin ang listahang WCAG 2. Para sa ordinaryong teksto, ang linyang AA ang mahalaga.
Pagbasa ng resulta
Kung may problema
Magkaibang bagay ang lightness at luminance, at doon nagkakamali ang lahat.
Ang lightness sa HSL ay gitna lamang sa geometriya. Ang purong asul #0000ff at purong dilaw #ffff00 ay parehong 50% lightness. Pero ang relative luminance nila ay 0.07 at 0.93 — labintatlong beses ang agwat, dahil sampung beses na mas sensitibo ang mata sa berde kaysa asul.
Kaya pala ang puting teksto sa asul ay pasado sa AA, at ang puting teksto sa dilaw ay bagsak nang malayo. Magkapareho sila sa HSL.
Kinakalkula dito ang luminance ayon sa WCAG 2, kasama ang sRGB gamma curve. Kapag nilaktawan ang hakbang na iyon at pinag-average lang ang hilaw na 0–255, kapani-paniwala ang lumalabas pero mali — at ang mali ay palaging papasa, na siyang mapanganib na direksyon para sa isang pagsusuri ng accessibility.
Dahil ang pagpapalit ng kulay at ang pagsuri kung nababasa ito ay iisang trabaho, na sampung segundo lang ang pagitan. Ang paghihiwalay sa kanila ay nangangahulugang nilalaktawan ang pangalawang kalahati. Hinahawakan ng site na ito ang sariling kopya nito sa 4.5:1, kaya ang paglalagay ng pagsusuri katabi ng pagpapalit ay pagkakatugma at hindi palamuti.
Dahil magkaibang sukat ang lightness at luminance. Ang lightness sa HSL ay gitna sa geometriya: parehong nasa 50% ang purong asul at purong dilaw. Ang relative luminance nila ay 0.07 at 0.93 — labintatlong beses ang agwat — dahil mga sampung beses na mas binibigyang-timbang ng mata ang berde kaysa asul. Iyon ang dahilan kung bakit maluwag na pumapasa sa AA ang puting teksto sa asul at malayong bumabagsak ang puting teksto sa dilaw. Sa luminance dapat husgahan ang kontras, at iyon ang ginagamit nito.
Ang WCAG 2 AA ay nangangailangan ng 4.5:1 para sa katawan ng teksto at 3:1 para sa malaking teksto — 18pt, o 14pt bold. Ang AAA ay 7:1 at 4.5:1 ayon sa pagkakabanggit. Ang icon, gilid ng form at focus ring ay kailangang 3:1 sa ilalim ng panuntunang hindi-teksto. Lahat ng lima ay ipinapakita, dahil nakadepende sa gamit ng kulay kung alin ang mahalaga.
Hindi, at sinasabi iyon ng pahina. Nakatakda ang kontras ng WCAG para sa pinagsanib na resulta — ang kulay na may alpha ay walang nakapirming luminance hangga't hindi mo alam kung ano ang nasa likod nito, at puwedeng larawan o gradient iyon. Itinuturing ng ipinapakitang numero na buo ang dalawang kulay, at pinapalaki niyon ang kontras. Pagsanibin muna ang kulay, tapos suriin ang resulta.
Dahil ang hex na kulay ay may 3, 4, 6 o 8 digit, at ang lima o pito ay halos laging nalaglag o nadobleng karakter. Ang pagpuno nito para magkasya ay magbibigay sa iyo ng kulay na hindi mo itinipa at hindi mo mapapansin — mas malala pa iyon kaysa sa error na tumuturo sa maling type.
Dahil karamihan sa kanila ay lumang tapiserya — papayawhip, lightgoldenrodyellow — at walang nagtitipa niyon. Ang nandito ay ang lumilitaw sa tunay na stylesheet, kasama ang mga kulay-abo. Ang pangalang hindi nakikilala ay tinatanggihan nang may pangalan sa halip na tahimik na hulaan.
Mahalaga
Runs entirely in your browser; nothing is transmitted. Contrast is computed from WCAG 2 relative luminance, including the sRGB gamma step. A ratio involving a semi-transparent colour is an overstatement and is flagged as one. Walang ipinapadala sa mga server namin ang tina-type mo rito — sa browser mo tumatakbo nang buo ang pagkuwenta.
