Wählen Sie schwarzen oder weißen Text für Hex-Farben
Die Wahl hängt von der relativen Leuchtdichte ab und nicht davon, ob ein Hex-Wert subjektiv hell aussieht. In der Beispielpalette passt der orangefarbene Akzent stärker zu Schwarz, während das dunkle Marineblau stärker zu Weiß passt. Die Tabelle gibt die Gewinnquote für jedes Muster an, anstatt einen Schwellenwert auf jedes Muster anzuwenden.
Benutzerdefinierte CSS-Eigenschaften
Eine Farbvariable und eine vorgeschlagene Textfarbvariable pro Token innerhalb eines :root-Blocks.
Strukturierte Palette JSON
Namen, kanonische Hex- und RGB-Werte, relative Luminanz, vorgeschlagener schwarzer oder weißer Text und sein Kontrastverhältnis.
Jede Palettenfarbe
| navy | #1f2937 | 31, 41, 55 | 0,02 | #ffffff | 14,68 |
| orange | #ea980e | 234, 152, 14 | 0,4 | #000000 | 9 |
| cloud | #f8fafc | 248, 250, 252 | 0,95 | #000000 | 20,07 |
| forest | #16803a | 22, 128, 58 | 0,16 | #ffffff | 5,02 |
Die Ergebnisse werden ohne Gewähr für ihre Richtigkeit bereitgestellt. Die Methode und ihre Quellen stehen unten, damit Sie den Rechenweg prüfen können.
sRGB-Kanäle werden linearisiert, bevor ihre gewichtete Luminanz addiert wird, sodass die Mittelung der codierten Rot-, Grün- und Blauwerte zu einem falschen Ergebnis führt.
Der Kontrast ist die hellere Luminanz plus 0,05 geteilt durch die dunklere Luminanz plus 0,05.
Das exportierte CSS ordnet jedes Farbfeld seinem individuell gemessenen schwarzen oder weißen Texttoken zu.
So funktioniert es
So wird es gemacht
- Analysieren Sie einen Namen plus eine undurchsichtige drei- oder sechsstellige Hexadezimalfarbe pro nicht leerer Zeile und erweitern Sie die Kurzschrift auf kanonische sechsstellige RGB-Kleinbuchstaben.
- Normalisieren Sie Namen und Präfixe auf ASCII-Kebab-Kleinbuchstaben und fügen Sie die Suffixe -2, -3 und höher hinzu, anstatt doppelte Token zu überschreiben.
- Linearisieren Sie jeden codierten sRGB-Kanal, kombinieren Sie die relative Luminanz mit den WCAG-Gewichten und vergleichen Sie den resultierenden Kontrast mit Schwarz und Weiß.
- Exportieren Sie eine benutzerdefinierte Farb- und Textvorschlagseigenschaft pro Token in CSS und mit denselben Werten, Kanälen, derselben Luminanz und demselben Verhältnis wie strukturiertes JSON.
Wovon es ausgeht
- Jede eingegebene Farbe ist deckend. Alpha-Farben werden abgelehnt, da ihr angezeigter Kontrast von einer nicht genannten Oberfläche darunter abhängt.
- Die gemeldete Textauswahl dient lediglich dem Vergleich
- Ein höheres gemessenes Verhältnis allein macht eine vollständige Komponente nicht zugänglich; Schriftgröße, Gewicht, Status, Fokus, Nicht-Text-Hinweise und tatsächlich wiedergegebene Farben sind weiterhin wichtig.
- Hexadezimalwerte werden als sRGB interpretiert und den exportierten Tokens ist kein ICC-Profil oder Wide-Gamut-Farbraum zugeordnet.
Fragen
Entspricht der höhere Wert von Schwarz oder Weiß immer dem normalen Textkontrast?
Bei einer undurchsichtigen sRGB-Farbe führt eines der beiden Extreme zu einem Verhältnis von etwas mehr als 4,5 oder besser, andere Zugänglichkeitsfaktoren wie Schriftstärke und Zustandsmerkmale sind jedoch weiterhin von Bedeutung.
Warum werden transparente Hexfarben abgelehnt?
Der Kontrast einer transparenten Farbe hängt von der Oberfläche dahinter ab. Durch die Anforderung eines undurchsichtigen Farbfelds bleibt das gemeldete Verhältnis eine Eigenschaft des eingegebenen Paares und keine unausgesprochene Hintergrundannahme.
Quellen
Die vollständige Methode, das Rechenbeispiel und alle Annahmen hinter diesem Ergebnis stehen auf Farbpalettendatei-Ersteller.