Warum verlangt WCAG 4.5:1 Kontrast?
Das ist der AA-Standard damit sehbehinderte Nutzer Text ohne Hilfsmittel lesen können.
Farbwähler
Farben auswählen und zwischen HEX, RGB, HSL konvertieren
Kontrastverhältnis
⬜ ⬛
Komplementärfarbe & Analoge Farbe
Farbwähler
HEX oder RGB in CSS?
HEX ist kompakter und häufiger. Verwenden Sie rgba() für Transparenz.
Wie implementiert man Dark-Mode-Farben?
Verwenden Sie CSS-Variablen mit @media (prefers-color-scheme: dark) zum Umschalten.
Farbcodes: HEX, RGB und HSL
HEX, RGB und HSL sind drei Methoden zur Darstellung von Farben auf Computern. HEX ist im Web am häufigsten, RGB verwendet Rot-Grün-Blau-Werte, HSL verwendet Farbton-Sättigung-Helligkeit.
Was ist das WCAG-Kontrastverhältnis?
Der WCAG-AA-Standard erfordert ein Kontrastverhältnis von mindestens 4.5:1 damit sehbehinderte Nutzer Text lesen können.
HSL: Das intuitive Farbmodell
HSL verwendet Farbton (0-360°), Sättigung (0-100%) und Helligkeit (0-100%) zur intuitiven Farbbeschreibung.
Komplementär- und Analogfarben
Komplementärfarben liegen 180° gegenüber und erzeugen hohen Kontrast. Analogfarben erzeugen harmonische Paletten.
Farbverwaltung mit CSS Custom Properties
CSS-Variablen zentralisieren die Farbverwaltung und erleichtern Theme-Wechsel und Dark Mode.
Häufig gestellte Fragen
HEX oder RGB in CSS?
HEX ist kompakter und häufiger. Verwenden Sie rgba() für Transparenz.
Warum verlangt WCAG 4.5:1 Kontrast?
Das ist der AA-Standard damit sehbehinderte Nutzer Text ohne Hilfsmittel lesen können.
Wie implementiert man Dark-Mode-Farben?
Verwenden Sie CSS-Variablen mit @media (prefers-color-scheme: dark) zum Umschalten.