1:1 to 21:1 · AA · AAA
Contrast checker
Ang itim sa puti ay may WCAG contrast ratio na 21:1, ang pinakamataas na posible, at ang puti sa #0060fd ay may 5.13:1. Maglagay ng kulay ng text at background para suriin ang sa iyo.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Nag-a-update ang ratio at ang limang check habang nagta-type ka. Pinuputol sa dalawang decimal ang ratio at hindi kailanman itinataas, kaya ang 4.499 ay lumalabas na 4.49:1 at hindi pumapasa sa 4.5:1 na check.
Scanned by 
NortonTM Safe Web
Sa isang tingin
- Presyo
- Walang singil
- Account
- Hindi kailangan
- Upload
- Hindi naaangkop — nagta-type ka ng mga kulay, walang ipinapadala saanman
- Formula
- (mas maliwanag na luminance + 0.05) ÷ (mas madilim na luminance + 0.05)
- Mga threshold
- AA 4.5:1 normal at 3:1 malaking text; AAA 7:1 normal at 4.5:1 malaking text; 3:1 para sa bahagi ng interface
- Pamantayan
- Mga kahulugan ng WCAG 2.2 ng relative luminance at contrast ratio
Contrast ratio ng kilalang mga pares
Ginawa ng parehong code ng checker ang mga hilerang ito. Ang check mark ay nangangahulugang natutugunan ng pares ang kinakailangan; ang krus ay nangangahulugang hindi.
| Kulay ng text | Background | Ratio | AA normal | AA malaki | AAA normal | AAA malaki | Bahagi ng interface |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Check | Pinakamababang ratio |
|---|---|
| AA, normal na text | 4.5:1 |
| AA, malaking text | 3:1 |
| AAA, normal na text | 7:1 |
| AAA, malaking text | 4.5:1 |
| AA, bahagi ng interface at graphics | 3:1 |
Paano suriin ang pares ng kulay
Ilagay ang dalawang kulay
I-type ang kulay ng text at kulay ng background sa anumang CSS notation, o gamitin ang mga picker. Pinagpapalit ng swap button ang dalawa, na kapaki-pakinabang para sa maliwanag na text sa madilim na background.
Basahin ang ratio
Ang ratio ay mula 1:1 (magkaparehong kulay) hanggang 21:1 (itim sa puti). Ipinapakita ng sample sa ilalim ng mga field ang pares sa 16 px at sa 24 px, para mahusgahan mo ang resulta gamit ang sarili mong mata.
Tingnan ang limang check
Sinasabi ng bawat tile kung Pasado o Bagsak para sa isang kinakailangan ng WCAG: AA at AAA para sa normal na text, AA at AAA para sa malaking text, at AA para sa bahagi ng interface. Kung bumagsak ang normal na text sa AA, magmumungkahi ang pahina ng pinakamalapit na kulay ng text na pumapasa.
Paano kinokompute ang contrast ratio
Sinusukat ng WCAG ang contrast sa pamamagitan ng relative luminance, ang liwanag ng kulay mula 0 (itim) hanggang 1 (puti). Hinahati sa 255 ang bawat channel ng pula, berde at asul; ang value na hanggang 0.04045 ay hinahati sa 12.92, at ang mas malaking value ay itinataas sa power: (value + 0.055) na hinati sa 1.055, pagkatapos ay itinaas sa power na 2.4. Ang luminance ay 0.2126 beses ang pula plus 0.7152 beses ang berde plus 0.0722 beses ang asul, na sumasalamin kung gaano katindi tumutugon ang mata sa bawat isa. Ang contrast ratio ay ang mas maliwanag na luminance plus 0.05, hinati sa mas madilim na luminance plus 0.05.
Humihingi ang WCAG 2 ng hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text sa level AA, at 7:1 at 4.5:1 sa level AAA. Ang malaking text ay hindi bababa sa 18 point, na 24 CSS pixel, o hindi bababa sa 14 point na bold, mga 18.66 pixel. Humihingi ang success criterion 1.4.11 ng 3:1 para sa mga bahagi ng interface at graphics na kailangang makita ng mambabasa, tulad ng border ng field o linya ng chart. Ikinukumpara ang ratio sa bawat threshold nang walang rounding. Kung may transparency ang kulay, inilalatag ang transparent na background sa ibabaw ng puti at ang transparent na kulay ng text sa ibabaw ng background bago sukatin. WCAG 2.x lang ang ipinatutupad ng pahinang ito; hindi nito kinokompute ang APCA, na tinatalakay para sa susunod na bersyon ng mga alituntunin.
Mga tanong tungkol sa contrast
Anong contrast ratio ang hinihingi ng WCAG para sa text?
Sa level AA, ang normal na text ay nangangailangan ng hindi bababa sa 4.5:1 at ang malaking text ng hindi bababa sa 3:1. Sa level AAA, ang mga bilang ay 7:1 para sa normal na text at 4.5:1 para sa malaking text. Sinusukat ang ratio sa pagitan ng kulay ng text at ng kulay mismo sa likod nito.
Ano ang itinuturing na malaking text?
Tinutukoy ng WCAG ang malaking text bilang hindi bababa sa 18 point, na 24 CSS pixel, o hindi bababa sa 14 point na bold, na mga 18.66 CSS pixel. Anumang mas maliit ay itinuturing na normal na text at nangangailangan ng mas mataas na ratio.
Ano ang pinakamaliwanag na gray na pumapasa sa AA sa puti?
Ang #767676 sa puti ay may ratio na 4.54:1 at pumapasa sa 4.5:1 na check para sa normal na text. Ang susunod na mas maliwanag na gray, #777777, ay may 4.47:1 at bumabagsak. Para sa 7:1 (AAA), ang pinakamaliwanag na gray ay #595959, na may 7.00:1.
Bakit bumabagsak ang 4.49 kahit mukhang 4.5?
Ikinukumpara ng mga check ang eksaktong ratio sa threshold. Ang ratio na 4.499 ay mas mababa sa 4.5, kaya bumabagsak ito, at piniprint ito ng pahina bilang 4.49:1 sa halip na itaas. Totoong halimbawa ang purong pula sa puti: ang 3.99:1 ay bumabagsak sa 4.5:1 na check para sa normal na text, kahit malapit ito.
Anong contrast ang kailangan ng mga icon, border at form field?
Ang success criterion 1.4.11 Non-text Contrast, idinagdag sa WCAG 2.1, ay humihingi ng hindi bababa sa 3:1 sa pagitan ng mga bahagi ng interface o graphic na kailangang makita ng mambabasa, tulad ng border ng field, focus ring o linya ng chart, at ng mga katabing kulay. Hindi sakop ang mga disabled na kontrol at puro dekoratibong graphics.
Ginagawa bang accessible ng pumapasang ratio ang isang pahina?
Hindi. Isa lang ang contrast sa maraming kinakailangan. Mahalaga rin ang laki at bigat ng font, line spacing, kulay lang ang nagdadala ng kahulugan, visibility ng focus, text sa ibabaw ng mga larawan at gradient, at kung paano nakikita ng mga taong may iba't ibang uri ng paningin sa kulay ang isang pahina. Gamitin ang resultang ito bilang isang input, at subukan ang pahina gamit ang totoong nilalaman.