amselrehhase – form is function | kontakt@amselrehhase.de

Farb­check

Farb­kon­trast prüfen und bar­rie­re­freie Farb­kom­bi­na­tio­nen finden

Mit diesem Tool können Sie Farb­kon­traste nach den Vor­ga­ben der WCAG (Web Con­tent Acces­si­bi­lity Gui­de­lines) über­prü­fen und pas­sende, bar­rie­re­freie Farb­kom­bi­na­tio­nen erzeu­gen. Sie können ent­we­der zwei Farben direkt mit­ein­an­der ver­glei­chen oder eine Basis­farbe wählen, zu der auto­ma­tisch kon­trast­rei­che Farben nach Har­mo­nie­regeln vor­ge­schla­gen werden.

Der Farb­kon­trast wird als Ver­hält­nis ange­ge­ben, etwa 4.5:1 oder 7:1. Je höher der Wert, desto besser ist die Les­bar­keit, ins­be­son­dere für Men­schen mit Sehbeeinträchtigungen.

Farb­kon­trast und bar­rie­re­freie Farbvorschläge

Sie können zwei Farben gegen­ein­an­der testen. Oder Sie wählen eine Basis­farbe und anschlie­ßend zeigt das Tool Farb­vor­schläge nach Farb­re­geln, die zur Basis­farbe einen bar­rie­re­freien Kon­trast erreichen. 

Zwei Farben testen


Großer Bei­spiel­text
Dies ist ein Bei­spiel für nor­ma­len Copy­text mit gewähl­tem Kontrast.

Bar­rie­re­freie Farbvorschläge

1. Basis­farbe wählen

Wählen Sie eine Basis­farbe. Anschlie­ßend zeigt das Tool Farb­vor­schläge nach Farb­re­geln, die zur Basis­farbe einen bar­rie­re­freien Kon­trast errei­chen. Zusätz­lich werden immer Schwarz und Weiß als ein­fa­che Kon­trast­far­ben angezeigt. 

Erlaubt sind Werte wie #ffba00 oder ffba00.
Basis­farbe: #FFBA00

2. Farb­vor­schläge nach Farbregeln

Wenn mög­lich, werden Farb­töne mit min­des­tens 7:1 Kon­trast zur Basis­farbe gezeigt. Wenn das rech­ne­risch nicht mög­lich ist, zeigt das Tool einen nächst­mög­li­chen oder best­mög­li­chen Farbton. 

Ist die rich­tige Farbe für Ihr Pro­jekt dabei? Gratulation!

Wenn Sie keine pas­sende Farbe in den Vor­schlä­gen finden, gibt es auch andere Wege neben den Har­mo­nie­regeln. Der Kon­trast sollte aber in jedem Fall den WCAG ent­spre­chen. Der Kon­trast für Copy­text ist min­des­tens 7:1, für grö­ße­ren Text 4,5:1.

Was bedeu­ten AA und AAA?

Die WCAG defi­nie­ren zwei wich­tige Kon­trast­stu­fen: AA und AAA

AA (min­des­tens 4.5:1)

Dies ist der emp­foh­lene Min­dest­stan­dard für nor­ma­len Fließ­text. Er stellt sicher, dass Inhalte für die meis­ten Men­schen gut lesbar sind, und ist in vielen Fällen gesetz­lich rele­vant.

AAA (min­des­tens 7:1)

Dies ist der höchste Stan­dard. Er bietet eine beson­ders gute Les­bar­keit und ist vor allem bei anspruchs­vol­len Anwen­dun­gen, älteren Ziel­grup­pen oder ungüns­ti­gen Licht­ver­hält­nis­sen sinn­voll. Für großen Text (ab ca. 18 pt bzw. 24 px oder fett ab 14 pt) gelten nied­ri­gere Anforderungen: 
  • AA: 3:1
  • AAA: 4.5:1

Wann gilt wel­cher Kontrast?

  • Fließ­text und kleine Schrift­grö­ßen: AA oder besser AAA erforderlich

  • Große Über­schrif­ten: gerin­gere Kon­traste zulässig

  • Wich­tige Inhalte, For­mu­lare, Navi­ga­tion: mög­lichst AAA anstreben

„Wir sind doch Kleinstunternehmen, oder?“ Diesen Satz höre ich beim BFSG manchmal und oft ohne belastbare Zahlen dahinter. Wenn du prüfen willst, ob du dich auf die Kleinstunternehmens-Ausnahme berufen kannst, brauchst du im Kern zwei Dinge: ehrliche Mitarbeiterzahlen und echte Finanzdaten. 1. Mitarbeitende richtig zählen Es geht nicht nur um „Köpfe“, sondern um Vollzeitäquivalente: Vollzeit = 1 Teilzeit, Minijob, Werkstudis = anteilig Geschäftsführung zählt mit Externe Freelancer:innen zählen in der Regel nicht als Beschäftigte Ergebnis: Liegt dein rechnerischer Wert bei weniger als 10 Beschäftigten, passt Kriterium Nummer eins. 2. Umsatz/Bilanzsumme im Blick Dann schaust du dir das letzte abgeschlossene Geschäftsjahr an: Jahresumsatz oder Jahresbilanzsumme Grenze: maximal 2 Mio. Euro Wichtig: Einmal darüber kann bedeuten, dass du künftig nicht mehr als Kleinstunternehmen giltst, also regelmäßig prüfen und mit dem Steuerbüro sprechen. Nur wenn beide Bedingungen gleichzeitig erfüllt sind, fällst du unter die BFSG-Ausnahme für Kleinstunternehmen im Dienstleistungsbereich. Bist du darüber, gilt: Willkommen in der vollen Barrierefreiheitspflicht. Und wie immer: Auch wenn du formal ausgenommen bist, barrierefrei ist kein Luxus, sondern gute Usability für alle. Wenn du willst, kann ich in einem weiteren Beitrag einmal typische Rechenbeispiele (Agentur, kleiner Online-Shop, Praxis, Solo-Selbstständige) durchspielen. #BFSG #KMU #DigitaleBarrierefreiheit Illustration zum BFSG: eine Checkliste mit Paragrafenzeichen und Symbol für Barrierefreiheit. Schwarz auf gelbem Hintergrund.

Für wen gelten die Anfor­de­run­gen im BFSG?

Die Anfor­de­run­gen des BFSG gelten bran­chen­über­grei­fend für Unter­neh­men, die bestimmte bar­rie­re­frei­heits­re­le­vante Pro­dukte oder Dienst­leis­tun­gen für Ver­brau­cher anbie­ten, etwa Hard­ware, Soft­ware und digi­tale Dienste. Aus­nah­men gibt es nur für bestimmte Kleinst­unter­nehmen, die Dienst­leis­tun­gen erbrin­gen (weni­ger als 10 Beschäftigte und höchs­tens 2 Mil­lio­nen Euro Jah­res­um­satz). Aber was bedeu­tet das für unsere Kunden? 

Im Prin­zip müssen alle digi­ta­len Ver­öf­fent­li­chun­gen barriere­frei sein, also auch PDFs, die zum Down­load ange­bo­ten werden. 

Von optio­nal zu Pflicht und Qualitätsmerkmal

Ursprüng­lich ver­stand man Acces­si­bi­lity im Web vor allem als frei­wil­lige Ver­bes­se­rung, oft getrie­ben von ein­zel­nen enga­gier­ten Entwickler:innen. Heute ist digi­tale Barriere­freiheit recht­lich ver­an­kert, in vielen Bran­chen ver­pflich­tend und wird zugleich als Teil guter User Expe­ri­ence, Mar­ken­ver­ant­wor­tung und Such­ma­schi­nen­freund­lich­keit gesehen.

Unser Ser­vice

  • Wir bera­ten Sie zu bar­rie­re­freien Web­sei­ten und Dokumenten.
  • Wir setzen diese auch gerne für Sie um. 
  • Wir unter­stüt­zen Sie bei der Pla­nung und Ent­wick­lung der Inhalte und Formate.

Schrei­ben Sie uns ein­fach per E‑Mal an: kontakt@amselrehhase.de

Blog

In unse­rem Blog schrei­ben wir über digi­tale Barriere­freiheit und geben Tipps dazu. Schauen Sie mit uns hinter die Kulis­sen. Viel Ver­gnü­gen beim Lesen! Alle Bei­träge finden Sie auf unse­rer Blog-Seite.

Barriere­freiheit beginnt vor dem Semi­nar: Mit einem kurzen Fra­ge­bo­gen erfas­sen wir Bedarfe und schaf­fen bes­sere Lern­be­din­gun­gen für alle Teilnehmenden.

Unser Farbkontrast-Tool hilft dir, bar­rie­re­freie Farb­kom­bi­na­tio­nen zu finden und nach WCAG (AA/AAA) zu prüfen – für bes­sere Les­bar­keit im Web.

Die Wei­ter­bil­dung zum Frontend-Entwickler strei­chen wir aus dem Port­fo­lio, weil das bald alles die KI macht.“ Dieser Satz klingt modern, ist aber das Gegen­teil und eher eine Ein­la­dung zur Qua­li­fi­ka­ti­ons­lü­cke. KI ver­än­dert Frontend-Entwicklung, aber sie macht sie nicht über­flüs­sig. Ent­schei­dend wird, wer beides kann: Front­end und KI.

Warum wir?

Wir gehen den Weg zur digi­ta­len Barriere­freiheit schon eine Weile, getreu unse­rem Motto form is func­tion”. Mit dem Lan­des­pro­gramm Men­to­ring, einem Pro­jekt der Ber­li­ner Senats­ver­wal­tung, hatten wir 2013 begon­nen, das Cor­po­rate Design, die Programm-Webseite und Doku­mente barriere­frei umzu­set­zen. Damals kann­ten wir weder den PAC noch Prüf­t­ools für Web­sei­ten. Die IT der Senats­ver­wal­tung fun­gierte als Prüf­stelle. Schritt für Schritt hatten wir uns damals in das für uns neue Thema ein­ge­ar­bei­tet und uns inzwi­schen eine Exper­tise zu diesem Thema aufgebaut. 

Seit­dem haben wir in vielen Pro­jek­ten Erfah­run­gen sam­meln können und Lösun­gen ent­wi­ckelt. Digi­tale Barriere­freiheit liegt uns am Herzen! 

Kon­takt

Buchen Sie uns!

Sie möchten Inhalte, die wirk­lich ver­stan­den und genutzt werden? Ihre Web­site, Ser­vices oder Mate­ria­lien sollen Men­schen besser durch den Alltag mit Ver­wal­tung, Bil­dung oder Unter­neh­men beglei­ten? Sie haben viele Inhalte, aber es fühlt sich bisher nicht rund an?

Schrei­ben Sie uns! Wir unter­stüt­zen Sie dabei, Ihre Ange­bote klar zu struk­tu­rie­ren und nut­zer­freund­lich umzu­set­zen. Von ein­zel­nen Pro­jek­ten bis Full-Service – wir sind gerne Part­ner an Ihrer Seite.

Fragen Sie uns mit einer  E‑Mail!

Sie tele­fo­nie­ren lieber? Kein Pro­blem. Rufen Sie uns an: +49 30 29770366

Ver­ein­fachte Zusammenfassung

Unser Farbkontrast-Tool hilft dir, bar­rie­re­freie Farb­kom­bi­na­tio­nen zu finden und nach WCAG (AA/AAA) zu prüfen – für bes­sere Les­bar­keit im Web.