Colour Converter

[ RATIO NG KONTRAS ]
5.37:1
Pasado sa AA, hindi sa AAA
HEX#3366cc
RGB51 102 204
HSL220 60% 50%
Ito ang katawan ng teksto sa ratio sa itaas.
At ito ang malaking teksto.
[ WCAG 2 ]
AA · Katawan ng teksto · 4.5:1PASADO
AA Large · 18pt o 14pt bold · 3:1PASADO
AAA · Katawan ng teksto · 7:1BAGSAK
AAA Large · Malaking teksto · 4.5:1PASADO
UI · Icon at gilid · 3:1PASADO
[ EVERY FORM OF IT ]
HEX#3366cc
HEX na maikli#36c
RGBrgb(51 102 204)
HSLhsl(220 60% 50%)
R, G, B51, 102, 204
Luminance0.1457
HSL lightness is 50% but relative luminance is 14.6%. They are different measures: lightness is geometric, luminance is what the eye sees. Blue and yellow both sit at 50% lightness and differ thirteenfold in luminance, which is why contrast must be judged on luminance.
[ ANO ITO ]

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.

[ MGA TANONG ]

Bakit nandito ang contrast ratio at wala sa hiwalay na tool?

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.

Sabi ng HSL ay 50% liwanag ang kulay ko. Bakit bumabagsak ito sa kontras?

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.

Ano ba talaga ang hinihingi ng AA at AAA?

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.

Bahagyang naaaninag ang kulay ko. Tama ba ang ratio?

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.

Bakit tinanggihan ang limang-digit kong hex sa halip na punuan?

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.

Bakit hindi lahat ng 148 CSS keyword?

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.

[ ANG KOMPUTASYON ]
Lightness laban sa luminance
Asul #0000ff — lightness50%
Asul #0000ff — luminance0.0722
Dilaw #ffff00 — lightness50%
Dilaw #ffff00 — luminance0.9278
Timbang: pula / berde / asul0.2126 / 0.7152 / 0.0722
Ratio = (mas maliwanag + 0.05) ÷ (mas madilim + 0.05). Mula 1:1 hanggang 21:1. AA = 4.5:1 sa katawan ng teksto, 3:1 sa malaki.
[ SUSUNOD ]
67CSS MinifierFor the stylesheet it goes in
65XML at HTML FormatterThe markup it styles
68Unix Timestamp ConverterAnother thing read the wrong way
43JSON FormatterDesign tokens live here
[ 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.