De mono-kicker op de homepage haalt WCAG AA

[Apolloccrypt]

Eén regel in de kritieke CSS van frontend/index.html. --hp-ink-3 van #66727F naar #5F6B78.

Waarom

De homepage draagt sinds #382 een eigen palet in zijn kritieke CSS. --hp-ink-3 is daarin de kleur van alles wat klein en mono is: de kicker boven elke sectie, de regel onder de hero, de naam van de oprichter, het bonnetje, de stapnummers, de prijs-voetregel en de ontwikkelaarsregel. Tien plekken op de pagina.

Op het lichte papier (#FAF8F3) haalt die kleur 4.62:1 en dat is genoeg. Op het tweede papier (#F3F0E8) haalt hij 4.31:1, en daar staat de kicker van de sectie "Do not take our word for it". WCAG AA vraagt 4.5 voor tekst van deze maat. Net eronder, niet te zien met het blote oog, en wel het verschil tussen voldoen en niet voldoen.

Gevonden bij het opnieuw meten van de site voor #380, niet met het oog.

De meting

Elke kleur afgevlakt tegen de eerste ondoorzichtige achtergrond erboven, WCAG 2.1 relatieve luminantie, op 390 en 1440. Alle tien de plekken, voor en na:

plek	maat	tegen	was	wordt
p.hp-kicker	12px	#F3F0E8	4.31	4.78
p.hero-note	13px	#FAF8F3	4.62	5.12
span.hp-mono (oprichter)	11px	#FAF8F3	4.62	5.12
p.hp-kicker	12px	#FAF8F3	4.62	5.12
span.step-n	12px	#FAF8F3	4.62	5.12
p.pq-core	13px	#FAF8F3	4.62	5.12
p.home-dev	14px	#FAF8F3	4.62	5.12
p.price-sub	14px	#FFFFFF	4.91	5.44
p.price-foot	11px	#FFFFFF	4.91	5.44
span (Receipt)	10px	#FFFFFF	4.91	5.44

Tien gemeten, tien keer omhoog, geen enkele op een donker vlak, dus nergens levert de wissel contrast in. Dat was de eerste vraag bij een token dat donkerder wordt.

Wat er van de pagina overblijft

	main	met deze PR	plus #380
/ uniek onder AA	4	3	0

De drie die hier blijven staan (BUSL-1.1, Paramantis Solutions B.V., privacy@paramant.app, alle drie op 3.95:1) zitten op --ink-dim in design-system.css en zijn niet van deze pagina. Die zijn de winst van #380.

Met #380 erbij gemeten, de vijf pagina's die een koper als eerste ziet:

/            0 unieke paren onder AA
/pricing     0
/parasign    0
/dashboard   0
/security    1

Die ene op /security is het lime vinkje voor elke regel in de lijst "wat een relay niet kan", 1.16:1. Het is bullet en geen inhoud, de zin ernaast draagt de betekenis volledig, en lime vervangen is een merkbesluit en geen herstel. Hij staat met naam en reden op KNOWN_LIGHT in tests/theme-contrast.test.mjs.

Geen andere regel geraakt

git diff origin/main..HEAD --stat
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

Een kleur verschuift geen enkele rand. tests/first-screen.test.mjs pint negen claims op hun bodemrand op 390x844 en staat 9/9. De pixeldiff van de hele pagina tegen main raakt 269 van de 9408 regels op 390 en 182 van de 6301 op 1440, en dat zijn de tien tekstplekken hierboven en niets anders.

Poorten

first-screen               9/9      seo-contract              14/14
site-claims              36/36      ui-truthfulness             1/1
frontend-loading-contract  7/7      app-contrast                2/2
links                2 + 2 skip     navigation-shell     26 checks
static-sanity  PASS (alle harde checks)   check-cache-bust  363 links OK
check-csp-inline           OK       apply_seo_head --check  0 pages
eslint                  schoon