Clew

HomeMga toolColor contrast checker

Color contrast checker para WCAG 2.2 at APCA

Ilagay ang kulay ng text at background sa HEX, RGB o HSL. Makukuha ang WCAG 2.2 contrast ratio at resulta para AA, AAA, large text at mga UI component, ang APCA lightness contrast mula sa draft ng WCAG 3, live preview ng text, button at tooltip, at ang pinakamalapit na kulay na pumapasa kung hindi pumasa ang iyong kulay.

● Libre, walang sign-upNa-update:

HEX (#777, #767676), rgb(118 118 118), hsl(0 0% 46%) o oklch(56% 0 0). Ang transparent na text ay hinahalo sa background.
Baguhin ang

Pinakamalapit na kulay na pumapasa

—

 

WCAG ratio— 
APCA Lc— 
Luminance— 

Malaking heading, 24px

Body text na 16px. Basahin ito sa phone sa labas, nakaunat ang braso — kung nahihirapan kayo, nahihirapan din ang inyong mga user.

Primary buttonSecondaryText link
Border ng input
Tooltip: i-click ang “Bagong project” para magsimula.

Maliit na text, 13px: ang caption at hint ang kadalasang hindi pumapasa sa contrast.

Mga resulta

    Formula. Ratio = (Lmas maliwanag + 0.05) / (Lmas madilim + 0.05), kung saan L = 0.2126·R + 0.7152·G + 0.0722·B ng linearized sRGB. Hindi kailanman ni-round up: ang 4.48:1 ay hindi pumapasa sa 4.5:1.

    Kinakalkula ang lahat sa inyong browser — hindi ipinapadala kahit saan ang inyong inilagay.

    Paano gamitin

    1. Maglagay ng dalawang kulayI-type o i-paste ang kulay ng text at background sa anumang CSS format, o pumili gamit ang color picker. Palitin ang mga ito para suriin ang light text sa dark background.
    2. Basahin ang mga resultaAng contrast ratio ay sinusuri laban sa bawat threshold ng WCAG 2.2: normal at large text sa AA at AAA, at 3:1 para mga UI component. Ang APCA Lc ay nasa tabi bilang second opinion.
    3. Tingnan ang previewText, button, link, border ng input at tooltip ay iginuhit gamit ang iyong mga kulay — ang mga kombinasyong kadalasang hindi pumapasa sa totoong interface.
    4. Kunin ang pinakamalapit na kulayPiliin ang target at kung text o background ang babaguhin. Pinapanatili ng tool ang hue at inililipat ang lightness hanggang pumasa ang pares; pagkatapos, ilapat o kopyahin ang HEX.

    Paano kinakalkula ang WCAG contrast ratio

    Ang WCAG 2.x ay nagkukumpara ng relative luminance ng dalawang kulay — gaano maliwanag ang bawat isa sa mata, mula 0 (itim) hanggang 1 (puti). Ang bawat sRGB channel ay unang kino-convert mula 0–255 tungo sa linear light, at ang mga channel ay may bigat ayon sa sensitivity ng mata: ang green ay pinakamalaki, ang blue ay pinakamaliit.

    c = channel / 255 c_lin = c / 12.92 kung c ≤ 0.04045 c_lin = ((c + 0.055) / 1.055) ^ 2.4 kung hindi L = 0.2126 · R_lin + 0.7152 · G_lin + 0.0722 · B_lin contrast ratio = (L_mas_maliwanag + 0.05) / (L_mas_madilim + 0.05)

    Ang resulta ay mula 1:1 (parehong kulay) hanggang 21:1 (itim sa puti). Ang 0.05 ay kumakatawan sa ambient light na tumatalbog sa screen, kaya ang mga napakadilim na pares ay hindi kailanman umaabot sa infinite ratio.

    Halimbawa. Gray #777777 sa puti: 119 / 255 = 0.4667, na linearized ay 0.1845, kaya L = 0.1845. Ang puti ay L = 1. Ratio = 1.05 / 0.2345 = 4.48:1. Hindi pumapasa sa AA para normal na text, dahil ang 4.48 ay mas mababa sa 4.5 at hindi pinapayagan ng WCAG ang rounding. Ang pinakamaliwanag na gray na pumapasa sa puti ay #767676, na 4.54:1.

    Mga threshold ng WCAG 2.2

    • 1.4.3 Contrast (Minimum), level AA: 4.5:1 para normal na text, 3:1 para large text.
    • 1.4.6 Contrast (Enhanced), level AAA: 7:1 para normal na text, 4.5:1 para large text.
    • 1.4.11 Non-text Contrast, level AA: 3:1 para mga visual na bahaging kailangan upang makilala ang UI component at ang state nito — border ng input, focus ring, outline ng checkbox, icon na may kahulugan, linya ng chart.

    Ang large text ay hindi bababa sa 18 point (24 CSS pixel) sa regular weight, o 14 point (mga 18.66px) bold. Ang logo, purong dekorasyong text at disabled na control ay exempt. Hindi nagbago ang mga threshold mula WCAG 2.0, 2.1 hanggang 2.2.

    APCA: ang contrast method na iminumungkahi para WCAG 3

    Simple ang formula ng WCAG 2, pero may mga kilalang kahinaan. Itinuturing nito na pantay na nababasa ang pares anuman ang kulay ng text, labis na tinataya nito ang contrast ng mga madilim na kombinasyon, at hindi isinasaalang-alang ang laki at weight ng font. Ang Accessible Perceptual Contrast Algorithm (APCA), na binuo ni Andrew Somers para sa W3C working group, ay mas malapit na modelo ng perception ng lightness at nagbibigay ng lightness contrast value, Lc, mula mga −108 hanggang +106.

    Y = 0.2126729 · (R/255)^2.4 + 0.7151522 · (G/255)^2.4 + 0.0721750 · (B/255)^2.4 dark text sa light: Lc = ((Y_bg^0.56 − Y_text^0.57) · 1.14 − 0.027) · 100 light text sa dark: Lc = ((Y_bg^0.65 − Y_text^0.62) · 1.14 + 0.027) · 100 (ang Y na mas mababa sa 0.022 ay soft-clamped; ang |resulta| na mas mababa sa 0.1 ay zero)

    Ipinapakita ng sign ang polarity: positibo para dark text sa light background, negatibo para light text sa dark. Ang parehong gray #888 ay Lc 63.1 bilang text sa puti, pero Lc −68.5 bilang puting label sa #888 — ayon sa APCA, mas nababasa ang puting label. Hindi ito kayang ipakita ng WCAG 2 dahil pareho ay 3.54:1.

    Gabay sa mga Lc level sa simplified “Bronze” mode: 90 inirerekomenda para body text, 75 minimum para body text, 60 para iba pang content text, 45 para malalaking heading, 30 para placeholder at non-text element, 15 para divider only.

    Mahalaga: ang APCA ay bahagi ng working draft ng WCAG 3, na hindi pa final na standard, at maaaring magbago ang mga threshold. Ang legal at procurement requirement ngayon ay tumutukoy sa WCAG 2.x. Gamitin ang WCAG 2.2 ratio para magpasya pass o fail, at ang APCA para pumili sa pagitan ng dalawang pumapasang opsyon o para mahuli ang mga dark-mode na pares na pinalulusot ng WCAG 2.

    Paano ayusin ang low contrast nang hindi nawawala ang brand color

    Kadalasan, lightness ang binabago, hindi ang hue. Ang mga mungkahi sa itaas ay gumagana sa OKLCH color space: pinapanatili ang hue at chroma, inililipat ang perceptual lightness step by step, ibinabalik sa sRGB gamut, at sinusuri na ang rounded HEX ay pumapasa pa. Ang opsyong pinakamalapit sa orihinal na lightness ay minarkahang pinakamalapit.

    • Gamitin ang brand color para malalaking area at button, at mas madilim na shade ng parehong hue para text at link. Ang brand red na 3.9:1 sa puti ay maaari pa bilang background ng button na may bold na puting text kung umaabot ang pares sa large text threshold — pero suriin.
    • Suriin ang bawat state: hover, focus, disabled, visited, error. Ang placeholder at hint text ang pinakakaraniwang hindi pumapasa sa mga form.
    • Suriin ang parehong theme. Ang palette na pumapasa sa light mode ay kadalasang hindi pumapasa sa dark mode, kung saan lalong useful ang APCA.
    • Text sa ibabaw ng image at gradient ay dapat pumasa sa pinakamaliwanag na bahagi. Maglagay ng solid o semi-transparent na backdrop sa likod ng text sa halip ng shadow.
    • Mga tooltip at onboarding hint ay kadalasang light brand tint na may gray na text. Mabilis at nang nakatutok sa ibang gawain ang pagbasa ng mga ito, kaya target ang 4.5:1 o higit pa, maski sa maikling copy.

    Para bumuo ng buong scale ng tint at shade na may kilalang contrast sa bawat step, gamitin ang accessible palette generator.

    Mga sanggunian

    1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — success criteria 1.4.3, 1.4.6, 1.4.11; mga depinisyon ng relative luminance at contrast ratio.
    2. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — dahilan ng 4.5:1 at 3:1, depinisyon ng large text.
    3. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g, Myndex Research — mga constant at reference value na ginamit ng tool.
    4. W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — status ng visual contrast method.
    5. Ottosson B. A perceptual color space for image processing, 2020 — OKLab, ginamit para sa pagbabago ng lightness.

    Mga madalas na tanong

    Anong contrast ratio ang kailangan ng WCAG?

    Para level AA, ang WCAG 2.2 ay nangangailangan ng hindi bababa sa 4.5:1 sa pagitan ng normal na text at background, 3:1 para large text (24px, o mga 18.66px bold), at 3:1 para UI components at meaningful graphics. Ang level AAA ay itinataas ang text requirement sa 7:1 at 4.5:1.

    Ang 4.48:1 ba ay sapat para 4.5:1?

    Hindi. Eksakto ang mga threshold ng WCAG at hindi dapat i-round up ang ratio. Ang #777777 sa puti ay 4.48:1 at hindi pumapasa sa AA para normal na text; ang #767676 ay 4.54:1 at pumapasa.

    Ano ang APCA at dapat ba itong gamitin sa halip ng WCAG 2?

    Ang APCA ay ang perceptual contrast method sa working draft ng WCAG 3. Isinasaalang-alang nito ang polarity ng text at nagbibigay ng Lc value na ang requirement ay depende sa laki at weight ng font. Hindi pa standard, kaya ang compliance ay sinusukat pa gamit ang WCAG 2.2 ratio; ang APCA ay useful na second check, lalo na para dark theme.

    Mahalaga ba ang contrast para icon, border at focus indicator?

    Oo. Ang success criterion 1.4.11 ay nangangailangan ng 3:1 laban sa kalapit na kulay para mga bahagi ng component na kailangan upang makilala ito o ang state nito — border ng input, outline ng checkbox, meaningful na icon at focus ring. Exempt ang purong dekorasyon at disabled na control.

    Paano kinakalkula ang contrast ng semi-transparent na text?

    Ang kulay ng text ay unang hinahalo sa background ayon sa alpha, at ang resultang solid na kulay ay ikinukumpara. Awtomatikong ginagawa ito ng checker na ito, at ipinapakita ang hinalong HEX sa resulta.

    Kailangan bang pumasa sa contrast ang disabled button at placeholder?

    Exempt ang disabled na component sa WCAG 2.2. Ang placeholder ay hindi: kung nagbibigay ng impormasyon, kailangan ng 4.5:1. Maraming form ang hindi pumapasa dito, kaya mas ligtas na ilagay ang hint sa visible na label o helper text.

    Paano makahanap ng kulay na pumapasa nang hindi binabago ang brand?

    Panatilihin ang hue at baguhin ang lightness only. Ang mga mungkahi sa tool na ito ay ginagawa ito sa OKLCH color space at ipinapakita ang pinakamalapit na mas madilim at mas maliwanag na opsyon para text o background, kasama ang resultang ratio.

    Higit pa sa Product design

    Kaugnay na babasahin

    Accessible palette generatorType scale generatorTooltip copy checkerLahat ng tool

    Mga tour, tooltip at checklist na makikita ang epekto sa mga numero.

    Subukan ang Clew nang librePaano ito gumaganaFree plan habambuhay · walang credit card

    Product tours, popups at onboarding sa panahon ng AI

    7 pattern na may bilang ng hakbang, tuntunin sa copy at dapat sukatin, ang binabago ng AI, at checklist bago mag-publish. PDF, 2 pahina. Ano ang laman →

    Nasa English ang gabay.