🎨 Barrierefreiheits-Farbprüfung

🌐 nur-demo.de ↗
Geprüft am 05.05.2026 13:09 Uhr  ·  ❓ Hilfe & Erklärungen
37
Farbpaare geprüft
21
WCAG-Fehler
1
CVD-Probleme
15
Vollständig OK
📸 Screenshot Vergrößern ↗
👁 Farbenblindheits-Vorschau – Simulierte Screenshots (Klick zum Vergrößern)
❓ Was wird hier analysiert und wie sind die Ergebnisse zu lesen?
① Simulation So sieht die Seite mit der jeweiligen Sehschwäche aus.
② Verlust-Karte Zeigt wo auf der Seite Kontrast verloren geht: ■ rot = starker Verlust, ■ gelb = mittlerer Verlust.

Für jeden Farbenblindheitstyp wird der Screenshot simuliert und automatisch analysiert, wie stark der lokale Kontrast gegenüber dem Original abgenommen hat. Dazu wird pro Pixel die Helligkeits-Standardabweichung in einem 9×9 px-Fenster berechnet und mit dem Original verglichen.

Severity-Badge (über jedem Screenshot)

Unauffällig Weniger als 3 % der Pixel betroffen.
Hinweis 3–8 % betroffen – einzelne Bereiche manuell prüfen.
Kritisch Über 8 % betroffen – Design sollte überarbeitet werden.

⚠️ Die Kontrastverlust-Karte ist eine statistische Annäherung. Texturige Hintergründe oder Fotos können Falsch-Positive erzeugen. Immer zusätzlich zur manuellen Sichtprüfung und den WCAG-Tabelleneinträgen verwenden.

Protanopie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
Deuteranopie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
Tritanopie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
Achromatopsie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
Protanomalie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
Deuteranomalie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
Tritanomalie
UnauffälligKritisch: 0.0% · Hinweis: 0.0%
① Simulation
② Kontrastverlust ggü Original  ■ stark ■ mittel
ℹ️ Wahrscheinlich keine Markierungen sichtbar
❓ Wie lese ich diesen Report?

Dieser Report prüft, ob Farbkombinationen einer Webseite den WCAG 2.1-Richtlinien für Barrierefreiheit entsprechen.

Analyse-Methoden

Kontrastverhältnis & Badges

  • FAIL  Kontrast unter 3:1 – für niemanden ausreichend lesbar
  • AA-large  ≥ 3:1 – nur für große Schrift ausreichend
  • AA  ≥ 4.5:1 – Standard, erfüllt WCAG AA
  • AAA  ≥ 7:1 – optimaler Kontrast, erfüllt WCAG AAA

CVD-Spalten (Farbenblindheit)

Jede Spalte zeigt das Farbpaar unter einer Farbenblindheitssimulation. Ein roter Rahmen bedeutet, dass das Paar nicht mehr WCAG-konform ist.

Beispiel-Eintrag

Farbpaar & AnalyseProt.Deut.Trit.Achrom.P-an.D-an.T-an.
Aa
■ #8FBADA auf ■ #A4B2C6
FAIL 1.05:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #204662
AA 4.62:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #3730A3 (text-indigo-800)
AA 4.62:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #343A40 (gray-800)
AA 5.35:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.05:1 FAIL
Deut.
Aa
1.0:1 FAIL
Trit.
Aa
1.05:1 FAIL
Achrom.
Aa
1.03:1 FAIL
P-an.
Aa
1.05:1 FAIL
D-an.
Aa
1.02:1 FAIL
T-an.
Aa
1.05:1 FAIL
Kontrast-Badges: AAA ≥ 7.0:1   AA ≥ 4.5:1   AA-large ≥ 3.0:1 (große Schrift)   FAIL < 3.0:1
❌

Kritisch – WCAG-Fehler (21)

Diese Farbkombinationen haben zu wenig Kontrast und erfüllen keine WCAG-Anforderung. Sie sind für sehschwache Personen schwer oder gar nicht lesbar.
Sofern es sich um Texte oder Bedienelemente handelt: Bitte unbedingt korrigieren. Die Lösungsvorschläge unterhalb jedes Eintrags zeigen mögliche Alternativen.
Handelt es sich um illustrative Bilder, in denen Bildteile zu wenig Kontrast haben, ist der Korrekturbedarf von einer fachlichen Beurteilung abhängig.

Farbpaar & AnalyseProt.Deut.Trit.Achrom.P-an.D-an.T-an.
Aa
■ #8FBADA auf ■ #A4B2C6
FAIL 1.05:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #204662
AA 4.62:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #3730A3 (text-indigo-800)
AA 4.62:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #343A40 (gray-800)
AA 5.35:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.05:1 FAIL
Deut.
Aa
1.0:1 FAIL
Trit.
Aa
1.05:1 FAIL
Achrom.
Aa
1.03:1 FAIL
P-an.
Aa
1.05:1 FAIL
D-an.
Aa
1.02:1 FAIL
T-an.
Aa
1.05:1 FAIL
Aa
■ #E7EDF2 auf ■ #E9EA8C
FAIL 1.07:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #496A86
AA 4.5:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #7E22CE (text-purple-700)
AA 5.52:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 5.22:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.07:1 FAIL
Deut.
Aa
1.07:1 FAIL
Trit.
Aa
1.08:1 FAIL
Achrom.
Aa
1.09:1 FAIL
P-an.
Aa
1.08:1 FAIL
D-an.
Aa
1.08:1 FAIL
T-an.
Aa
1.08:1 FAIL
Aa
■ #DDDD09 auf ■ #E9EA8C
FAIL 1.15:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #676704
AA 4.72:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #92400E (text-amber-800)
AA 5.61:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #B02A37 (danger-dark)
AA 5.14:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.15:1 FAIL
Deut.
Aa
1.14:1 FAIL
Trit.
Aa
1.21:1 FAIL
Achrom.
Aa
1.24:1 FAIL
P-an.
Aa
1.15:1 FAIL
D-an.
Aa
1.14:1 FAIL
T-an.
Aa
1.2:1 FAIL
Aa
■ #B0CBE0 auf ■ #DDDD09
FAIL 1.16:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #346185
AA 4.51:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #6D28D9 (text-violet-700)
AA 4.88:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 4.53:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.14:1 FAIL
Deut.
Aa
1.19:1 FAIL
Trit.
Aa
1.09:1 FAIL
Achrom.
Aa
1.07:1 FAIL
P-an.
Aa
1.15:1 FAIL
D-an.
Aa
1.18:1 FAIL
T-an.
Aa
1.1:1 FAIL
Aa
■ #8FBADA auf ■ #B0CBE0
FAIL 1.22:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #285779
AA 4.57:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #4338CA (text-indigo-700)
AA 4.69:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #495057 (gray-700)
AA 4.85:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.22:1 FAIL
Deut.
Aa
1.26:1 FAIL
Trit.
Aa
1.22:1 FAIL
Achrom.
Aa
1.23:1 FAIL
P-an.
Aa
1.22:1 FAIL
D-an.
Aa
1.24:1 FAIL
T-an.
Aa
1.22:1 FAIL
Aa
■ #E7EDF2 auf ■ #DDDD09
FAIL 1.23:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #416079
AA 4.54:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #7E22CE (text-purple-700)
AA 4.8:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 4.53:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.24:1 FAIL
Deut.
Aa
1.23:1 FAIL
Trit.
Aa
1.31:1 FAIL
Achrom.
Aa
1.35:1 FAIL
P-an.
Aa
1.24:1 FAIL
D-an.
Aa
1.23:1 FAIL
T-an.
Aa
1.3:1 FAIL
Aa
■ #B0CBE0 auf ■ #A4B2C6
FAIL 1.28:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #254760
AA 4.54:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #3730A3 (text-indigo-800)
AA 4.62:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #343A40 (gray-800)
AA 5.35:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.29:1 FAIL
Deut.
Aa
1.26:1 FAIL
Trit.
Aa
1.28:1 FAIL
Achrom.
Aa
1.27:1 FAIL
P-an.
Aa
1.28:1 FAIL
D-an.
Aa
1.27:1 FAIL
T-an.
Aa
1.28:1 FAIL
Aa
■ #B0CBE0 auf ■ #E9EA8C
FAIL 1.33:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #386A90
AA 4.57:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #6D28D9 (text-violet-700)
AA 5.62:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 5.22:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.31:1 FAIL
Deut.
Aa
1.37:1 FAIL
Trit.
Aa
1.32:1 FAIL
Achrom.
Aa
1.33:1 FAIL
P-an.
Aa
1.33:1 FAIL
D-an.
Aa
1.35:1 FAIL
T-an.
Aa
1.32:1 FAIL
Aa
■ #8FBADA auf ■ #DDDD09
FAIL 1.41:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #2D6189
AA 4.53:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #6D28D9 (text-violet-700)
AA 4.88:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 4.53:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.39:1 FAIL
Deut.
Aa
1.51:1 FAIL
Trit.
Aa
1.32:1 FAIL
Achrom.
Aa
1.32:1 FAIL
P-an.
Aa
1.4:1 FAIL
D-an.
Aa
1.47:1 FAIL
T-an.
Aa
1.34:1 FAIL
Aa
■ #E7EDF2 auf ■ #B0CBE0
FAIL 1.43:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #3A556C
AA 4.62:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #4338CA (text-indigo-700)
AA 4.69:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #495057 (gray-700)
AA 4.85:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.41:1 FAIL
Deut.
Aa
1.46:1 FAIL
Trit.
Aa
1.43:1 FAIL
Achrom.
Aa
1.45:1 FAIL
P-an.
Aa
1.43:1 FAIL
D-an.
Aa
1.45:1 FAIL
T-an.
Aa
1.43:1 FAIL
Aa
■ #DDDC00 auf ■ #FFFFFF
FAIL 1.47:1 [aus Element-Analyse] • große Schrift
<span> "PERSÖNLICHER TELEFONTERMIN"
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #777600
AA 4.8:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #B45309 (text-amber-700)
AA 5.02:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #DC3545 (danger)
AA 4.53:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.47:1 FAIL
Deut.
Aa
1.47:1 FAIL
Trit.
Aa
1.57:1 FAIL
Achrom.
Aa
1.61:1 FAIL
P-an.
Aa
1.47:1 FAIL
D-an.
Aa
1.47:1 FAIL
T-an.
Aa
1.54:1 FAIL
Aa
■ #DDDD09 auf ■ #A4B2C6
FAIL 1.48:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #454502
AA 4.64:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #374151 (text-gray-700)
AA 4.79:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #343A40 (gray-800)
AA 5.35:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.47:1 FAIL
Deut.
Aa
1.51:1 FAIL
Trit.
Aa
1.39:1 FAIL
Achrom.
Aa
1.36:1 FAIL
P-an.
Aa
1.47:1 FAIL
D-an.
Aa
1.5:1 FAIL
T-an.
Aa
1.4:1 FAIL
Aa
■ #8FBADA auf ■ #E9EA8C
FAIL 1.63:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #316A94
AA 4.59:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #6D28D9 (text-violet-700)
AA 5.62:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 5.22:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.61:1 FAIL
Deut.
Aa
1.72:1 FAIL
Trit.
Aa
1.6:1 FAIL
Achrom.
Aa
1.63:1 FAIL
P-an.
Aa
1.62:1 FAIL
D-an.
Aa
1.68:1 FAIL
T-an.
Aa
1.61:1 FAIL
Aa
■ #A4B2C6 auf ■ #E9EA8C
FAIL 1.7:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #526683
AA 4.63:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #7E22CE (text-purple-700)
AA 5.52:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #565E64 (secondary-dark)
AA 5.22:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.69:1 FAIL
Deut.
Aa
1.72:1 FAIL
Trit.
Aa
1.69:1 FAIL
Achrom.
Aa
1.69:1 FAIL
P-an.
Aa
1.7:1 FAIL
D-an.
Aa
1.72:1 FAIL
T-an.
Aa
1.69:1 FAIL
Aa
■ #E7EDF2 auf ■ #8FBADA
FAIL 1.74:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #31485B
AA 4.62:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #3730A3 (text-indigo-800)
AA 4.83:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #343A40 (gray-800)
AA 5.59:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.72:1 FAIL
Deut.
Aa
1.85:1 FAIL
Trit.
Aa
1.74:1 FAIL
Achrom.
Aa
1.77:1 FAIL
P-an.
Aa
1.74:1 FAIL
D-an.
Aa
1.81:1 FAIL
T-an.
Aa
1.74:1 FAIL
Aa
■ #A4B2C6 auf ■ #6D84A5
FAIL 1.78:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #151A22
AA 4.57:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #0F172A (text-slate-900)
AA 4.67:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #000000 (black)
AA 5.49:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.76:1 FAIL
Deut.
Aa
1.81:1 FAIL
Trit.
Aa
1.78:1 FAIL
Achrom.
Aa
1.8:1 FAIL
P-an.
Aa
1.76:1 FAIL
D-an.
Aa
1.79:1 FAIL
T-an.
Aa
1.78:1 FAIL
Aa
■ #E7EDF2 auf ■ #A4B2C6
FAIL 1.82:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #2F4658
AA 4.57:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #3730A3 (text-indigo-800)
AA 4.62:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #343A40 (gray-800)
AA 5.35:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.81:1 FAIL
Deut.
Aa
1.85:1 FAIL
Trit.
Aa
1.82:1 FAIL
Achrom.
Aa
1.84:1 FAIL
P-an.
Aa
1.83:1 FAIL
D-an.
Aa
1.85:1 FAIL
T-an.
Aa
1.82:1 FAIL
Aa
■ #8FBADA auf ■ #6D84A5
FAIL 1.86:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #0C1A25
AA 4.62:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #0F172A (text-slate-900)
AA 4.67:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #000000 (black)
AA 5.49:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.85:1 FAIL
Deut.
Aa
1.81:1 FAIL
Trit.
Aa
1.86:1 FAIL
Achrom.
Aa
1.86:1 FAIL
P-an.
Aa
1.85:1 FAIL
D-an.
Aa
1.83:1 FAIL
T-an.
Aa
1.86:1 FAIL
Aa
■ #1E5A90 auf ■ #6D84A5
FAIL 1.88:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #081A2A
AA 4.61:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #0F172A (text-slate-900)
AA 4.67:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #000000 (black)
AA 5.49:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
1.94:1 FAIL
Deut.
Aa
2.08:1 FAIL
Trit.
Aa
1.9:1 FAIL
Achrom.
Aa
2.04:1 FAIL
P-an.
Aa
1.95:1 FAIL
D-an.
Aa
2.0:1 FAIL
T-an.
Aa
1.9:1 FAIL
Aa
■ #B0CBE0 auf ■ #6D84A5
FAIL 2.27:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #0E1C26
AA 4.53:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #0F172A (text-slate-900)
AA 4.67:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #000000 (black)
AA 5.49:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
2.26:1 FAIL
Deut.
Aa
2.29:1 FAIL
Trit.
Aa
2.27:1 FAIL
Achrom.
Aa
2.28:1 FAIL
P-an.
Aa
2.26:1 FAIL
D-an.
Aa
2.27:1 FAIL
T-an.
Aa
2.27:1 FAIL
Aa
■ #DDDD09 auf ■ #6D84A5
FAIL 2.62:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Lösungsvorschläge:
💡 Helligkeit anpassen
Aa
■ #181801
AA 4.7:1
Originalfarbe wird heller/dunkler – bleibt farbnah
🎨 Tailwind CSS
Aa
■ #1C1917 (text-stone-900)
AA 4.58:1
Nächste konforme Tailwind-Farbe nach RGB-Ähnlichkeit
🅱 Bootstrap
Aa
■ #000000 (black)
AA 5.49:1
Nächste konforme Bootstrap-Farbe nach RGB-Ähnlichkeit
Prot.
Aa
2.58:1 FAIL
Deut.
Aa
2.73:1 FAIL
Trit.
Aa
2.47:1 FAIL
Achrom.
Aa
2.45:1 FAIL
P-an.
Aa
2.6:1 FAIL
D-an.
Aa
2.68:1 FAIL
T-an.
Aa
2.49:1 FAIL
⚠️

Warnung – Probleme bei Farbenblindheit (1)

Diese Farbpaare bestehen den normalen WCAG-Test, werden aber unter bestimmten Formen von Farbenblindheit kritisch (roter Rahmen in der CVD-Spalte). Betroffen sind ca. 8 % der männlichen Bevölkerung.

Farbpaar & AnalyseProt.Deut.Trit.Achrom.P-an.D-an.T-an.
Aa
■ #6D84A5 auf ■ #E9EA8C
AA-large 3.02:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
2.97:1 FAIL
Deut.
Aa
3.12:1
Trit.
Aa
2.99:1 FAIL
Achrom.
Aa
3.04:1
P-an.
Aa
3.0:1 FAIL
D-an.
Aa
3.07:1
T-an.
Aa
3.0:1
✅

Bestanden – Keine Probleme (15)

Diese Farbkombinationen sind WCAG-konform und zeigen auch unter Farbenblindheitssimulation keine wesentlichen Probleme.

Farbpaar & AnalyseProt.Deut.Trit.Achrom.P-an.D-an.T-an.
Aa
■ #E7EDF2 auf ■ #6D84A5
AA-large 3.24:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
3.19:1
Deut.
Aa
3.35:1
Trit.
Aa
3.24:1
Achrom.
Aa
3.3:1
P-an.
Aa
3.22:1
D-an.
Aa
3.3:1
T-an.
Aa
3.24:1
Aa
■ #1E5A90 auf ■ #A4B2C6
AA-large 3.34:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
3.42:1
Deut.
Aa
3.76:1
Trit.
Aa
3.37:1
Achrom.
Aa
3.66:1
P-an.
Aa
3.43:1
D-an.
Aa
3.58:1
T-an.
Aa
3.37:1
Aa
■ #1E5A90 auf ■ #8FBADA
AA-large 3.49:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
3.6:1
Deut.
Aa
3.76:1
Trit.
Aa
3.54:1
Achrom.
Aa
3.79:1
P-an.
Aa
3.61:1
D-an.
Aa
3.65:1
T-an.
Aa
3.53:1
Aa
■ #666666 auf ■ #000000
AA-large 3.66:1 [aus Element-Analyse]
<button> "1"
Prot.
Aa
3.65:1
Deut.
Aa
3.65:1
Trit.
Aa
3.61:1
Achrom.
Aa
3.66:1
P-an.
Aa
3.65:1
D-an.
Aa
3.65:1
T-an.
Aa
3.61:1
Aa
■ #1E5A90 auf ■ #B0CBE0
AA-large 4.27:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
4.4:1
Deut.
Aa
4.75:1
Trit.
Aa
4.3:1
Achrom.
Aa
4.65:1
P-an.
Aa
4.4:1
D-an.
Aa
4.55:1
T-an.
Aa
4.31:1
Aa
■ #1E5A90 auf ■ #DDDD09
AA 4.94:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
5.02:1
Deut.
Aa
5.67:1
Trit.
Aa
4.69:1
Achrom.
Aa
4.99:1
P-an.
Aa
5.06:1
D-an.
Aa
5.37:1
T-an.
Aa
4.72:1
Aa
■ #1E5A90 auf ■ #E9EA8C
AA 5.69:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
5.78:1
Deut.
Aa
6.48:1
Trit.
Aa
5.68:1
Achrom.
Aa
6.18:1
P-an.
Aa
5.83:1
D-an.
Aa
6.14:1
T-an.
Aa
5.69:1
Aa
■ #1E5A90 auf ■ #E7EDF2
AA 6.09:1 [Screenshot]
[aus Screenshot-Analyse]
🔍 Vorkommen im Screenshot   ■ Vordergrund ■ Hintergrund
Prot.
Aa
6.2:1
Deut.
Aa
6.95:1
Trit.
Aa
6.15:1
Achrom.
Aa
6.72:1
P-an.
Aa
6.28:1
D-an.
Aa
6.61:1
T-an.
Aa
6.15:1
Aa
■ #00477C auf ■ #EEEEEE
AAA 8.26:1 [aus Element-Analyse] • große Schrift
<span> "Datenschutz"
Prot.
Aa
8.71:1
Deut.
Aa
9.92:1
Trit.
Aa
8.29:1
Achrom.
Aa
9.65:1
P-an.
Aa
8.71:1
D-an.
Aa
9.26:1
T-an.
Aa
8.31:1
Aa
■ #00477C auf ■ #F2F3F8
AAA 8.64:1 [aus Element-Analyse] • große Schrift
<span> "Karriere"
Prot.
Aa
9.07:1
Deut.
Aa
10.33:1
Trit.
Aa
8.69:1
Achrom.
Aa
10.1:1
P-an.
Aa
9.07:1
D-an.
Aa
9.64:1
T-an.
Aa
8.73:1
Aa
■ #00477C auf ■ #F8F8F9
AAA 9.03:1 [aus Element-Analyse] • große Schrift
<span> "Die IT-Expertise für Gemeinden und K"
Prot.
Aa
9.52:1
Deut.
Aa
10.84:1
Trit.
Aa
9.1:1
Achrom.
Aa
10.55:1
P-an.
Aa
9.52:1
D-an.
Aa
10.12:1
T-an.
Aa
9.12:1
Aa
■ #00477C auf ■ #FFFFFF
AAA 9.58:1 [aus Element-Analyse] • große Schrift
<span> "Informationssicherheit und Datenschutz f"
Prot.
Aa
10.11:1
Deut.
Aa
11.51:1
Trit.
Aa
9.62:1
Achrom.
Aa
11.2:1
P-an.
Aa
10.11:1
D-an.
Aa
10.75:1
T-an.
Aa
9.64:1
Aa
■ #3C3C3B auf ■ #F2F3F8
AAA 9.97:1 [aus Element-Analyse]
<p> "Sie möchten die etwas andere Normen- und"
Prot.
Aa
9.91:1
Deut.
Aa
9.91:1
Trit.
Aa
10.02:1
Achrom.
Aa
10.1:1
P-an.
Aa
9.91:1
D-an.
Aa
9.91:1
T-an.
Aa
10.04:1
Aa
■ #3C3C3B auf ■ #F8F8F9
AAA 10.4:1 [aus Element-Analyse]
<p> "Zuverlässiger Datenschutz ist für Städte"
Prot.
Aa
10.41:1
Deut.
Aa
10.41:1
Trit.
Aa
10.49:1
Achrom.
Aa
10.55:1
P-an.
Aa
10.41:1
D-an.
Aa
10.41:1
T-an.
Aa
10.49:1
Aa
■ #3C3C3B auf ■ #FFFFFF
AAA 11.04:1 [aus Element-Analyse]
<a> "Zum Inhalt springen"
Prot.
Aa
11.05:1
Deut.
Aa
11.05:1
Trit.
Aa
11.09:1
Achrom.
Aa
11.2:1
P-an.
Aa
11.05:1
D-an.
Aa
11.05:1
T-an.
Aa
11.09:1
WCAG 2.1 Barrierefreiheitsprüfung · 05.05.2026 13:09 Uhr
Impressum Datenschutz