Eine Palette, die Sie überprüfen, versenden und wieder verwenden können
Verwandeln Sie benannte undurchsichtige Hex-Farben in kollisionssichere benutzerdefinierte CSS-Eigenschaften und strukturiertes JSON, wobei für jedes Farbfeld die relative Luminanz von WCAG und der stärkere schwarze oder weiße Text gemessen wird.
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
| ink | #1f2937 | 31, 41, 55 | 0,02 | #ffffff | 14,68 |
| paper | #f8fafc | 248, 250, 252 | 0,95 | #000000 | 20,07 |
| accent | #ea980e | 234, 152, 14 | 0,4 | #000000 | 9 |
| success | #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.
So funktioniert es
Die relative Leuchtdichte ist keine durchschnittliche Helligkeit
Für jeden Kanal werden die beiden Hex-Ziffern in eine Zahl von 0 bis 255 umgewandelt, durch 255 geteilt und linearisiert:
linear(c) = c / 12.92 when c <= 0.04045
linear(c) = ((c + 0.055) / 1.055) ^ 2.4 otherwise
L = 0.2126 R + 0.7152 G + 0.0722 B
Grün trägt mehr zur relativen Leuchtdichte bei als Blau, und die Linearisierung bedeutet, dass zwei codierte Kanalwerte vor der Berechnung nicht gemittelt werden können. Das Kontrastverhältnis für zwei Leuchtdichten beträgt (lighter + 0.05) / (darker + 0.05).
Das Tool berechnet dieses Verhältnis einmal mit Schwarz bei der Luminanz 0 und einmal mit Weiß bei der Luminanz 1. Der größere Wert wird zum vorgeschlagenen Text-Token.
Die Standardpalette
| Token | Verhexen | Bester Text | Kontrastverhältnis |
|---|---|---|---|
| Tinte | #1f2937 | Weiß | 14.6791 |
| Papier | #f8fafc | Schwarz | 20.0712 |
| Akzent | #ea980e | Schwarz | 8,9961 |
| Erfolg | #16803a | Weiß | 5.0205 |
Die Überschriftenausgaben sind 4 Farben, 2 mit hellem Text, 0 umbenannte Token und ein niedrigstes Verhältnis des besten Textes von 5,02 nach der Rundung der Anzeige. Dieses Minimum gehört zu success; Es handelt sich nicht um einen Durchschnitt der gesamten Palette.
Was die Dateien enthalten
Der CSS-Download hält die Paarung nahe an der Farbe:
:root {
--brand-ink: #1f2937;
--brand-ink-text: #ffffff;
}
Der JSON-Download enthält das kanonische Hex, ganzzahlige RGB-Kanäle, die relative Luminanz, den vorgeschlagenen Text und das ungerundete Kontrastverhältnis zur Anzeige. Dreistellige Hexadezimalzahlen wie #abc werden in beiden Dateien zu #aabbcc, sodass nachgeschaltete Verbraucher nicht zwei Schreibweisen unterstützen müssen.
Bei CSS-Namen benutzerdefinierter Eigenschaften wird die Groß-/Kleinschreibung beachtet. Durch die Normalisierung aller eingegebenen Namen auf eine ASCII-Kabab-Konvention wird verhindert, dass --brand-Ink und --brand-ink wie dasselbe Token aussehen, sich aber wie unterschiedliche Eigenschaften verhalten.
Was das Ergebnis nicht bescheinigt
Das Normaltextziel von WCAG ist eine Eigenschaft eines tatsächlichen Vordergrunds und Hintergrunds, wie er gerendert wird. Eine Token-Datei kann nicht wissen, ob Text groß, fett, deaktiviert, über einem Farbverlauf platziert, mit Deckkraft gemischt oder beim Bewegen des Mauszeigers geändert wird. Es kann auch keine Fokussichtbarkeit oder nichtfarbige Statushinweise ersetzen.
Behandeln Sie die gepaarte Variable als einen gemessenen starken Standardwert und testen Sie dann die reale Komponente. Verwenden Sie den PNG-zu-JPEG-Konverter nur für Dateiformatarbeiten; Durch das Ändern eines Bildcontainers wird dessen eingebetteter Text nicht zugänglich gemacht.
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
Ist Schwarz oder Weiß immer die bessere Textfarbe?
Einer von ihnen hat immer das höhere Verhältnis zu einer deckenden Farbe, und das Tool meldet den gemessenen Gewinner. „Besser“ bedeutet hier nur Kontrast; Markenbeschränkungen und der Rest der Komponente müssen noch überprüft werden.
Warum nicht die roten, grünen und blauen Zahlen mitteln?
Hex-Kanäle sind gammakodierte sRGB-Werte, kein proportionales Licht. WCAG wandelt zunächst jeden Kanal in einen linearen Wert um und wendet dann unterschiedliche Rot-, Grün- und Blaugewichtungen an.
Was passiert, wenn zwei Namen zum gleichen CSS-Token werden?
Der erste behält den Basisnamen und spätere Übereinstimmungen erhalten -2, -3 usw. Keine Deklaration wird stillschweigend ersetzt und die Tabelle zeigt jedes letzte Token vor dem Download.
Warum werden achtstellige Hexadezimalfarben abgelehnt?
Ihr Alphakanal verschmilzt mit dem Hintergrund, bevor Kontrast entsteht. Für ein zuverlässiges Verhältnis wäre dieser Hintergrund als weitere explizite Eingabe erforderlich, daher akzeptiert dieses Tool nur undurchsichtige #RGB- und #RRGGBB-Werte.