Farbwerkzeuge FREE
Farben, Paletten, Skalen und Verläufe wählen, umrechnen und erzeugen - mit WCAG-Kontrast, barrierefreien Vorschlägen und Farbsinn-Simulation. Alles wird in Ihrem Browser berechnet.
Wähler und Umrechnung
Alle Schreibweisen
Technische Angaben
Kontrast
APCA (Entwurf, zusätzliche Information)
APCA ist das perzeptuelle Kontrastmodell, das für WCAG 3 entworfen wurde. Es ist heute keine Konformitätsanforderung und weicht von WCAG 2 in beide Richtungen ab, deshalb steht es hier als zusätzliche Information und nie als Bestanden oder Durchgefallen.
So sieht es aus
Paletten
Welche Paare lesbar sind
Jede Farbe als Text auf jeder anderen. Die Zahl ist das WCAG-Kontrastverhältnis; AA sind 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente.
Palette kopieren
Skalen
Elf Stufen, in OKLCH gebaut, damit die Sprünge gleichmäßig aussehen und nicht bloß gleichmäßige Zahlen sind. Das Ergebnis ist so geformt, dass es dorthin passt, wo ein Utility-Framework eine Skala erwartet; es ist die Reihe dieses Werkzeugs und die Palette keines Frameworks.
Reihe anpassen
Verläufe
Aus einem Bild
Bild hierher ziehen oder auswählen
Es wird in diesem Tab gelesen und niemals hochgeladen. Nichts bleibt zurück, wenn Sie die Seite verlassen.
Farbsehen
Ein Modell dessen, was ein Farbpaar unter den häufigen Formen der Farbenblindheit verliert, berechnet mit der Projektion nach Vienot, Brettel und Mollon. Es ist eine Simulation und keine Fotografie dessen, was eine bestimmte Person sieht.
Paare, die nicht mehr unterscheidbar sind
Aus der Palette entnommen. Aufgeführt werden nur Paare, die sich im normalen Sehen deutlich unterscheiden - zwei Farben, die schon jetzt ähnlich aussehen, sind eine Gestaltungsentscheidung und kein Befund.
Jede Umrechnung, jede Palette und jeder Kontrastwert auf dieser Seite wird in Ihrem Browser berechnet. Ein hierher gezogenes Bild wird auf einem Canvas in diesem Tab gelesen und niemals hochgeladen.
Was diese Zahlen bedeuten und was nicht
Hier berechnet, aus veröffentlichten Formeln
Die Umrechnungen folgen CSS Color Level 4, einschließlich der echten sRGB-Übertragungskurve statt einer Näherung, und der Kontrast folgt der Definition aus WCAG 2.2. Ein Farbpaar, das die Kontrastanforderung erfüllt, macht eine Seite nicht barrierefrei: Kontrast ist ein Erfolgskriterium unter vielen, und dieses eine misst das Werkzeug. Alles läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
FAQ
Werden meine Farben oder Bilder irgendwohin gesendet?
Nein. Jede Umrechnung, jede Palette, jede Skala und jeder Kontrastwert wird in diesem Tab berechnet. Ein Bild wird hier auf einem Canvas gelesen und niemals hochgeladen; zuletzt verwendete Farben und Ihre Palette liegen im Speicher dieses Browsers, und beides können Sie löschen.
Warum OKLCH statt HSL?
Weil die Helligkeit in HSL ein Mittelwert der Kanäle ist und nicht das, was das Auge misst. Drehen Sie einen Farbton in HSL um 120 Grad, wirkt eines der drei Ergebnisse sichtbar dunkler als die anderen; in OKLCH lesen sich die drei als eine Familie. Dasselbe gilt für eine Tonwertreihe: gleich große Schritte der HSL-Helligkeit drängen sich an den Enden. HSL wird trotzdem angezeigt, weil sehr viel Code darin geschrieben ist.
Ist meine Seite barrierefrei, wenn sie die Kontrastprüfung besteht?
Nein, und die Formulierungen hier sind darin genau. Ein Farbpaar erfüllt eine Kontrastanforderung. Kontrast ist ein Erfolgskriterium unter vielen - Fokusreihenfolge, Beschriftungen, Tastaturwege, Bewegung und Struktur sind jeweils eigene - und eine Seite mit perfektem Kontrast kann trotzdem unbrauchbar sein. Klären Sie damit die Farbfrage, nicht die ganze Frage.
Was ist APCA und warum steht es in einem eigenen Bereich?
Es ist das perzeptuelle Kontrastmodell, das für WCAG 3 entworfen wurde. Es bildet ab, wie Kontrast bei einer bestimmten Größe und Strichstärke tatsächlich wirkt, was WCAG 2 nicht tut - aber es ist ein Entwurf und heute wird nichts daran gemessen. Es gleichrangig neben die WCAG-Urteile zu stellen würde beide falsch darstellen, also steht es hinter einer Aufklappfläche und sagt, was es ist.
Wie genau ist die Farbfehlsichtigkeits-Simulation?
Es ist die Projektion nach Vienot, Brettel und Mollon, angewandt in linearem Licht, das übliche Verfahren zur Modellierung von Dichromasie. Sie zeigt, was ein FarbPAAR verliert, und das ist die Frage, auf die es ankommt: ob zwei Dinge noch unterscheidbar bleiben. Sie ist ein Modell einer Form der Sehschwäche, keine Fotografie dessen, was eine bestimmte Person sieht - und sagt das im Bereich auch.
Lässt sich die erzeugte Skala in meine Framework-Konfiguration einfügen?
Ja - der Export enthält eine Form, die dorthin passt, wo ein Utility-Framework eine Farbskala erwartet, daneben CSS Custom Properties, SCSS-Variablen und JSON. Die Reihe stammt von diesem Werkzeug, in OKLCH aus der von Ihnen angegebenen Farbe aufgebaut; sie ist die Palette keines Frameworks und wird auch nicht als solche ausgegeben.
Bau ein besseres Web, schneller.
Wir entwickeln individuelle Software und Lösungen, die auf Ihre Bedürfnisse zugeschnitten sind.




