Color Contrast Checker
Libreng color contrast checker: alamin kung pasado sa WCAG 2.2 AA at AAA ang teksto at background, at makita ang ratio at ang pinakamalapit na pasadong kulay.
Ito ay normal na teksto, kasinlaki ng isang talata.
Malaking teksto
Button| AA | AAA | |
|---|---|---|
| Normal na teksto | ||
| Malaking teksto (24 px, o 18.7 px na bold) | ||
| Mga icon at border ng interface | — |
Ano ang ginagawa nito
Sinusukat ng checker na ito ang contrast sa pagitan ng kulay ng teksto at ng background nito gamit ang formula ng WCAG 2.2 accessibility guidelines, na ginagamit sa maraming batas sa accessibility. Ipinapakita nito ang contrast ratio, mula 1:1 (walang contrast) hanggang 21:1 (itim sa puti), at kung pumapasa ang pares sa mga antas na AA at AAA para sa normal na teksto, malaking teksto at mga bahagi ng interface gaya ng mga icon at border. Kapag bumagsak ang isang pares, nagmumungkahi ito ng pinakamalapit na kulay, na may parehong hue, na pumapasa.
Paano ito gamitin
- Ilagay o piliin ang kulay ng teksto at ang kulay ng background.
- Basahin ang contrast ratio at ang resulta ng AA at AAA, at tingnan ang live preview.
- Kung bagsak, pindutin ang Gamitin sa isang iminungkahing kulay, pagkatapos ay kopyahin ang link para i-share ang resulta.
Mga madalas itanong
Anong contrast ratio ang kailangan ko?
Ang Level AA, ang karaniwang legal na target, ay nangangailangan ng 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto at para sa mga icon at border ng interface. Ang Level AAA ay nangangailangan ng 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto.
Ano ang itinuturing na malaking teksto?
Teksto na hindi bababa sa 24 CSS pixel (18 points), o hindi bababa sa mga 18.7 CSS pixel (14 points) kapag bold. Kadalasang malaki ang mga heading; ang body text ay karaniwang hindi.
Bakit bagsak ang #777777 sa puti?
Ang ratio nito ay 4.47:1, kulang nang kaunti sa 4.5:1 na kailangan para sa normal na teksto. Hindi ni-round up ang mga ratio, kaya ang medyo mas madilim na gray gaya ng #767676 (4.54:1) ang pinakamaliwanag na gray na pumapasa sa puti.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast