Zum Inhalt springen
Unicorn Factory
Jetzt anfragen

Kostenloser Rechner · Barrierefreiheit

WCAG & APCA KontrastrechnerIst Ihre Schrift lesbar genug?

Exakt nach WCAG 2.2 und APCA, nie aufgerundet. Mit Vorschlägen, die Ihre Markenfarbe erhalten.

rgb(51 57 82) · oklch(35.03% 0.0445 273.52)

35,0 %

rgb(255 255 255) · oklch(100% 0 0)

100,0 %

Kontrastverhältnis

11,36:1

Erfüllt für Ihre Schrift sogar AAA.

Vorschau der Farben #333952 auf #FFFFFF.

Ihre Schrift, AA 4,5:1
✓ erfüllt
Ihre Schrift, AAA 7:1
✓ erfüllt
Bedienelemente, 3:1
✓ erfüllt
APCA
Lc 96,1
Befund mit Vorschlägen ansehen ↓Schrift #333952, Hintergrund #FFFFFF.
Ihre Schrift

Gilt nach WCAG als normale Schrift. Groß ist sie ab 24 px oder ab 18,66 px fett.

Aus der Praxis

  • Kostenlos
  • Ohne Anmeldung
  • Rechnet beim Tippen
  • Farben von Ihrer Website
Unicorn Factory · unicorn-factory.net · 4.10.2026

Befund · #333952 auf #FFFFFF

Ergebnis für #333952 auf #FFFFFF: Der Kontrast erfüllt sogar AAA.11,36:1.

#333952 auf #FFFFFF erreicht 11,36:1. 16 px in Gewicht 400 gilt als normale Schrift und braucht nach SC 1.4.3 mindestens 4,5:1. Auch nach APCA reicht es: Lc 96,1, nötig sind Lc 90.

Ihre Angabe
16 px, Gewicht 400Fließtext, gilt als normale Schrift
braucht 4,5:1: erfüllt
Normale Schrift, AA
4,5:1SC 1.4.3, unter 24 px
erfüllt
Große Schrift, AA
3:1SC 1.4.3, ab 24 px oder 18,66 px fett
erfüllt
Bedienelemente, Grafiken
3:1SC 1.4.11: Rahmen, Icons, Fokus
erfüllt
Normale Schrift, AAA
7:1SC 1.4.6
erfüllt
Große Schrift, AAA
4,5:1SC 1.4.6
erfüllt
APCA (Lesbarkeit)
Lc 96,1Dunkle Schrift auf hellem Grund. Stufe 90: Bevorzugt für Fließtext in Spalten: ab 14 px bei Gewicht 400 oder 18 px bei 300. Anderer Text ab 12 px.
reicht (ab Lc 90)

Vorschläge

Alle Ziele für Ihre Schrift sind erreicht. Wählen Sie ein strengeres Ziel, wenn Sie mögen.

Vorschau

So sehen andere Ihre Farben. Mit Farbsehschwäche nachgestellt.

Sehweise

Vorschau der Farben #333952 auf #FFFFFF.

So, wie die meisten Menschen die Farben sehen.

Kontrast hängt an der Helligkeit, deshalb ändert er sich hier meist wenig. Unterschiede in der Farbe selbst verschwinden dagegen: Kennzeichnen Sie Links, Fehler und Pflichtfelder nie nur über Farbe (SC 1.4.1). Simulation nach Machado, Oliveira und Fernandes (2009), eine Annäherung.

Farben für Ihren Code
Hex#333952 auf #FFFFFF
RGBrgb(51 57 82) auf rgb(255 255 255)
OKLCHoklch(35.03% 0.0445 273.52) auf oklch(100% 0 0)
CSS-Variablen--farbe-text: #333952; --farbe-grund: #FFFFFF;
Tailwindtext-[#333952] bg-[#FFFFFF]
So rechnet der Rechner
  • WCAG 2.0, 2.1 und 2.2 nutzen dieselbe Formel. Wir rechnen exakt und schneiden die Anzeige ab, statt zu runden. Das W3C schreibt dazu: 4,499:1 erreicht die Schwelle 4,5:1 nicht (Understanding SC 1.4.3).
  • Große Schrift heißt 18 pt (24 px) oder 14 pt fett. Das W3C nennt für 14 pt etwa 18,5 px; wir rechnen genauer mit 18,66 px und werten Gewicht 700 und mehr als fett.
  • Halbdurchsichtige Farben mischen wir wie der Browser über den Hintergrund und rechnen mit dem Ergebnis.
  • APCA 0.0.98G-4g mit den aktuellen Konstanten, auf Tausenden Farbpaaren gegen die Referenzbibliothek apca-w3 0.1.9 geprüft. Für Ihre Schrift gilt die niedrigste Stufe, deren Mindestgröße sie erreicht; Gewichte dazwischen zählen wie das nächstdünnere. Nebentext braucht Lc 30. Die Stufen und Größen stammen aus „APCA in a Nutshell“. APCA ist ein Entwurf für künftige Richtlinien und kein Rechtsmaßstab.
  • Vorschläge ändern nur die Helligkeit in OKLCH. Farbton und Buntheit bleiben, solange der Bildschirm die Farbe zeigen kann.
Was WCAG ausnimmt und was nicht
  • Ausgenommen sind Logos und Markennamen, deaktivierte Bedienelemente, reine Dekoration und Text in Fotos.
  • Nicht ausgenommen ist Platzhaltertext in Formularfeldern: Er braucht wie jeder Text 4,5:1 (W3C). Ebenso Text, der beim Überfahren mit der Maus oder im Fokus erscheint.
  • Rahmen von Eingabefeldern, Icons und Fokusrahmen brauchen 3:1 zu ihrer Umgebung (SC 1.4.11).
  • Seit dem 28.06.2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für Online-Shops und viele andere digitale Dienstleistungen für Verbraucher. Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten: weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme (§ 2 Nr. 17 BFSG). Maßstab für Websites ist die EN 301 549 und damit WCAG 2.1 Stufe AA. Stand 02.10.2026 laut Bundesfachstelle Barrierefreiheit. Mehr dazu in unserem Ratgeber zum Barrierefreiheitsgesetz.

Markenfarben

Welche Ihrer Farben passen zusammen?Alle Paare auf einen Blick.

Bis zu 8 Farben eingeben oder von Ihrer Website laden. Die Matrix zeigt jedes Paar als Schrift auf Hintergrund, mit WCAG-Stufe und APCA-Wert. Ein Klick übernimmt das Paar oben in den Rechner.

Getrennt durch Komma, Leerzeichen oder Zeilenumbruch. Jede Schreibweise wie oben.

Wir lesen die Seite mit ihren Stylesheets und zeigen, welche Schrift auf welchem Hintergrund steht.

Wenn es um die ganze Website geht

Kontrast ist eins von 50 Kriterien.

Wir prüfen und beheben den Rest mit.

Alle AA-Kriterien · Marke bleibt · BFSG im Blick
  • Alle AA-KriterienWCAG 2.1 Stufe AA umfasst 50 Erfolgskriterien: Kontraste, Tastatur, Formulare, Alternativtexte und mehr.
  • Marke bleibtWir passen Farben, Schriften und Bausteine an, ohne dass Ihre Website fremd aussieht.
  • BFSG im BlickSeit dem 28.06.2025 gilt das Barrierefreiheitsstärkungsgesetz auch für viele Online-Shops und Dienste für Verbraucher. Maßstab für Websites ist WCAG 2.1 Stufe AA.
Barrierefreiheit anfragen

Persönliche Antwort von Florian Konrad oder Daniel Haenle.

Ratgeber

Ratgeber: Kontrastrechner

Möchten Sie sicherstellen, dass Ihre Website für alle Nutzer gut lesbar ist? Unser WCAG & APCA Kontrastrechner prüft Ihre Farbkombinationen auf Barrierefreiheit – kostenlos, präzise und in Echtzeit.

Die Unicorn Factory unterstützt Sie nicht nur bei der Farbauswahl, sondern entwickelt auch komplette barrierefreie Webdesigns und führt umfassende Accessibility-Audits durch.

Weitere Informationen zur Barrierefreiheit im Web finden Sie in unserem ausführlichen Guide zur WCAG-Konformität und digitalen Inklusion

Wie funktioniert unser Kontrastrechner?

Wählen Sie einfach Ihre Vorder- und Hintergrundfarbe aus oder geben Sie die Hex-Codes direkt ein. Unser Tool zeigt Ihnen sofort:

  • WCAG 2.1 Kontrastverhältnis (z.B. 4.5:1)
  • APCA-Wert für WCAG 3.0 (Lc-Werte)
  • Live-Vorschau Ihrer Farbkombination
  • Erfüllung der Standards (AA/AAA für normale und große Schrift)
  • Automatische Farbextraktion von jeder Website

Diese Daten helfen Ihnen, barrierefreie Designs zu erstellen – ohne komplizierte Berechnungen oder technisches Vorwissen.

Warum sind Farbkontraste so wichtig?

15% der Weltbevölkerung leben mit einer Form von Behinderung. Viele davon betreffen das Sehvermögen:

  • Farbenblindheit
  • Sehschwäche
  • Altersbedingte Sehprobleme

Ein guter Farbkontrast sorgt dafür, dass alle Menschen Ihre Inhalte lesen können – unabhängig von ihren visuellen Fähigkeiten.

URL-Farbanalyse: Lernen Sie von anderen Websites

Unser Tool kann die Farben jeder Website extrahieren und nach Häufigkeit sortieren. So können Sie:

  • Erfolgreiche Farbschemata analysieren
  • Von großen Marken lernen
  • Ihre Konkurrenz untersuchen
  • Inspiration für eigene Projekte sammeln
Daniel HaenleErreichbar an: Montag, Dienstag, Mittwoch, Donnerstag, Freitag (jeweils zwischen 9 – 18 Uhr)Daniel HaenleGründer & Ihr Ansprechpartner

Erreichbar Montag–Freitag, 9–18 Uhr

Haben Sie Fragen oder benötigen Hilfe beim Thema „Kontrastrechner“?

Unsere Full-Service-Agentur steht Ihnen bei Fragen und der Umsetzung zur Seite. Zögern Sie nicht, uns zu kontaktieren: persönlich, nicht per Bot.

Jetzt einfach Kontakt aufnehmen

WCAG vs. APCA: Zwei Standards im Vergleich

WCAG 2.1 (Web Content Accessibility Guidelines)

  • Aktueller Standard für digitale Barrierefreiheit
  • Einfaches Verhältnis (z.B. 4.5:1)
  • Klare Grenzwerte: AA (gut) und AAA (exzellent)

APCA (Advanced Perceptual Contrast Algorithm)

  • Zukünftiger Standard (WCAG 3.0)
  • Berücksichtigt menschliche Wahrnehmung besser
  • Lc-Werte (Lightness Contrast)
  • Genauere Abstufungen je nach Schriftgröße

Häufige Fragen (FAQ)

Für normale Texte ist ein WCAG-Kontrastverhältnis von mindestens 4.5:1 (Level AA) erforderlich. Für optimale Barrierefreiheit empfehlen wir 7:1 (Level AAA). Bei APCA sollte der Lc-Wert mindestens 75 betragen.

Ein APCA Lc-Wert von 60 bedeutet, dass der Kontrast für Schriftgrößen ab 16px ausreichend ist (Level AA). Je höher der Lc-Wert, desto besser der Kontrast. Lc 90+ gilt als exzellent für alle Schriftgrößen.

Ja! Geben Sie einfach Ihre URL in das Feld „Farben von URL extrahieren“ ein. Unser Tool analysiert Ihre Website und zeigt die meistgenutzten Farben an. Mit einem Klick können Sie diese als Vorder- oder Hintergrund testen.

Ja, unser Tool steht Ihnen vollständig kostenlos zur Verfügung. Sie können beliebig viele Farbkombinationen testen und URLs analysieren.

Farbkontrast ist ein wichtiger Baustein, aber nicht alles. Für vollständige Barrierefreiheit müssen auch Alternativtexte, Tastaturnavigation, Screenreader-Kompatibilität und vieles mehr beachtet werden. Die Unicorn Factory bietet umfassende Barrierefreiheits-Audits an.

Unser Service: Barrierefreies Webdesign von A bis Z

Die Unicorn Factory Media GmbH ist Ihr Partner für digitale Barrierefreiheit:

  • Accessibility-Audits Ihrer bestehenden Website
  • Barrierefreie Redesigns nach WCAG 2.1 AA/AAA
  • Schulungen für Ihr Team
  • Fortlaufende Überwachung der Barrierefreiheit
  • Zertifizierung Ihrer Website

Warum Barrierefreiheit sich lohnt:

  • Größere Zielgruppe: Erreichen Sie 15% mehr potenzielle Kunden
  • Besseres SEO: Google bevorzugt barrierefreie Websites
  • Rechtssicherheit: Ab 2025 Pflicht für viele Unternehmen
  • Imageverbesserung: Zeigen Sie soziale Verantwortung
Daniel HaenleErreichbar an: Montag, Dienstag, Mittwoch, Donnerstag, Freitag (jeweils zwischen 9 – 18 Uhr)Daniel HaenleGründer & Ihr Ansprechpartner

Erreichbar Montag–Freitag, 9–18 Uhr

Haben Sie Fragen oder benötigen Hilfe beim Thema „Kontrastrechner“?

Unsere Full-Service-Agentur steht Ihnen bei Fragen und der Umsetzung zur Seite. Zögern Sie nicht, uns zu kontaktieren: persönlich, nicht per Bot.

Jetzt einfach Kontakt aufnehmen

Best Practices für barrierefreie Farbwahl

  1. Testen Sie früh und oft: Prüfen Sie Farben bereits in der Designphase
  2. Verlassen Sie sich nicht nur auf Farbe: Nutzen Sie zusätzliche Kennzeichnungen
  3. Beachten Sie den Kontext: Links sollten sich deutlich vom Text abheben
  4. Denken Sie an Dark Mode: Testen Sie beide Varianten
  5. Prüfen Sie echte Inhalte: Nicht nur Beispieltexte

Was sind nun die nächsten Schritte?

Mit unserem WCAG & APCA Kontrastrechner und der Expertise der Unicorn Factory Media GmbH schaffen Sie Websites, die wirklich für alle zugänglich sind. Barrierefreiheit ist keine Option mehr – sie ist eine Notwendigkeit und eine Chance, Ihre Reichweite zu vergrößern.

Starten Sie jetzt: Testen Sie Ihre Farben mit unserem Tool und kontaktieren Sie uns für eine umfassende Barrierefreiheits-Strategie.

Daniel HaenleErreichbar an: Montag, Dienstag, Mittwoch, Donnerstag, Freitag (jeweils zwischen 9 – 18 Uhr)Daniel HaenleGründer & Ihr Ansprechpartner

Erreichbar Montag–Freitag, 9–18 Uhr

Haben Sie Fragen oder benötigen Hilfe beim Thema „Kontrastrechner“?

Unsere Full-Service-Agentur steht Ihnen bei Fragen und der Umsetzung zur Seite. Zögern Sie nicht, uns zu kontaktieren: persönlich, nicht per Bot.

Jetzt einfach Kontakt aufnehmen

Die Unicorn Factory Media GmbH ist Ihr Partner für barrierefreies Webdesign, digitale Strategien und nachhaltige Online-Erfolge. Kontaktieren Sie uns für Ihre individuelle Lösung.

5/5 · 2 Bewertungen
War dieser Beitrag hilfreich?
Florian Konrad

Florian Konrad

Gründer und Digitalisierungs-Experte

Florian Konrad, Mitbegründer und Geschäftsführer der Unicorn Factory, begann bereits in der Schule mit Webentwicklung und Online-Marketing. Mit Jahren der Erfahrung hat er umfassende Expertise in SEO, Automatisierung und Webentwicklung entwickelt.

Alle Beiträge

Weitere Werkzeuge

Website-Farben ExtraktorLiest die Markenfarben einer Website nach Rolle aus, mit Kontrast nach WCAG und Export für CSS und Tailwind.Farbpaletten GeneratorFarbpaletten in OKLCH mit Rollen, Abstufungen und Kontrastprüfung. Export für CSS, Tailwind und JSON.Font CheckerWelche Schriften lädt eine Website wirklich? Herkunft, Schnitte, Dateigröße und Datenschutz auf einen Blick.Google Fonts CheckerLädt eine Website Schriften von Google? Startseite und Unterseiten geprüft, mit Fundstelle und fertiger Lösung.Favicon GeneratorFavicon-Paket aus Initialen, Emoji oder Logo: ICO, SVG, Apple- und Android-Icons und Manifest als ZIP.Website AnalyseIndexierung, SEO-Grundlagen, Technik und Sicherheit in Sekunden geprüft, mit Punktwert je Bereich.
Alle Werkzeuge ansehen →

Barrierefrei werden, ohne die Marke zu verbiegen?Wir prüfen und setzen es um.

Barrierefreiheit anfragen