1.4.1 - Szín használata

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

Röviden a szabványpontról

A WCAG 1.4.1 (Use of Color) előírja, hogy a szín ne legyen az egyetlen vizuális eszköz az információ közvetítésére, művelet jelzésére, válasz kérésére vagy vizuális elem megkülönböztetésére. Ez minden olyan tartalomra vonatkozik, ahol színt használnak jelentés közvetítésére. A cél az, hogy biztosítsa, hogy azok a felhasználók, akik nem tudják érzékelni a színkülönbségeket – mint például a színvakok vagy gyengénlátók – még mindig megérthessék és használhassák a tartalmat kritikus információ elvesztése nélkül.

Kiket érint

Ez a szabványpont elsősorban a színlátási problémákkal élő embereket érinti (pl. vörös-zöld színvakság), gyengénlátókat vagy azokat, akik monokróm kijelzőket használnak. De hasznos lehet akkor is, ha:

Rossz megvilágítási körülmények között használják
Képernyő tükröződés van jelen
Olyan eszközöket használnak, amelyek nem jelenítenek meg jól színeket

Tesztelés

Színstílusok eltávolítása: Kapcsold ki a CSS színstílusokat a böngészőben vagy használd a fejlesztői eszközöket annak ellenőrzésére, hogy a színnel közvetített információ érthető marad-e
Szürkeárnyalatos mód használata: Alakítsd át az oldalt szürkeárnyalatossá és ellenőrizd, hogy minden információ még mindig megkülönböztethető-e
Ellenőrzés színvakság szimulátorokkal: Használj eszközöket vagy böngésző kiegészítőket, amelyek különböző típusú színvakságot szimulálnak, hogy az információ világos maradjon
Billentyűzetes navigáció: Ellenőrizd, hogy a fókusz jelzők vagy más jelzések ne csak színalapúak legyenek
Automatizált tesztelés: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools, amelyek jelzik azokat az eseteket, ahol csak a szín közvetít jelentést

Jó gyakorlatok

Űrlap validáció

<label for="email">E-mail cím <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" aria-describedby="emailHelp" required>
<span id="emailHelp">Kötelező mező</span>

<!-- Hibás mező jelölése -->
<div class="error-message" id="email-error" style="display: none;">
  <span class="error-icon" aria-hidden="true">⚠️</span> 
  Érvényes e-mail címet adj meg
</div>

<style>
  input:invalid {
    border: 2px solid red;
    border-left: 5px solid red; /* Vastagabb bal szegély */
  }
  
  .error-message {
    color: red;
    font-weight: bold;
  }
  
  .error-icon {
    margin-right: 5px;
  }
</style>

Magyarázat: Hibaüzenet vagy ikon használata a kötelező mezők jelzésére, nem csak piros szegélyek.

Linkek

<a href="felhasznalasi-feltetelek.html" class="link">Felhasználási feltételek</a>

<style>
  .link {
    color: blue;
    text-decoration: underline; /* Nem csak szín */
  }
  
  .link:hover {
    text-decoration: underline;
    font-weight: bold; /* További vizuális jelzés */
  }
  
  .link:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
  }
</style>

Magyarázat: Aláhúzás vagy más vizuális jelzések használata a szín mellett.

Állapot jelzők

<div class="status-list">
  <p>Állapot: 
    <span class="status-icon success" aria-label="Sikeres" role="img">✓</span> 
    <span class="status-text">Sikeres</span>
  </p>
  
  <p>Állapot: 
    <span class="status-icon warning" aria-label="Figyelmeztetés" role="img">⚠</span> 
    <span class="status-text">Figyelmeztetés</span>
  </p>
  
  <p>Állapot: 
    <span class="status-icon error" aria-label="Hiba" role="img">✗</span> 
    <span class="status-text">Hiba</span>
  </p>
</div>

<style>
  .status-icon.success { color: green; }
  .status-icon.warning { color: orange; }
  .status-icon.error { color: red; }
  
  .status-text {
    font-weight: bold;
    margin-left: 5px;
  }
</style>

Magyarázat: Szín kombinálása ikonokkal vagy szöveges címkékkel.

Adatvizualizáció

<div class="chart-legend">
  <div class="legend-item">
    <span class="legend-color" style="background: #ff0000;"></span>
    <span class="legend-pattern" aria-hidden="true">▬▬▬</span>
    <span class="legend-text">Eladások (2023)</span>
  </div>
  
  <div class="legend-item">
    <span class="legend-color" style="background: #00ff00;"></span>
    <span class="legend-pattern" aria-hidden="true">▬ ▬ ▬</span>
    <span class="legend-text">Eladások (2024)</span>
  </div>
</div>

<style>
  .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .legend-color {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  .legend-pattern {
    margin-right: 10px;
    font-family: monospace;
  }
</style>

Magyarázat: Minták, formák vagy címkék használata diagramokban, nem csak színek az adatsorok megkülönböztetésére.

Navigációs elemek

<nav>
  <ul class="navigation">
    <li><a href="/" class="nav-link">Főoldal</a></li>
    <li><a href="/termekek" class="nav-link active" aria-current="page">
      Termékek <span class="sr-only">(jelenlegi oldal)</span>
    </a></li>
    <li><a href="/kapcsolat" class="nav-link">Kapcsolat</a></li>
  </ul>
</nav>

<style>
  .nav-link {
    color: blue;
    text-decoration: none;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
  }
  
  .nav-link.active {
    color: red;
    border-bottom: 2px solid red; /* Szín + vonal */
    font-weight: bold; /* További megkülönböztetés */
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

Rossz gyakorlatok

Csak piros szöveggel jelzett hiba

<p style="color: red;">Hiba: Érvénytelen bemenet</p>

Probléma: Nincs más jelző a színen kívül.

Kötelező mezők jelölése csak színváltással

<label style="color: red;">Név</label>

Probléma: Nincs más jelzés a mező kötelező voltára.

Csak színváltozáson alapuló fókusz jelzés

<style>
button:focus {
  outline: none;
  background-color: yellow; /* Nincs látható keret vagy más fókusz jelző */
}
</style>

Probléma: A fókusz csak színváltozással jelzett, nincs keret vagy más vizuális jelzés.

Táblázat sorok megkülönböztetése csak háttérszínnel

<table>
  <tr style="background-color: lightgray;">
    <td>Adat 1</td>
    <td>Adat 2</td>
  </tr>
  <tr style="background-color: white;">
    <td>Adat 3</td>
    <td>Adat 4</td>
  </tr>
</table>

Probléma: A sorok csak háttérszínnel különböztethetők meg, nincs más vizuális segítség.

Források

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