# Kontraszt

> A teszt a szöveg és a háttér színkontrasztját méri: normál szövegnél legalább 4,5 : 1, nagy szövegnél legalább 3 : 1 kell. Sötétítsd a szöveget vagy világosítsd a hátteret.

A halvány szürke szöveg fehér alapon szép lehet, de sokan nem tudják elolvasni: gyengénlátók, idősebbek, és mindenki, aki erős napfényben vagy rossz kijelzőn nézi az oldalt. A WCAG 2.2 1.4.3-as sikerességi feltétele (Contrast (Minimum), AA szint) ezért legalább 4,5 : 1 kontrasztarányt kér a szövegtől és a háttértől.

## Hogyan mérjük

A riport egy valódi böngészőben (mobilra emulálva) betölti az oldalt, és lefuttatja a Lighthouse `color-contrast` auditját (az axe-core szabálya; a riport Lighthouse 13.6 és axe-core 4.14 változattal dolgozik).

A küszöbök megegyeznek a WCAG-éval:

- **Normál szöveg:** legalább 4,5 : 1.
- **Nagy szöveg:** legalább 3 : 1. Nagynak a legalább 18 pontos (kb. 24 képpontos), vagy a legalább 14 pontos félkövér (kb. 18,66 képpontos) szöveg számít.

Az eredmény:

- **Megfelelő:** az audit egyetlen szövegnél sem talál elégtelen kontrasztot.
- **Hiba:** legalább egy szövegnél a kontrasztarány a küszöb alatt van. A teszt nem számolja, hány ilyen van, egy is elég.
- **Nem értékelhető:** az audit nem tudott dönteni, vagy nem volt vizsgálható szöveg.

Figyelmeztető szint nincs. A WCAG szerint az arányt nem szabad kerekíteni: a 4,499 : 1 nem felel meg a 4,5 : 1 küszöbnek.

Amit a mérés nem tesz: nem ellenőrzi a kezelőelemek és az ikonok színkontrasztját (ezt a WCAG [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) kéri), és az oldal betöltött állapotát nézi, így az egérrel fölé mutatáskor vagy fókuszkor megjelenő színeket nem. Ahol a szöveg mögött kép vagy színátmenet van, a háttérszín nem számolható ki egyértelműen, ezért ezeknél a szabály gyakran nem tud dönteni; ellenőrizd ezeket kézzel is. A WCAG kivételt tesz a letiltott kezelőelemek feliratára, a tisztán díszítő szövegre és a logókra.

## Hogyan javítsd

Nincs általános kód: a javítás az oldal színeitől függ. A teendő:

1. Nézd meg, melyik szövegnél van a baj. A Chrome fejlesztői eszközeiben (F12) az elem stílusai között kattints a szövegszín melletti színmintára, és nyisd le a „Contrast ratio” részt: a színválasztó megmutatja az arányt, és hogy eléri-e az AA vagy az AAA szintet.
2. Sötétítsd a szöveg színét vagy világosítsd a hátteret, amíg a normál szöveg eléri a 4,5 : 1 arányt (a nagy szöveg a 3 : 1-et).

Néhány példa fehér (`#ffffff`) háttéren, kiszámolt arányokkal:

| Szövegszín | Kontrasztarány | Normál szövegnél |
|---|---|---|
| `#999999` | 2,85 : 1 | nem felel meg |
| `#777777` | 4,48 : 1 | nem felel meg (a küszöb alatt) |
| `#767676` | 4,54 : 1 | megfelel |
| `#595959` | 7,0 : 1 | megfelel |

```css title="CSS"
/* előtte: halvány szürke, 2,85 : 1 */
.meta { color: #999999; }

/* utána: 4,54 : 1 */
.meta { color: #767676; }
```

### WordPress

A színeket a téma testreszabójában (Megjelenés > Testreszabás) vagy a webhelyszerkesztőben (Stílusok > Színek) állítsd. Ha a téma saját CSS-t használ, a kiegészítő CSS mezőben vagy a gyermektéma stíluslapján írd felül a halvány színeket. A szövegek mögötti képek és színátmenetek felett a szöveg színe legyen elég sötét (vagy világos) a legkedvezőtlenebb képrészleten is.

## Hogyan ellenőrizd

1. A riportban futtasd újra a mérést.
2. Chrome-ban az F12 > Lighthouse panelen válaszd az Accessibility kategóriát: a „Background and foreground colors do not have a sufficient contrast ratio” audit felsorolja az érintett elemeket.