Color picker at contrast checker
Pumili ng kulay gamit ang picker o i-type ito sa anumang format. Tingnan ito bilang HEX, RGB, HSL, HSV at CMYK, kumuha ng tints, shades at katugmang kulay, at i-check kung pasado sa WCAG contrast guidelines para sa accessibility ang text sa dalawang kulay.
Mga kulay
Tungkol sa Color picker at contrast checker
Pumili ng kulay gamit ang picker o i-type ito sa anumang format. Tingnan ito bilang HEX, RGB, HSL, HSV at CMYK, kumuha ng tints, shades at katugmang kulay, at i-check kung pasado sa WCAG contrast guidelines para sa accessibility ang text sa dalawang kulay.
Bahagi ng seksyong “File, larawan at disenyo” ng SmartCalcy. Tumatakbo ito sa browser mo nang walang account, gumagamit ng sarili mong currency at units (palitan ang mga ito sa itaas ng page), at nagbibigay ng tantiya para sa impormasyon lamang, kaya tingnan ang opisyal na gabay bago umasa sa resulta.
Paano gamitin ang Color picker at contrast checker
Ano ang kinukuwenta nito at kailan ito gagamitin
Pumipili at nagko-convert ng kulay sa pagitan ng HEX, RGB, HSL, HSV at CMYK, nagmumungkahi ng tints, shades at katugmang kulay, at sine-check ang contrast ng text laban sa WCAG accessibility guidelines.
Paano ito gamitin, hakbang-hakbang
- Pumili ng kulay gamit ang picker o i-type ito bilang HEX, RGB, HSL o pangalan ng kulay.
- Pumili ng kulay ng background para i-check ang contrast.
- Kopyahin ang anumang format sa isang click.
- Gamitin ang tints, shades at katugmang kulay para sa isang palette.
Ano ang ibig sabihin ng bawat input
- Kulay – Nagsisimula sa #2443C8, ang asul ng SmartCalcy.
- Background – Nagsisimula sa puti.
Paano basahin ang mga resulta
- Contrast ratio – Mula 1:1 hanggang 21:1, kasama ang resulta sa AA at AAA para sa normal at malaking text.
- Mga format – HEX, RGB, HSL, HSV at CMYK.
- Tints at shades – Mas maliwanag at mas madilim na bersyon.
- Katugmang kulay – Complementary, analogous at triadic.
Ang formula
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), kung saan ang L1 at L2 ay ang relative luminance ng mas maliwanag at mas madilim na kulay. Kailangan ng WCAG AA ang 4.5:1 para sa normal na text at 3:1 para sa malaking text; kailangan ng AAA ang 7:1 at 4.5:1.
Isang halimbawa
Sa panimulang mga kulay, ang #2443C8 sa puti ay may contrast ratio na 7.74:1, na pasado sa AAA para sa lahat ng laki ng text.
Mga palagay at limitasyon
- Simpleng conversion ang CMYK values, hindi color-managed na print profile.
- Sinusunod ng resulta ng contrast ang WCAG 2 formula.
Karaniwang pagkakamali
- Pag-check ng contrast sa malaking text lang at paggamit ng kulay para sa maliit na text.
- Pag-asa sa kulay lang para ipakita ang kahulugan.
Mga madalas itanong
Anong contrast ratio ang kailangan ko?
Hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text para pumasa sa WCAG AA.
Espesyal na laki ba ang malaking text?
Oo: hindi bababa sa 24 px, o mga 18.7 px kung bold.
Puwede ba akong mag-type ng pangalan ng kulay?
Oo, gumagana ang anumang CSS color name gaya ng teal o tomato.
Kaugnay na tools
| Level | Normal na text | Malaking text |
|---|---|---|
| AA | Pasado | Pasado |
| AAA | Pasado | Pasado |
Mga format
- HEX
- RGB
- HSL
- HSV
- CMYK