Color Contrast Checker

    Subukan ang contrast ratio sa pagitan ng mga kulay ng foreground at background upang matiyak ang pagiging naa-access.

    1.00:1
    Contrast
    Fail
    Maralita

    Normal na Teksto

    AA (4.5:1)
    AAA (7:1)

    Malaking text

    AA (3:1)
    AAA (4.5:1)
    Black
    #000000
    Black
    #2596be

    Mabilis na Pag-aayos

    Aa

    I-preview ang Pamagat

    Ang mabilis na brown fox ay tumalon sa ibabaw ng tamad na aso

    Halimbawa ng maliit na text (12px)

    Text
    #000000
    Background
    #2596be

    Mga Pamantayan ng WCAG

    Level AA

    Minimum na contrast ratio na 4.5:1 para sa normal na text at 3:1 para sa malaking text. Kinakailangan para sa karamihan ng mga website.

    Level AAA

    Pinahusay na contrast ratio na 7:1 para sa normal na text at 4.5:1 para sa malaking text. Inirerekomenda para sa pinakamainam na accessibility.

    Hindi magandang contrast para sa lahat ng laki ng text.

    Color Contrast Checker

    Kalkulahin ang contrast ratio ng mga kulay ng teksto at background.

    Pumili ng kulay gamit ang color picker para sa text at kulay ng background o maglagay ng kulay sa RGB hexadecimal na format (hal., #259 o #2596BE). Maaari mong ayusin ang slider upang pumili ng kulay. Ang Web Content Accessibility Guidelines (WCAG) ay may partikular na alituntunin upang makatulong na malaman kung ang teksto ay nababasa para sa mga nakikitang user. Gumagamit ang pamantayang ito ng isang partikular na algorithm upang imapa ang mga kumbinasyon ng kulay sa mga maihahambing na ratio. Gamit ang formula na ito, isinasaad ng WCAG na ang isang 4.5:1 na color contrast ratio na may text at background nito ay sapat para sa regular (katawan) na text, at ang malaking text (18+ pt regular, o 14+ pt bold) ay dapat na may hindi bababa sa 3: 1 kulay na contrast ratio.

    Mga Pangunahing Tampok

    • Real-time na pagkalkula ng contrast ratio
    • Pagsusuri ng pagsunod sa WCAG AA at AAA
    • HSL slider para sa fine-tuning
    • Maramihang mga format ng preview

    Mga Advanced na Tool

    • Awtomatikong pag-aayos ng kulay
    • Mga sample ng teksto at background
    • Deteksyon ng pangalan ng kulay
    • I-export ang mga resulta