Operasyonal
Mag-sign In / Magrehistro
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Color Contrast Checker
Anunsyo
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Ilagay ang iyong mga kumbinasyon ng kulay sa ibaba upang subukan ang mga ito gamit ang aming color contrast checker at makita kaagad kung natutugunan ng mga ito ang mga pamantayan sa pagiging naa-access.
Paano Gumagana ang Aming Color Contrast Checker
Ilagay ang iyong foreground at background na mga kulay gamit ang RGB hex values, o direktang piliin ang mga ito gamit ang Color Picker.
- Isaayos ang Alpha para baguhin kung gaano ka-transparent ang kulay ng foreground.
- Gamitin ang slider ng Lightness upang gawing mas maliwanag o mas madilim ang kulay.
Kinakalkula ng aming tool ang contrast ratio at sinusuri ito sa mga alituntunin ng WCAG:
- WCAG 2.0 Level AA
- Hindi bababa sa 4.5:1 para sa normal na body text
- Hindi bababa sa 3:1 para sa malaking text
- WCAG 2.1 (UI at graphics)
- Hindi bababa sa 3:1 para sa mga icon, border, at iba pang bahagi ng interface
- WCAG Level AAA
- Hindi bababa sa 7:1 para sa normal na text
- Hindi bababa sa 4.5:1 para sa malaking text
Ang ibig sabihin ng Malaking text ay:
- 14 pt (mga 18.66 px) at bold, o
- 18 pt (mga px) o mas malaki
Maaari mong gamitin ang eyedropper sa Color Picker upang kumuha ng mga eksaktong kulay mula sa anumang bagay sa iyong screen.
Para sa mga link na umaasa sa kulay lamang upang mamukod-tangi, gamitin ang aming color contrast checker upang matiyak na nakakatugon ang mga ito sa mga pamantayan ng accessibility at manatiling madaling basahin para sa lahat.