Sötét és világos téma: miért nem lesz 100 pontos a PageSpeed?

Benkó János · 2026. augusztus 23.

A saját oldalunk teljesítményben, Best Practices-ben és SEO-ban is 100 pontot ért el — mobilon és asztali nézetben egyaránt. Az akadálymentesség viszont 96 maradt. Utánamentünk, és kiderült, hogy egyetlen audit bukott: a kontraszt. Az ok pedig nem az volt, hogy „elrontottuk a színeket", hanem valami sokkal tanulságosabb.

Ez a bejegyzés a saját házunk táján végzett munkáról szól. Sebességet és konverziót optimalizálunk másoknak — nehéz lenne komolyan venni minket, ha a saját oldalunk nem állná ki ugyanazt a próbát. Úgyhogy nekiálltunk, végigmértük, és a végén nem csak egy pontszámot kaptunk, hanem egy szabályt is, amit azóta minden projektben használunk.

Amit a PageSpeed valójában mér az „Akadálymentesség" alatt

A PageSpeed Insights akadálymentességi pontszáma mögött a Lighthouse fut, abban pedig a axe-core nevű szabályrendszer. Nem szubjektív értékelés: konkrét, gépi ellenőrzések futnak le, és a color-contrast a leggyakrabban bukó közülük. Ez a szabály minden szövegelemre kiszámolja az előtér és a háttér közötti kontrasztarányt, és a WCAG AA küszöbéhez méri:

• 4,5:1 a normál szövegre
• 3:1 a nagy szövegre — ami legalább 24 px, vagy legalább 18,7 px félkövér

Ez a küszöb nem ízlés kérdése. Ha egy elem 4,49-et ér el, bukik. A miénk pontosan ilyen volt — de erről mindjárt.

Az első felismerés: a PageSpeed sosem látja a sötét témádat

Az oldalunk sötét és világos témát is támogat, és alapból a látogató rendszerbeállítását követi. Ez az a részlet, ami mindent megmagyarázott.

A Lighthouse fejnélküli (headless) Chrome-ban fut, ott pedig a prefers-color-scheme alapértéke light. Ha az oldalad — mint a miénk — a rendszerbeállítást követi, akkor a PageSpeed mindig a világos témát auditálja. A sötétet soha.

Nálunk pontosan ez történt: a sötét téma egyetlen auditot sem bukott, a világos viszont nyolcat. És ez nem véletlen.

A gyökérok: ugyanaz a hex, két nagyságrenddel más eredmény

A kontrasztarány a két szín relatív fénysűrűségének a hányadosa. Egy telített márkaszín fénysűrűsége eleve viszonylag magas — jóval közelebb van a fehérhez, mint a feketéhez. Vegyük a saját brand narancsunkat:

#E85D04 fénysűrűsége:            0,25

  sötét alapon (#0a0e14, 0,006):  7,4:1   ✓ bőven AA
  fehér alapon (#ffffff, 1,0):    3,3:1   ✗ bukik

Ugyanaz a hex. Ugyanaz a márka. Az egyik esetben kényelmesen átmegy, a másikban meg sem közelíti. Ezért van az, hogy amikor a sötét témát hangolod szépre, a világos elmegy — és fordítva. A két téma nem egymás inverze, és nem is lehet őket egy közös kompromisszummal megoldani.

A szabály, amire jutottunk: mindkét témát a saját legrosszabb felületéhez kell megoldani. Sötétben ez a legvilágosabb sötét felület (nálunk a kártyák háttere), világosban a legsötétebb világos felület (nálunk a szekciók váltakozó sávja). Ha egy szín ott átmegy, mindenhol átmegy.

Mit találtunk konkrétan

Nyolc elem bukott, és mind a világos témában. A minta beszédes:

elem            előtér    háttér    arány   kell
────────────────────────────────────────────────
.st.warn        #b97a00   #ffffff    3,59    4,5
.f-note         #8c93a0   #ffffff    3,08    4,5
.art-meta       #717b8b   #f4f6f9    3,95    4,5
.st.pass        #0e8a5f   #ffffff    4,35    4,5
.filter         #c2410c   #f3e8e3    4,30    4,5
.kicker         #c2410c   #eceff5    4,49    4,5

Az utolsó sor a kedvencünk. Egy századon múlt — és pontosan ez mutatja, miért nem lehet ezt szemre csinálni. Semmilyen emberi szem nem látja a 4,49 és a 4,50 közötti különbséget, a gép viszont könyörtelen.

A csapda, amiről kevés szó esik: az opacity

Nézd meg még egyszer a második és harmadik sort. A #8c93a0 és a #717b8b sehol nem szerepelt a palettánkban. Nem is írtuk le őket soha.

Ezek úgy keletkeztek, hogy a másodlagos szövegszínt opacity: .7 és opacity: .85 értékkel halványítottuk. Ez roppant kényelmes megoldás: egy tokenből lesz háromféle „erősség". A baj vele az, hogy az opacity a szöveget összekeveri a mögötte lévő háttérrel — így a végeredmény minden felületen és minden témában más lesz. Egy 5,1:1 arányú szövegszínből 70%-os átlátszósággal 3,08 lesz fehér háttéren. Egy AA-t bőven teljesítő színből lett bukó elem, egyetlen tulajdonsággal.

És van egy testvére is ennek a hibának: a fixen beégetett szín a színes kitöltésen. Nálunk egy diagram sávjain color: #fff ült a zöld és piros kitöltésen. Világos témában ez még elment, sötétben viszont a fehér a világos mentazöldön 1,87:1-et adott. Gyakorlatilag olvashatatlan — és a gépi audit ezt észre sem vette, mert az az oldal épp rejtve volt. Ilyet csak akkor találsz meg, ha végigméred a palettát, nem csak azt, amit a Lighthouse mutat.

A megoldás: minden szemantikus szín három tokent kap

A javítás nem az volt, hogy „sötétítsünk a színeken", hanem hogy szétválasztottuk a szerepeket. Egy telített márkaszín ugyanis vagy kitöltés, vagy szövegszín — világos témában ritkán mindkettő. Ezért:

--acc        a KITÖLTÉS       (gomb, sáv, keret)  → marad a brand #E85D04
--acc-ink    a SZÖVEG         felületen           → mélyebb, mért változat
--on-acc     a szöveg AMI A KITÖLTÉSEN ül         → külön token

Ugyanez a hármas minden szemantikus színre: zöld, sárga, piros, kék. Ezzel a márkaszínek megmaradtak ott, ahol számítanak — a gombokon és a kiemeléseken —, a szövegek pedig olvashatóak lettek. A brand kék (#1B5FAF) egyébként változtatás nélkül átment, mert eleve elég sötét volt; a narancsnak kellett a külön szöveg-változat.

Egy kivétel maradt: a nagy címsorokban a narancs kiemelés. Ott a WCAG 3:1-es küszöbe érvényes, tehát élénkebb narancs is megállja a helyét. Erre külön token került, azzal a megkötéssel, hogy csak 24 px felett szabad használni.

„És ha egyszerűen fehér lenne a gombszöveg?"

Ez volt az első ötlet, és tanulságos, hogy miért nem működik. A gombjaink szövege 11–14 px félkövér — egyik sem éri el a „nagy szöveg" 18,7 px-es határát, tehát mindegyikre a 4,5-ös küszöb vonatkozik.

kitöltés   fehér szöveg   sötét szöveg
─────────────────────────────────────
#e85d04       3,50 ✗         5,08 ✓
#ff7a2f       2,60 ✗         6,84 ✓
#cc5207       4,40 ✗         4,05 ✗   ← a metszéspont: MINDKETTŐ bukik
#a94204       6,06 ✓         2,94 ✗

A narancs átmenet nélkül vált a fehér és a sötét szöveg között, és a kettő között van egy sáv, ahol egyik sem jó. A legvilágosabb narancs, amin a fehér eléri a 4,5-öt, már egy sötét rozsdaszín — vagyis a fehér gombszöveg ára az lenne, hogy a CTA elveszíti a brand narancsot. Maradt a sötét szöveg.

Az eredmény

oldal                    előtte   utána
────────────────────────────────────────
/ugyfelkozpont              92      100
/konzultacio                93      100
/blog                       94      100
/ (főoldal)                 96      100
/hirlevel                   96      100
/webaktivator-start         96      100
/blog/{cikk}                96      100
/szolgaltatoi-arlista      100      100

A teljesítményhez egyetlen ujjal sem nyúltunk — az már 100 volt. Két nem-színhiba is előkerült mellékesen: a bloglistán a kártyacímek h3-ak voltak h2 nélkül (megszakadt címsor-sorrend), a morzsamenü linkjei pedig csak színnel különböztek a környező szövegtől. Mindkettő egysoros javítás volt.

Amit te is megcsinálhatsz — 6 pont

1. Futtasd le magadnak. Nem kell hozzá se fiók, se kvóta: npx lighthouse@12 https://az-oldalad.hu --chrome-flags="--headless=new" --view
2. Nézd meg, melyik témát méri. Ha van téma-váltód, szinte biztosan a világosat. A sötétet külön kell auditálnod.
3. Keresd meg az opacity-t a szövegeken. Ha a másodlagos szövegszíneidet átlátszósággal halványítod, ott hibák vannak. Cseréld külön tokenre.
4. Nézd meg a színes kitöltéseket. Minden gomb, badge és sáv, amin fixen #fff vagy fix sötét szöveg ül — mérd meg mindkét témában.
5. Mérj a legrosszabb felülethez. Nem a fehérhez és nem a feketéhez: a legsötétebb világos, illetve a legvilágosabb sötét felületedhez.
6. Válaszd szét a kitöltést és a szöveget. A márkaszíned maradhat élénk ott, ahol kitöltés. Szövegre kell egy külön, mért változat.

Benkó János · webaktivátor

16 éve értékesít, 2014 óta weboldalakat üzemeltet és hirdetéseket kezel. Ki az a Benkó János? →