Värvikontrasti kontrollija (WCAG heledus)

Sisesta esiplaani ja tausta värv, et arvutada allpool tänapäeva WCAG suhteline heledus ja kontrastisuhe (AA/AAA). Eelvaate all paremal olevad värvinäidised näitavad, mida kaasaegne WCAG valem iga värvi puhul 'näeb'; vasakul olevad näidised näitavad, mida 1953. aasta ringhäälinguinseneri luma valem oleks samade värvide puhul näidanud — otsene vana ja uue võrdlus.

Näidisarvutus — Värvikontrasti kontrollija (WCAG heledus)

Kontrastisuhe	13.46 : 1
Tavaline	13.46:1 ✓
Protanoopia	13.52:1 ✓
Deuteranoopia	13.435:1 ✓
Tritanoopia	13.321:1 ✓

Need on väärtused, mida kalkulaator lehe avamisel näitab. Muuda ülal mõnda sisendit, et need ümber arvutada.

Interaktiivse simulatsiooni laadimine...

Miks roheline kaalub üles punase ja sinise — ning miks seadus kasutab endiselt 1953. aasta matemaatikat 🖖

Heleduse valemi kaalud (tänapäeval 0.2126, rohelise-rõhuga; 1953. aastal 0.299/0.587/0.114) ei ole meelevaldsed: need pärinevad CIE 1931 standardvaatlejast, mis näitas, et inimsilma koonusrakkude vastus ja nähtava heleduse tundlikkuskõver muudavad meid rohelise valguse suhtes palju tundlikumaks kui punase või sinise suhtes. NTSC vajas 1953. aastal täpselt sellist kaalutud summat, et uus värviülekanne annaks endiselt korrektse halltoonides pildi miljonitel elutubades juba olemasolevatel must-valgetel telerivastuvõtjatel — 'luma' leiutati tagasiühilduvuse abinõuna, mitte tajupõhise ideaalina. See ajalugu on tänapäeval oluline, sest eespool kontrollitud WCAG 2 kontrastisuhe on õiguslikult siduv (sellele viitavad ADA ja EN 301549), kuid nägemisteadlased peavad seda puudulikuks: on teada, et see hindab tumeda teksti kontrasti helel taustal üle ja heleda teksti kontrasti tumedal taustal alla — see on otseselt asjakohane, kuna just see sait kasutab vaikimisi tumedat teemat. WCAG 3 kavandatav asendaja APCA modelleerib seda asümmeetriat korrektselt; kuni see ei ole veel kasutusele võetud, jääb eespool toodud valem see, millele sa tegelikult vastama pead.

Mida kontrastisuhe tegelikult mõõdab 🖖

Arv, mille see tööriist annab, on suhteliste luminantside suhe: (L1 + 0.05) / (L2 + 0.05), kus L1 on heledam ja L2 tumedam värv. See ulatub 1:1-st (identsed, nähtamatud värvid) kuni 21:1-ni (puhas must puhtal valgel). Mõlemale liidetud 0.05 ei ole ümardamine, vaid modelleerib nõrka hajusvalgust, mida päris ekraanid ruumist peegeldavad — nii et isegi 'puhas must' pole kunagi tegelikult null. WCAG AA läbimiseks sihi põhitekstil 4.5:1 ja suurel tekstil 3:1.

Seadusesse külmutatud trükiviga 🖖

Valem lineariseerib iga sRGB-kanali tükiti kõveraga, mis läheb teatud lävendil lineaarselt algusosalt üle gamma-astendajale. WCAG 2 paneb selle ülemineku kohta 0.03928, kuid tegelik sRGB-standard määrab 0.04045. WCAG-i väärtus on trükiviga, mis kopeeriti varasest sRGB mustandist enne arvu parandamist, ning on sellest ajast kinnistunud rahvusvaheliselt viidatud ligipääsetavusseadusesse. Viga nihutab tulemusi vähem kui 10⁻⁴ võrra, seega pole keegi vaevunud sõnastust parandama.

Ülesanne täielikult lahendatud

Kontrastisuhe #e2e6f0 teksti ja #1a1d27 tausta vahel 5 sammu
Arvuta kontrastisuhe teksti #e2e6f0 ja tausta #1a1d27 vahel — selle lehe enda värvid. Kanalite keskmistamine annab tulemuseks 5,55. WCAG annab 13,46. Uuri välja, kust see kahe ja poole kordne tegur pärineb.
1. Definitsioon näib süutu: kahe heleduse suhe, kus mõlemat on nihutatud 0,05 võrra, et puhas must ei jagaks nulliga. Kaalud ei ole võrdsed ja see on esimene üllatus — rohelisele omistatakse kümme korda rohkem heledust kui sinisele.
  
  $C = \frac{L _{1} + 0.05}{L _{2} + 0.05}, L = 0.2126 R + 0.7152 G + 0.0722 B$
2. Teine üllatus on see, et kanaliväärtusi ei saa kasutada kujul, nagu need on. Bait pildifailis on gammakodeeritud: 128 ei tähenda poolt valgusest, vaid ligikaudu ühte viiendikku sellest. Tükiti esitatud avaldis tühistab selle kodeeringu ning see on samm, mille jätavad vahele kõik, kes kirjutavad oma kontrastikontrolli ise.
  
  $c_{lin} = ⎩ ⎨ ⎧ \frac{c /255}{12.92} (\frac{c /255 + 0.055}{1.055})^{2.4} c /255 \leq 0.03928 otherwise$
3. Arvuta mõlemad värvid sellest läbi. Hele värv annab tulemuseks 0,79, tume 0,0124 — füüsikalises valguses on erinevus 63-kordne, kuigi baitide erinevus on vaid ligikaudu 7-kordne.
  
  $#e2e6f0 \to L_{1} = 0.790537, #1a1d27 \to L_{2} = 0.012448$
4. Nihked 0,05 suruvad seejärel selle 63-kordse vahe kokku 13,46-ni, mis on paneelil kuvatav arv. See nihe ei ole kosmeetiline: see mudeldab valgust, mida ekraan peegeldab isegi musta kuvades, mistõttu ei saa tume teema valgustatud ruumis saavutada piiramatut kontrastsust.
  
  $C = \frac{0.840537}{0.062448} = 13.46$
5. Kaalud selgitavad disainerite kõige sagedasemat kaebust. Puhas roheline ja puhas sinine on mõlemad üksainus kanal täisvõimsusel, kuid roheline kannab 0,7152 heledusest ja sinine vaid 0,0722.
  
  $\frac{0.7152}{0.0722} = 9.9 ⟹ #00ff00 is 9.9 \times brighter than #0000ff$
Vastus

Tööriist väljastab tulemuseks 13,46 : 1, mis ületab veenvalt AA-taseme 4,5 ja AAA-taseme 7. Põhjus selle käsitsi läbi arvutamiseks on gammateisenduse samm: kui see vahele jätta ja kanalid hoopis keskmistada, saab see paar tulemuseks 5,55 — ikka veel läbitud, kuid valesti teguriga 2,4, ning lähedasema paari puhul on see viga erinevus läbimise ja läbikukkumise vahel. Kaalud moodustavad teise poole. Roheline on sama kanaliväärtuse juures 9,9 korda heledam kui sinine, mistõttu sinine tekst mustal taustal on palju halvem, kui see värvivalijas paistab, ja kollane valgel palju parem, kui disainerid ootavad. Proovi värve #0000ff ja #000000 ning vaata suhet.

$C = \frac{L _{1} + 0.05}{L _{2} + 0.05} = 13.46 : 1 (AA \geq 4.5, AAA \geq 7)$

Allikad (2)

The contrast formula and the 0.03928 threshold block 3 is about: W3C, Web Content Accessibility Guidelines (WCAG) 2.1, "relative luminance" and "contrast ratio" definitions.
The sRGB transfer function it should have matched: IEC 61966-2-1:1999, Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB, which puts the linear/gamma switch at 0.04045.

42Mathi meeskond · Uuendatud 2026-07-11

Kontrollitud avaldatud allikate põhjal. Parandused on teretulnud. Toimetamispõhimõtted · Parandused

Kõik Arvutustehnika õppetunnid →

Näiteülesanded

Selle saidi enda teema - Selle saidi enda tume teema: 13.46:1, läbib AAA
Must valgel (maksimum) - Must valgel: 21:1, teoreetiline maksimaalne suhe
Kuulus AA-hall - #767676 valgel: 4.54:1, tuntud 'napilt läbib AA' hall toon
Ainult suur tekst - 3.96:1 — läbib suure teksti AA (≥3), kuid ei läbi tavalise teksti AA (≥4.5)
Punane sinisel (vana teler) - Punane sinisel: 2.15:1, ei läbi AA-d üldse, hoolimata erksast välimusest