Ez a lap egy konkrét hibából nőtt ki, ami egy vészhívó alkalmazásban élt. Minden szám rajta mérés, nem becslés — és a végén ott vannak a kérdések, amikre nem tudjuk a választ.

This page grew out of one concrete defect that lived inside an emergency-call application. Every number on it is measured, not estimated — and at the end you will find the questions we do not know the answers to.

Diese Seite ist aus einem konkreten Fehler entstanden, der in einer Notruf-Anwendung steckte. Jede Zahl darauf ist gemessen, nicht geschätzt — und am Ende stehen die Fragen, auf die wir die Antwort nicht kennen.

1. A hiba, ami elindította

1. The defect that started it

1. Der Fehler, der alles ausgelöst hat

Az alkalmazás főképernyőjén csempék vannak: minden csempe egy ember. A csempe alján egy kis ikon mondta meg, hogy koppintásra hívás indul-e vagy üzenet megy. Az ikon jó színű volt — fényképes csempéken kifogástalanul látszott.

The app’s home screen is a grid of tiles, one person per tile. A small icon at the bottom of each tile told you whether tapping it would place a call or send a message. The icon’s colour was fine — on tiles with a photograph it was perfectly legible.

Der Startbildschirm der App besteht aus Kacheln, eine Person pro Kachel. Ein kleines Symbol am unteren Rand zeigte an, ob ein Tippen einen Anruf auslöst oder eine Nachricht sendet. Die Farbe des Symbols war in Ordnung — auf Kacheln mit einem Foto war es einwandfrei lesbar.

Aztán valaki, aki csak odapillantott a telefonra, ezt mondta:

Then someone who merely glanced at the phone said this:

Dann sagte jemand, der nur kurz auf das Telefon blickte, Folgendes:

„Pont olyan zöld a boríték, mint a csempe háttere. A kutya se látja rajta.”

“The envelope is exactly the same green as the tile behind it. Nobody can see it.”

„Der Umschlag ist genau so grün wie die Kachel dahinter. Das sieht doch kein Mensch.“

A rajzolt avatarok névsávja ugyanis maga is pasztell. Ugyanaz az ikon, ami fényképen kiválóan látszott, ott eltűnt. És amikor megmértük, kiderült, hogy rosszabb a helyzet, mint amit szabad szemmel látni lehetett. Az ikon színe #7FE38A volt:

The name band under an illustrated avatar is itself a pastel. The very same icon that was perfectly visible over a photograph simply disappeared there. And when we measured it, the situation turned out to be worse than the eye suggested. The icon colour was #7FE38A:

Das Namensband unter einem gezeichneten Avatar ist selbst ein Pastellton. Genau dasselbe Symbol, das über einem Foto hervorragend sichtbar war, verschwand dort. Und als wir nachgemessen haben, zeigte sich: es ist schlimmer, als das Auge vermuten ließ. Die Symbolfarbe war #7FE38A:

Fényképes csempén ugyanez az ikon 9,92:1-et mért — de azt a számot nem lehet hexből kiszámolni, mert ott a névsáv egy fekete átmenet 78 %-on, és a háttér maga a fénykép. Ezért ez a szám a képernyőn mérve készült, nem a képletből.

Over a photographic tile the same icon measured 9.92:1 — but that number cannot be derived from a hex value, because there the name band is black at 78 % opacity and the backdrop is the photograph itself. That figure was therefore measured on the screen, not computed from the formula.

Über einer Foto-Kachel maß dasselbe Symbol 9,92:1 — diese Zahl lässt sich jedoch nicht aus einem Hex-Wert berechnen, denn dort ist das Namensband Schwarz mit 78 % Deckkraft, und der Hintergrund ist das Foto selbst. Dieser Wert wurde daher am Bildschirm gemessen, nicht aus der Formel errechnet.

2. A képlet, pontosan

2. The formula, precisely

2. Die Formel, genau

A WCAG 2.1 kontraszt-aránya három lépés. Először minden csatornát vissza kell vinni a gammából lineáris fénybe:

The WCAG 2.1 contrast ratio takes three steps. First, each channel is taken back out of gamma into linear light:

Das Kontrastverhältnis nach WCAG 2.1 besteht aus drei Schritten. Zuerst wird jeder Kanal aus dem Gamma zurück in lineares Licht überführt:

s   = c / 255
lin = (s <= 0.04045) ? s / 12.92
                     : ((s + 0.055) / 1.055) ^ 2.4

Aztán a relatív fénysűrűség (relative luminance):

Then the relative luminance:

Dann die relative Leuchtdichte (relative luminance):

L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin

És végül a kontraszt-arány, a világosabbat felülre téve:

And finally the contrast ratio, lighter colour on top:

Und schließlich das Kontrastverhältnis, die hellere Farbe oben:

CR = (L_lighter + 0.05) / (L_darker + 0.05)      // 1:1 … 21:1

Programozható alakban

In programmable form

In programmierbarer Form

function luminance(hex) {
  const v = [0, 2, 4].map(i => {
    const s = parseInt(hex.slice(i + 1, i + 3), 16) / 255;
    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];
}

function contrast(a, b) {
  const la = luminance(a), lb = luminance(b);
  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
}

A küszöbök

The thresholds

Die Schwellenwerte

A csempéken lévő ikonok a harmadik sorba tartoznak: nem szöveg, de nélkülük nem érthető a felület. A küszöb tehát 3,0 — és a mért 1,00–1,17 ennek a 33–39 %-a.

The tile icons fall into the third row: not text, but the interface cannot be understood without them. The threshold is therefore 3.0 — and the measured 1.00–1.17 is 33–39 % of that.

Die Kachel-Symbole fallen in die dritte Zeile: kein Text, aber ohne sie ist die Oberfläche nicht verständlich. Der Schwellenwert ist also 3,0 — und die gemessenen 1,00–1,17 sind davon 33–39 %.

3. Amit a képlet nem tartalmaz

3. What the formula does not contain

3. Was die Formel nicht enthält

Nézze meg a három szorzót a fénysűrűség-képletben:

Look at the three coefficients in the luminance formula:

Sehen Sie sich die drei Koeffizienten in der Leuchtdichte-Formel an:

0.2126 · R    0.7152 · G    0.0722 · B
   21 %          72 %           7 %

Ebből következik a szabály, amit programozni lehet: soha ne a színárnyalattal különböztessünk meg két dolgot. Világosság-különbséget kell csinálni. A színárnyalat lehet ráadás, de nem lehet a jelentés hordozója — mert a nézők egy részénél egyszerűen nincs ott.

From which follows a rule you can actually program: never let hue alone distinguish two things. Create a difference in lightness. Hue may carry extra meaning, but it cannot be the carrier of the meaning — because for a share of your viewers it simply is not there.

Daraus folgt eine Regel, die sich tatsächlich programmieren lässt: Niemals allein der Farbton darf zwei Dinge unterscheiden. Es muss ein Helligkeitsunterschied sein. Der Farbton darf zusätzliche Bedeutung tragen, aber nicht der Träger der Bedeutung sein — denn bei einem Teil der Betrachter ist er schlicht nicht vorhanden.

A javítás is pontosan ezt tette: az ikon nem világosabb zöld lett, hanem sötét korongot kapott fehér jellel. A színárnyalat maradt beszédes (zöld = üzenet, kék = hívás), de a láthatóságot már a világosság-különbség hordozza.

The fix did exactly that: the icon did not become a brighter green — it was given a dark disc with a white glyph. Hue still speaks (green = message, blue = call), but visibility is now carried by the difference in lightness.

Genau das hat die Korrektur getan: Das Symbol wurde nicht heller grün, sondern erhielt eine dunkle Scheibe mit weißem Zeichen. Der Farbton spricht weiterhin (grün = Nachricht, blau = Anruf), aber die Sichtbarkeit trägt jetzt der Helligkeitsunterschied.

4. Élő számoló

4. Live calculator

4. Rechner zum Ausprobieren

Az alapértelmezett érték a valódi hibás pár: az eredeti világoszöld boríték (#7FE38A) a zöld avatar névsávján (#A8D5BA). A két szín szemre teljesen különböző.

The default values are the actual defective pair: the original pale green envelope (#7FE38A) on the green avatar’s name band (#A8D5BA). To the eye the two colours look entirely different.

Die Vorgabewerte sind das tatsächlich fehlerhafte Paar: der ursprüngliche hellgrüne Umschlag (#7FE38A) auf dem Namensband des grünen Avatars (#A8D5BA). Für das Auge sehen die beiden Farben völlig verschieden aus.

5. Színtévesztés-szimuláció

5. Colour-vision-deficiency simulation

5. Simulation von Farbfehlsichtigkeit

A gyakorlatban a Machado, Oliveira & Fernandes (2009) mátrixokat használják — ezekre épül több elterjedt fejlesztői és tervezőeszköz látásszimulációja is. Három 3×3-as mátrix, súlyosság szerint skálázva; itt a teljes (1,0-ás) esetek szerepelnek. A dikromát eseteknek külön hivatkozási alapja van, a Brettel–Viénot–Mollon (1997/99), ami LMS-térben vetít.

In practice the Machado, Oliveira & Fernandes (2009) matrices are what people use — the vision simulation in several widely used developer and design tools is built on them. Three 3×3 matrices, scalable by severity; the full (1.0) cases are used here. Dichromatic cases have a reference of their own, Brettel–Viénot–Mollon (1997/99), which projects in LMS space.

In der Praxis verwendet man die Matrizen von Machado, Oliveira & Fernandes (2009) — auf ihnen beruht die Sehsimulation mehrerer verbreiteter Entwickler- und Design-Werkzeuge. Drei 3×3-Matrizen, nach Schweregrad skalierbar; hier stehen die vollen Fälle (1,0). Für dichromatische Fälle gibt es eine eigene Referenz, Brettel–Viénot–Mollon (1997/99), die im LMS-Raum projiziert.

⚠ Egy részlet, ami sokszor elsikkad: ezek a mátrixok lineáris RGB-ben értendők. Aki közvetlenül az sRGB-értékekre alkalmazza őket, az közel jár, de nem pontos. Ezen a lapon a szimuláció sRGB → lineáris → mátrix → sRGB úton megy.

⚠ One detail that is often missed: these matrices are defined for linear RGB. Applying them straight to sRGB values gets you close, but it is not correct. On this page the simulation goes sRGB → linear → matrix → sRGB.

⚠ Ein Detail, das oft übersehen wird: Diese Matrizen sind für lineares RGB definiert. Wer sie direkt auf sRGB-Werte anwendet, kommt nahe heran, aber es ist nicht korrekt. Auf dieser Seite läuft die Simulation über sRGB → linear → Matrix → sRGB.

Amivel kód nélkül lehet tesztelni

Testing without writing any code

Testen ganz ohne Programmieren

6. Ahol a WCAG 2.1 téved

6. Where WCAG 2.1 gets it wrong

6. Wo WCAG 2.1 danebenliegt

Becsületesnek kell lenni: a fenti képlet ismerten pontatlan. Leginkább sötét háttéren és a középtónusokban tér el attól, amit az ember ténylegesen lát — a +0,05 tag egy egyszerűsítés, ami a sötét oldalon torzít.

Honesty requires saying it: the formula above is known to be inaccurate. It diverges most from what people actually see on dark backgrounds and in the midtones — the +0.05 term is a simplification that distorts the dark end.

Ehrlichkeit verlangt, es zu sagen: Die obige Formel ist bekanntermaßen ungenau. Am stärksten weicht sie auf dunklen Hintergründen und in den Mitteltönen von dem ab, was Menschen tatsächlich sehen — der Term +0,05 ist eine Vereinfachung, die das dunkle Ende verzerrt.

Az utódja az APCA (Accessible Perceptual Contrast Algorithm), a WCAG 3 tervezetében. Az modellezi a polaritást is: a sötét-világoson és a világos-sötéten nem ugyanaz, és nem egy arányszámot ad, hanem egy Lc értéket nagyjából −108 … +106 között.

Its successor is APCA (Accessible Perceptual Contrast Algorithm), in the WCAG 3 draft. It models polarity as well — dark-on-light and light-on-dark are not the same case — and returns not a ratio but an Lc value roughly between −108 and +106.

Ihr Nachfolger ist APCA (Accessible Perceptual Contrast Algorithm), im Entwurf von WCAG 3. Er modelliert auch die Polarität — dunkel-auf-hell und hell-auf-dunkel sind nicht derselbe Fall — und liefert kein Verhältnis, sondern einen Lc-Wert etwa zwischen −108 und +106.

7. Amit nem tudunk

7. What we do not know

7. Was wir nicht wissen

Ezek a valódi kérdéseink — ezekre keressük a választ:

These are our genuine open questions:

Das sind unsere echten offenen Fragen:

1. Elég-e a 3:1 egy vészhelyzeti felületen? A WCAG minimumot mond, nem optimumot. Egy vészhívó gomb, amit ijedt, rosszul látó, idős ember keres — ott hol van a valódi határ?
2. Mit kezdjünk a szín jelentésével, ha a láthatóságot már a világosság hordozza? A zöld = üzenet, kék = hívás párosítás megmaradt. Segít-e még annak, aki a kettőt nem különbözteti meg — vagy inkább zavar?
3. Van-e értelme a súlyosság-skálának a gyakorlatban? A Machado-mátrixok 0,1-es lépésekben skálázhatók. Reálisabb-e egy 0,6-os deuteranomália, mint a teljes deuteranópia — vagy tervezéskor mindig a legrosszabb esetre kell menni?
4. A pasztell-paletta tartható-e egyáltalán? A hat avatar-szín azért pasztell, hogy barátságos legyen és sötét betű menjen rá. De pont ez tette a világos ikont láthatatlanná. Van-e olyan paletta, ami barátságos és minden ráhelyezett jelnek ad világosság-tartalékot?

1. Is 3:1 enough on an emergency interface? WCAG states a minimum, not an optimum. For an emergency button that a frightened, poorly-sighted, elderly person is hunting for — where is the real threshold?
2. What should we do with the meaning of colour, now that lightness carries visibility? Green = message, blue = call still holds. Does it still help someone who cannot tell the two apart — or does it actively confuse?
3. Is the severity scale useful in practice? The Machado matrices scale in steps of 0.1. Is a 0.6 deuteranomaly more realistic than full deuteranopia — or should design always target the worst case?
4. Is the pastel palette defensible at all? The six avatar colours are pastel so that they feel friendly and carry dark text. But that is exactly what made a pale icon invisible. Is there a palette that is friendly and leaves lightness headroom for anything placed on it?

1. Genügen 3:1 auf einer Notfall-Oberfläche? WCAG nennt ein Minimum, kein Optimum. Bei einer Notruf-Taste, die ein erschrockener, schlecht sehender, älterer Mensch sucht — wo liegt dort die wirkliche Grenze?
2. Was tun wir mit der Bedeutung der Farbe, wenn die Sichtbarkeit bereits die Helligkeit trägt? Grün = Nachricht, blau = Anruf gilt weiterhin. Hilft das noch jemandem, der beides nicht unterscheiden kann — oder stört es eher?
3. Ist die Schweregrad-Skala in der Praxis sinnvoll? Die Machado-Matrizen lassen sich in 0,1-Schritten skalieren. Ist eine Deuteranomalie von 0,6 realistischer als die volle Deuteranopie — oder muss man beim Entwurf stets vom schlimmsten Fall ausgehen?
4. Ist die Pastell-Palette überhaupt haltbar? Die sechs Avatar-Farben sind pastellig, damit sie freundlich wirken und dunkle Schrift tragen. Aber genau das machte ein helles Symbol unsichtbar. Gibt es eine Palette, die freundlich ist und jedem daraufgesetzten Zeichen Helligkeitsreserve lässt?

8. Egy megjegyzés a végére

8. A closing note

8. Eine Bemerkung zum Schluss

Ezt a hibát nem gép találta meg. Nem volt olyan tesztünk, ami elbukott volna rajta — sőt, az ikon a saját tervezési környezetében (sötét fényképen) kifogástalan volt.

This defect was not found by a machine. No test of ours failed on it — indeed, in the environment it was designed for (over a dark photograph) the icon was flawless.

Diesen Fehler hat keine Maschine gefunden. Kein Test von uns ist daran gescheitert — im Gegenteil: In der Umgebung, für die es entworfen war (über einem dunklen Foto), war das Symbol einwandfrei.

Egy ember odapillantott a telefonra, és megmondta. Egy másik, aki maga is nehezen látja a színeket, előtte már jelezte, hogy nem talál semmilyen ikont — és a válasz az volt neki, hogy „ott a kis ikon”.

A person glanced at the phone and said so. Another, who has difficulty with colour himself, had already reported that he could not find any icon at all — and was told “the little icon is right there”.

Ein Mensch warf einen Blick auf das Telefon und sagte es. Ein anderer, der selbst Schwierigkeiten mit Farben hat, hatte zuvor schon gemeldet, dass er überhaupt kein Symbol finde — und bekam zur Antwort: „Das kleine Symbol ist doch da.“

Neki volt igaza, és nem szubjektíven: matematikailag. Ezért kell a képlet — hogy a következőt már ne kelljen valakinek a saját kárán észrevennie.

He was right, and not subjectively: mathematically. That is what the formula is for — so that nobody has to discover the next one the hard way.

Er hatte recht, und zwar nicht subjektiv, sondern mathematisch. Genau dafür ist die Formel da — damit den nächsten Fehler niemand mehr auf eigene Kosten entdecken muss.