1.4.3 - Kontraszt (minimum)

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.4. Megkülönböztethetőség Szint: AA

Röviden a szabványpontról

A WCAG 1.4.3 (Contrast – Minimum) előírja, hogy a szöveg és szövegképek vizuális megjelenítésének legalább 4.5:1 kontrasztaránya legyen a háttérrel szemben. Ez minden szöveges tartalomra és szövegképekre vonatkozik egy weboldalon vagy alkalmazás felületén.

Mire vonatkozik:

Minden szöveges tartalom, beleértve a címsorokat, bekezdéseket, címkéket és gombokat
Szövegképek, mint logók vagy dekoratív szövegek, kivéve ha a kép tisztán dekoratív vagy márkaépítés szempontjából elengedhetetlen
Felhasználói felület komponensek és grafikus objektumok szövege

Cél: Biztosítani, hogy a gyengénlátó vagy színlátási problémákkal küzdő felhasználók kényelmesen tudják olvasni a szöveges tartalmat. A megfelelő kontraszt segít a felhasználóknak megkülönböztetni a szöveget a háttértől, javítva az olvashatóságot és használhatóságot.

Kiket érint

Elsődleges felhasználók:

Gyengénlátó vagy színvak emberek, akik nehezen tudják megkülönböztetni a szöveget a háttérszínektől
Idősebb felnőttek, akik természetesen csökkent kontraszt-érzékenységet tapasztalnak

Másodlagos előnyök:

Javított olvashatóság erős napfényben vagy gyenge minőségű képernyőkön
Jobb általános felhasználói élmény mindenkinek, beleértve a fogyatékossággal nem élő felhasználókat is

Tesztelés

Gyakorlati módszerek a kontraszt megfelelőség tesztelésére:

Automatizált eszközök: Használj eszközöket, mint az axe DevTools böngésző kiegészítő vagy a Color Contrast Checker az oldalak szkennelésére és kontraszt problémák azonosítására
Manuális színkontraszt számítás: Használj kontraszt arány kalkulátorokat (pl. WebAIM Contrast Checker) az előtér és háttérszínek bevitelével
Vizuális ellenőrzés: Ellenőrizd a szöveg olvashatóságát különböző eszközökön és megvilágítási körülmények között, különösen kis szövegnél
Színlátási fogyatékosságok szimulálása: Használj böngésző kiegészítőket vagy szoftvereket annak szimulálására, hogyan látják a színvak felhasználók a tartalmat, biztosítva, hogy a szöveg olvasható marad
Felhasználói tesztelés: Vonj be gyengénlátó felhasználókat a használhatósági tesztelésbe a valós olvashatóság ellenőrzésére

Jó gyakorlatok

Megfelelő kontrasztú szöveg

<style>
  .high-contrast-text {
    color: #212121; /* Sötétszürke */
    background-color: #ffffff; /* Fehér */
  }
</style>

<p class="high-contrast-text">
  Ez a bekezdés több mint 7:1 kontrasztaránnyal rendelkezik, ami kiváló az olvashatóság szempontjából.
</p>

Magyarázat: A sötét szöveg világos háttéren megfelelő kontrasztot biztosít, ezáltal javítva az olvashatóságot.

Nagy szöveg kivétel

<style>
  .large-text {
    font-size: 24px; /* Nagy szöveg */
    font-weight: normal;
    color: #666666; /* Közepesen szürke */
    background-color: #ffffff;
  }
  
  .large-bold-text {
    font-size: 18px; /* Közepes méret */
    font-weight: bold; /* Félkövér */
    color: #666666;
    background-color: #ffffff;
  }
</style>

<p class="large-text">
  Ez a nagy szöveg megfelel a nagy szövegekre előírt minimális 3:1 kontrasztaránynak.
</p>

<p class="large-bold-text">
  Ez a félkövér szöveg szintén megfelel a nagy szöveg kritériumnak.
</p>

Magyarázat: Nagy szöveg esetében (18pt vagy 14pt félkövér és nagyobb) a kontrasztkövetelmény 3:1-re csökken, lehetővé téve valamivel világosabb színek használatát.

Szövegképek kerülése amikor lehetséges

<!-- Ehelyett: -->
<!-- <img src="gomb-szoveg.png" alt="Küldés" /> -->

<!-- Használd ezt: -->
<button class="submit-button">Küldés</button>

<style>
.submit-button {
  background-color: #005a9e;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}
</style>

Magyarázat: Valódi szöveg használata szövegképek helyett lehetővé teszi a felhasználóknak az átméretezést és saját színbeállítások alkalmazását, javítva az akadálymentességet.

Kontraszt interaktív elemeken

<style>
  .primary-button {
    color: #ffffff;
    background-color: #005a9e; /* Kék elegendő kontraszttal */
    border: 2px solid #005a9e;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
  }
  
  .primary-button:hover {
    background-color: #004080;
    border-color: #004080;
  }
  
  .primary-button:focus {
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
  }
  
  .link-text {
    color: #005a9e;
    text-decoration: underline;
  }
  
  .link-text:hover {
    color: #004080;
    text-decoration: underline;
  }
</style>

<button class="primary-button">Kattints rám</button>

<p>Itt egy <a href="#" class="link-text">link szöveg</a> a bekezdésben.</p>

Magyarázat: A gomboknak és linkeknek elegendő kontraszttal kell rendelkezniük, hogy a billentyűzet és képernyőolvasó felhasználók azonosítani tudják az interaktív elemeket.

Színes háttérrel rendelkező tartalom

<style>
  .info-box {
    background-color: #e3f2fd; /* Világoskék háttér */
    color: #0d47a1; /* Sötétkék szöveg */
    padding: 20px;
    border-left: 4px solid #0d47a1;
  }
  
  .warning-box {
    background-color: #fff3e0; /* Világos narancssárga háttér */
    color: #e65100; /* Sötét narancssárga szöveg */
    padding: 20px;
    border-left: 4px solid #e65100;
  }
</style>

<div class="info-box">
  <strong>Információ:</strong> Ez egy információs üzenet megfelelő kontraszttal.
</div>

<div class="warning-box">
  <strong>Figyelmeztetés:</strong> Ez egy figyelmeztető üzenet jó kontraszttal.
</div>

Rossz gyakorlatok

Alacsony kontrasztú szöveg

<p style="color: #777777; background-color: #ffffff;">
  Ez a szöveg 4.5:1 alatti kontrasztaránnyal rendelkezik és nehezen olvasható.
</p>

Probléma: A világosszürke fehér háttéren nem felel meg a kontrasztkövetelményeknek.

Csak színre támaszkodás információ közvetítésére

<p>
  <span style="color: red;">Hiba</span>: Kérlek töltsd ki a kötelező mezőket.
</p>

Probléma: A színvak felhasználók elmulaszthatják a hibajelzést. További jelzések, mint ikonok vagy szöveges címkék szükségesek.

Szövegképek használata alternatív szöveg nélkül

<img src="fejlec-szoveg.png" />

Probléma: Alt szöveg nélkül a képernyőolvasó felhasználók lemaradnak a fontos tartalomról. Ráadásul a szövegképek nem méretezhetők át és nem stílusozhatók újra.

Nem megfelelő fókusz jelzés

<style>
button:focus {
  outline: none;
  background-color: #f0f0f0; /* Túl alacsony kontraszt */
}
</style>

Probléma: A fókusz állapot nem biztosít elegendő kontrasztot, nehezítve a billentyűzetes navigációt.

Források

Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!