WCAG kritériumok » 1. Érzékelhető (Perceivable)

1.4.11 - Nem szöveges kontraszt

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.11 (Non-text Contrast) előírja, hogy a felhasználói felület komponensek és grafikus objektumok vizuális megjelenítésének legalább 3:1 kontrasztaránya legyen a szomszédos színekkel szemben. Ez olyan elemekre vonatkozik, mint az ikonok, szegélyek, fókusz jelzők és egyéb nem szöveges vizuális elemek, amelyek elengedhetetlenek a tartalom megértéséhez vagy működtetéséhez.

Cél: Biztosítani, hogy a gyengénlátó vagy színlátási problémákkal küzdő felhasználók érzékelni és megkülönböztetni tudják ezeket a felhasználói felület elemeket, javítva a használhatóságot és akadálymentességet.

Kiket érint

Elsődleges felhasználók: Gyengénlátó, színvak vagy más látássérüléssel élő emberek, akik elegendő kontrasztra támaszkodnak a felhasználói felület komponensek azonosításához.

Másodlagos előnyök:

  • Jobb láthatóság erős megvilágítási körülmények között vagy gyenge minőségű kijelzőkön
  • Javított használhatóság mindenkinek az interaktív elemek megkülönböztethetőbbé tételével

Tesztelés

Gyakorlati módszerek az 1.4.11 megfelelőség tesztelésére:

  1. Automatizált kontraszt ellenőrzők használata: Eszközök, mint a Color Contrast Checker segítségével értékeld ki a felhasználói felület komponensek és hátterek közötti kontrasztarányokat
  2. Manuális színmintavétel: Használd a böngésző fejlesztői eszközeit vagy tervezőszoftvert színek mintavételezésére és kontrasztarányok számítására
  3. Billentyűzet fókusz tesztelés: Navigálj a felületen csak billentyűzettel és győződj meg róla, hogy a fókusz jelzők világosan láthatók elegendő kontraszttal
  4. Képernyőnagyítás: Nagyítsd ki a felhasználói felület elemeket annak ellenőrzésére, hogy megkülönböztethetők maradnak-e
  5. Színvakság szimulálása: Használj böngésző kiegészítőket vagy szoftvereket a gyakori színlátási fogyatékosságok szimulálására és ellenőrizd, hogy a felhasználói felület komponensek még mindig tiszták-e

Jó gyakorlatok

1. Fókusz jelzők megfelelő kontraszttal

<button class="focus-button">Küldés</button>

<style>
.focus-button {
  padding: 12px 24px;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.focus-button:focus {
  outline: 3px solid #ff6b00; /* Narancssárga fókusz jelző */
  outline-offset: 2px;
  /* A #ff6b00 és #007acc között 3:1 feletti kontraszt van */
}

.focus-button:hover {
  background-color: #005a9c;
}
</style>

Magyarázat: A gomb fókusz körvonala legalább 3:1 kontrasztaránnyal rendelkezik a háttérrel szemben, biztosítva a jó láthatóságot.

2. Ikonok megfelelő kontraszttal

<div class="icon-container">
  <svg width="24" height="24" role="img" aria-label="Keresés ikon" class="search-icon">
    <circle cx="11" cy="11" r="8" stroke="#333" stroke-width="2" fill="none"></circle>
    <path d="m21 21-4.35-4.35" stroke="#333" stroke-width="2"></path>
  </svg>
  
  <svg width="24" height="24" role="img" aria-label="Profil ikon" class="profile-icon">
    <circle cx="12" cy="8" r="4" fill="#2c3e50"></circle>
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="#2c3e50" stroke-width="2" fill="none"></path>
  </svg>
</div>

<style>
.icon-container {
  background-color: #f8f9fa;
  padding: 20px;
  display: flex;
  gap: 20px;
}

.search-icon, .profile-icon {
  /* Az ikon színek (#333, #2c3e50) elegendő kontraszttal rendelkeznek 
     a világos háttérrel (#f8f9fa) szemben */
}
</style>

Magyarázat: Az ikon kitöltési vagy körvonal színek elegendő kontraszttal rendelkeznek a háttérrel, biztosítva a jó felismerhetőséget.

3. Szegélyek és elválasztók megfelelő kontraszttal

<div class="content-sections">
  <div class="bordered-section">
    <h3>Első szakasz</h3>
    <p>Ez egy szegélyezett konténer tartalma.</p>
  </div>
  
  <hr class="section-divider">
  
  <div class="input-group">
    <label for="example-input">Példa input:</label>
    <input type="text" id="example-input" class="form-input">
  </div>
</div>

<style>
.content-sections {
  background-color: #ffffff;
  padding: 20px;
}

.bordered-section {
  border: 2px solid #666666; /* Sötétszürke szegély fehér háttéren */
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.section-divider {
  border: none;
  height: 2px;
  background-color: #555555; /* Jó kontraszt a fehér háttéren */
  margin: 20px 0;
}

.form-input {
  border: 2px solid #4a5568; /* Elegendő kontraszt a szegélyhez */
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
}

.form-input:focus {
  border-color: #3182ce; /* Kék fókusz szegély */
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3);
}
</style>

Magyarázat: A szegélyek legalább 3:1 kontrasztaránnyal rendelkeznek a szomszédos színekkel szemben, hogy láthatók legyenek.

4. Grafikus objektumok megfelelő kontraszttal

<div class="chart-container">
  <h3>Eladási adatok</h3>
  <svg width="300" height="200" role="img" aria-label="Oszlopdiagram az eladási adatokról">
    <!-- Háttér -->
    <rect width="300" height="200" fill="#f8f9fa" stroke="#dee2e6" stroke-width="1"></rect>
    
    <!-- Oszlopok megfelelő kontraszttal -->
    <rect x="50" y="80" width="40" height="100" fill="#28a745" stroke="#1e7e34" stroke-width="2"></rect>
    <rect x="120" y="60" width="40" height="120" fill="#dc3545" stroke="#bd2130" stroke-width="2"></rect>
    <rect x="190" y="40" width="40" height="140" fill="#007bff" stroke="#0056b3" stroke-width="2"></rect>
    
    <!-- Tengelyek -->
    <line x1="30" y1="180" x2="270" y2="180" stroke="#495057" stroke-width="2"></line>
    <line x1="30" y1="20" x2="30" y2="180" stroke="#495057" stroke-width="2"></line>
    
    <!-- Címkék -->
    <text x="70" y="195" text-anchor="middle" fill="#212529" font-size="14">Q1</text>
    <text x="140" y="195" text-anchor="middle" fill="#212529" font-size="14">Q2</text>
    <text x="210" y="195" text-anchor="middle" fill="#212529" font-size="14">Q3</text>
  </svg>
  
  <div class="chart-legend">
    <div class="legend-item">
      <span class="legend-color" style="background-color: #28a745;"></span>
      <span>Termékkategória A</span>
    </div>
  </div>
</div>

<style>
.chart-container {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin: 20px 0;
}

.chart-legend {
  margin-top: 15px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.legend-color {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #333; /* Kontraszt biztosítása */
}
</style>

Magyarázat: Az információt közvetítő dekoratív grafikák (pl. diagramok, grafikonok) megkülönböztethető színekkel vagy mintákkal rendelkeznek, amelyek megfelelnek a kontraszt követelményeknek.

5. Interaktív komponensek állapot jelzői

<div class="interactive-components">
  <div class="checkbox-group">
    <input type="checkbox" id="agree" class="custom-checkbox">
    <label for="agree">Elfogadom a feltételeket</label>
  </div>
  
  <div class="toggle-switch">
    <input type="checkbox" id="notifications" class="toggle-input">
    <label for="notifications" class="toggle-label">
      <span class="toggle-text">Értesítések</span>
      <span class="toggle-slider"></span>
    </label>
  </div>
</div>

<style>
.interactive-components {
  background-color: #f8f9fa;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Egyedi checkbox */
.custom-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #495057; /* Jó kontraszt */
  border-radius: 3px;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
}

.custom-checkbox:checked {
  background-color: #007bff;
  border-color: #0056b3;
}

.custom-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 2px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.custom-checkbox:focus {
  outline: 3px solid #80bdff;
  outline-offset: 2px;
}

/* Toggle kapcsoló */
.toggle-input {
  display: none;
}

.toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-text {
  margin-right: 15px;
  font-weight: 500;
}

.toggle-slider {
  width: 50px;
  height: 24px;
  background-color: #6c757d; /* Megfelelő kontraszt */
  border-radius: 12px;
  position: relative;
  transition: background-color 0.3s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
  border: 2px solid #495057; /* Kontraszt biztosítása */
}

.toggle-input:checked + .toggle-label .toggle-slider {
  background-color: #28a745; /* Zöld aktív állapot */
}

.toggle-input:checked + .toggle-label .toggle-slider::before {
  transform: translateX(26px);
  border-color: #1e7e34;
}

.toggle-input:focus + .toggle-label .toggle-slider {
  outline: 3px solid #80bdff;
  outline-offset: 2px;
}
</style>

Magyarázat: Az interaktív komponensek állapot jelzői (kijelölt, fókuszált) megfelelő kontraszttal rendelkeznek minden állapotban.

Rossz gyakorlatok

Alacsony kontrasztú fókusz jelző

<button style="outline: 1px solid #ccc; padding: 10px 20px; background: #f0f0f0;">
  Küldés
</button>

Probléma: A kontrasztarány túl alacsony, nehezen látható a fókusz állapot. A világosszürke körvonal (#ccc) nem biztosít elegendő kontrasztot.

Ikon színe túl közel a háttérhez

<div style="background-color: #f5f5f5; padding: 20px;">
  <svg width="24" height="24" style="fill: #aaa;">
    <rect width="24" height="24" />
  </svg>
</div>

Probléma: Az ikon színe (#aaa) világosszürke háttéren (#f5f5f5) nem biztosít elegendő kontrasztot, nehezen látható.

Szegélyek beolvadása a háttérbe

<div style="background-color: #f8f8f8; padding: 20px;">
  <div style="border: 1px solid #eee; padding: 15px;">
    Tartalom itt
  </div>
</div>

Probléma: A szegély szinte láthatatlan az alacsony kontraszt miatt. A #eee színű szegély alig különbözik a #f8f8f8 háttértől.

Grafikus elemek alacsony kontraszttal

<svg width="200" height="100" style="background-color: #f0f0f0;">
  <circle cx="50" cy="50" r="30" fill="#d0d0d0" />
  <rect x="120" y="20" width="60" height="60" fill="#e8e8e8" />
</svg>

Probléma: A grafikus elemek színei túl közel vannak a háttérszínhez, nem biztosítanak elegendő kontrasztot a megkülönböztetéshez.

Interaktív állapotok nem megfelelő jelzése

<style>
.bad-button {
  background-color: #f8f9fa;
  border: 1px solid #f1f1f1; /* Alig látható szegély */
  padding: 10px 20px;
}

.bad-button:hover {
  background-color: #f0f0f0; /* Alig észrevehető változás */
}

.bad-button:focus {
  outline: 1px solid #ddd; /* Alacsony kontrasztú fókusz */
}
</style>

Probléma: Az interaktív állapotok (hover, focus) változásai túl finomak, nem biztosítanak elegendő vizuális visszajelzést a felhasználók számára.

Források

Iratkozz fel hírlevelünkre!

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

Ez a weboldal sütiket használ a böngészési élmény javítása és a webhely megfelelő működésének biztosítása érdekében. A webhely használatának folytatásával elismeri és elfogadja a sütik használatát.

Összes elfogadása Csak a szükségesek elfogadása