Aksesibilidad
Ang mga pamantayang pinagbatayan ng site, sinukat laban sa WCAG 2.2 na may AA bilang target. Ang sumusunod ay kung ano talaga ang ginagawa ng code, kasama kung saan napilitan ang brand green sa isang tapat na kompromiso.
Ang mga pamantayan
-
Skip link at mga landmark
2.4.1 Bypass Blocks · AAng isang bisitang gumagamit ng keyboard ay unang napupunta sa isang Skip to content na link na tumatalon lampas sa chrome patungo sa main region. Ang pahina ay binuo mula sa tunay na mga landmark: isang main, mga naka-label na navigation element, at isang footer.
-
Nakikitang focus
2.4.7 Focus Visible · AAAng bawat control ay nagpo-focus sa isang two-pixel na green ring na nakalagay ng dalawang pixel mula sa gilid, ipinapakita para sa keyboard focus at hindi para sa pag-click ng mouse.
-
Laki ng target
2.5.8 AA · 2.5.5 AAAAng mga pangunahing touch control (ang tab dock, sheet row, ang call-to-action pill) ay 44 hanggang 48 pixel; ang pinakamaliit na pointer control ay lumalampas pa rin sa 24. Kaya bawat control ay umaabot sa AA minimum, at ang mga touch control ay umaabot sa mas mahigpit na AAA na laki.
-
Reduced motion
2.3.3 · AAAKapag humingi ng mas kaunting galaw ang sistema ng bisita, ibinababa ng site ang bawat animation at transition sa halos zero, at ginagawang payak na paglundag ang smooth scrolling.
-
Pagkakapantay ng theme, walang flash
Parehong first-class ang light at dark: bawat surface ay dinisenyo sa pareho, at ang theme ay nareresolba bago ang unang paint kaya ang isang dark-mode na bisita ay hindi kailanman makakakuha ng puting flash.
-
Hindi kulay ang tanging senyas
1.4.1 Use of Colour · AAng mga link sa prosa ng artikulo ay may salungguhit, kaya ang kahulugan ng mga ito ay hindi kailanman nakasalalay sa green lamang.
Ang nababasang green
Ang brand green ay isang maliwanag na lime, at ang maliwanag na lime ay hindi nababasa bilang teksto sa puti: 2.2:1 ang sukat ng --color-green doon. Dalawang desisyon ang sumusunod. Ang tekstong kailangang nakapatong sa berde ay gumagamit ng --color-on-green, isang halos itim na tinta sa 8.8:1, kaya walang button o skip link na nagpipinta ng puti sa lime. At ang berdeng ginagamit bilang teksto ay gumagamit ng --color-green-text, isang mas malalim na berde na lumalampas sa 4.5:1 na pamantayan para sa normal na teksto sa lahat ng maliwanag na pundong dinadapuan nito: 5.6:1 sa puti, 5.2:1 sa mga tinted na banda at 4.9:1 sa laman ng badge. Pinapanatili ng dark mode ang brand lime, na nababasa sa 8.6:1 sa pahina.
| Token | Sa puti | Sa halos itim |
|---|---|---|
| --color-green | 2.2:1 | 8.6:1 |
| --color-green-text | 5.6:1 | 8.6:1 |
| --color-on-green | 8.8:1 | 6.2:1 |
Pumapasa sa AA Malaking teksto at UI lamang Bumabagsak sa pamantayan
Hanggang Agosto 2026, isa itong trade-off. Ang --color-green-text ay mas maputlang berde na lumalampas lamang sa 3:1 na pamantayan para sa malaking teksto at interface, at sa puti lamang; sa mga tinted na banda ay bumababa ito sa 2.9:1, at doon mismo nakalagay ang author card, ang mga label na nakaraan at susunod, at ang privacy link ng subscribe form. Ang isang token na ginagamit sa mga isandaang lugar ay hindi napoprotektahan ng isang pangungusap na naglalarawan kung saan ito nababagay, kaya ang halaga ang inilipat sa halip na ang dokumentasyon, at ngayon ay lumalampas na ang bawat gamit sa pamantayan para sa normal na teksto sa parehong tema. Nananatiling may salungguhit ang mga link sa artikulo, kaya hindi kailanman ang kulay lamang ang senyas, at nananatiling neutral ang body copy.
Saklaw
Sinasaklaw nito ang website. Ang React Native app at ang mga email template ay sarili nilang mga surface, na may sarili nilang mga pamantayan, at hindi dokumentado rito.