{"id":15773,"date":"2026-11-13T13:15:00","date_gmt":"2026-11-13T12:15:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=15773"},"modified":"2026-10-26T13:33:23","modified_gmt":"2026-10-26T12:33:23","slug":"helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/","title":{"rendered":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen"},"content":{"rendered":"<p>Ein helles und ein dunkles Design k\u00f6nnen dieselben CSS-Variablennamen mit unterschiedlichen Farbwerten verwenden. F\u00fcr lesbare Texte z\u00e4hlt jedoch das tats\u00e4chlich sichtbare Paar aus Vordergrund und Hintergrund. Eine Palette liefert m\u00f6gliche Farben; erst die Verwendung auf der Seite zeigt, welche Kontraste gepr\u00fcft werden m\u00fcssen.<\/p><figure class=\"lw-diagram\"><img decoding=\"async\" src=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/diagrams\/dia-15773-review-20261024.png\" width=\"1120\" height=\"580\" loading=\"lazy\" alt=\"Anwendbare Kontrastgrenze, tats\u00e4chliche Darstellung und berechnetes deckendes sRGB-Paar\"><figcaption>Anwendbare Kontrastgrenze, tats\u00e4chliche Darstellung und berechnetes deckendes sRGB-Paar.<\/figcaption><\/figure>\n<h2>Welche Grenze gilt?<\/h2>\n<p>WCAG 2.2 verlangt auf Stufe AA f\u00fcr normalen Text grunds\u00e4tzlich mindestens 4,5:1. F\u00fcr gro\u00dfen Text reichen 3:1: Gemeint sind mindestens 18 Punkt beziehungsweise 24 CSS-Pixel oder 14 Punkt fett, entsprechend ungef\u00e4hr 18,67 CSS-Pixel. Stufe AAA verlangt 7:1 f\u00fcr normalen und 4,5:1 f\u00fcr gro\u00dfen Text. Ausnahmen bestehen unter anderem f\u00fcr Logos, rein dekorativen Text und Text in inaktiven Bedienelementen.<\/p>\n<p>F\u00fcr visuelle Informationen, die zum Erkennen von Bedienelementen, Zust\u00e4nden oder bedeutungstragenden Grafiken erforderlich sind, ist zus\u00e4tzlich das Nicht-Text-Kriterium 1.4.11 relevant. Die Grenze betr\u00e4gt 3:1 zu angrenzenden Farben, mit den dort genannten Ausnahmen. Nicht jeder einzelne Rand muss diese Grenze erf\u00fcllen, wenn das Element bereits durch andere ausreichend erkennbare Merkmale identifizierbar ist.<\/p>\n<p>Eine geringe Zahl bedeutet deshalb nicht automatisch einen WCAG-Versto\u00df. Zuerst m\u00fcssen Funktion, Gr\u00f6\u00dfe, Zustand und tats\u00e4chlicher Hintergrund feststehen. Umgekehrt erkl\u00e4rt ein Variablenname wie <code>--border-soft<\/code> eine erforderliche Begrenzung nicht zur Dekoration.<\/p>\n<h2>Ein nachrechenbares Beispiel<\/h2>\n<p>F\u00fcr den deckenden Textfarbwert <code>#5e7184<\/code> auf <code>#f1f5f9<\/code> ergibt die WCAG-Formel ungef\u00e4hr 4,595593:1. Dieses konkrete Paar erreicht die AA-Grenze f\u00fcr normalen Text. Eine Anzeige mit zwei Nachkommastellen lautet 4,60:1; verglichen wird trotzdem der ungerundete Wert.<\/p>\n<p><code>#777777<\/code> auf Wei\u00df ergibt dagegen ungef\u00e4hr 4,478089:1 und verfehlt 4,5:1. <code>#767676<\/code> auf Wei\u00df erreicht ungef\u00e4hr 4,542225:1. Eine kleine Farb\u00e4nderung kann also die Grenze \u00fcberschreiten. Ein Zielwert von 4,6:1 bietet etwas Abstand, garantiert aber nicht, dass der Kontrast nach sp\u00e4teren \u00c4nderungen des Hintergrunds weiterhin ausreicht.<\/p>\n<p>Das folgende Python-Beispiel akzeptiert ausschlie\u00dflich deckende sechsstellige sRGB-Hexfarben. Die Grenzstelle f\u00fcr die Linearisierung betr\u00e4gt 0,04045. Der \u00e4ltere Wert 0,03928 f\u00fchrt bei ganzzahligen 8-Bit-Kan\u00e4len zu derselben Zweigwahl; das Beispiel verwendet die aktuelle Definition. Alpha, Verl\u00e4ufe, CSS-Kaskade und andere Farbr\u00e4ume liegen au\u00dferhalb des Programms.<\/p>\n<figure style=\"--cbb-digits:2\" class=\"cbb cbb--wrap cbb--numbers wp-block-code-beautifier-block-code\" data-lang=\"python\"><figcaption class=\"cbb-head\"><span class=\"cbb-lang\">Python<\/span><span class=\"cbb-actions\"><button type=\"button\" class=\"cbb-button cbb-button--wrap\" data-cbb-action=\"wrap\" aria-pressed=\"true\" title=\"Wrap long lines\"><svg aria-hidden=\"true\" focusable=\"false\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M2 4h12M2 8h9.5a2.5 2.5 0 0 1 0 5H8m0 0 1.5-1.5M8 13l1.5 1.5M2 12h3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span class=\"cbb-sr\">Wrap long lines<\/span><\/button><button type=\"button\" class=\"cbb-button cbb-button--copy\" data-cbb-action=\"copy\" data-cbb-done=\"Copied\" data-cbb-failed=\"Press Ctrl+C to copy\"><svg aria-hidden=\"true\" focusable=\"false\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8.5\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v6.5A1.5 1.5 0 0 0 4 11h.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><span class=\"cbb-button-label\" aria-live=\"polite\">Copy<\/span><\/button><\/span><\/figcaption><pre class=\"cbb-pre\" tabindex=\"0\"><code class=\"cbb-code language-python\" style=\"counter-reset:cbb-line 0;\"><span class=\"cbb-line\"><span class=\"cbb-string\">\"\"\"WCAG 2.2 ratio for two opaque six-digit sRGB hex colours only.\"\"\"<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">import<\/span> re\n<\/span><span class=\"cbb-line\">\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">def<\/span> <span class=\"cbb-function\">luminance<\/span>(value):\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">if<\/span> <span class=\"cbb-keyword\">not<\/span> <span class=\"cbb-function\">isinstance<\/span>(value, str) <span class=\"cbb-keyword\">or<\/span> <span class=\"cbb-keyword\">not<\/span> re.<span class=\"cbb-function\">fullmatch<\/span>(<span class=\"cbb-string\">r\"#?&#91;0-9a-fA-F&#93;{6}\"<\/span>, value):\n<\/span><span class=\"cbb-line\">        <span class=\"cbb-keyword\">raise<\/span> <span class=\"cbb-function\">ValueError<\/span>(<span class=\"cbb-string\">\"Expected six-digit opaque sRGB hex colour\"<\/span>)\n<\/span><span class=\"cbb-line\">    value = value.<span class=\"cbb-function\">removeprefix<\/span>(<span class=\"cbb-string\">\"#\"<\/span>)\n<\/span><span class=\"cbb-line\">    channels = &#91;<span class=\"cbb-function\">int<\/span>(value&#91;i:i+<span class=\"cbb-number\">2<\/span>&#93;, <span class=\"cbb-number\">16<\/span>) \/ <span class=\"cbb-number\">255<\/span> <span class=\"cbb-keyword\">for<\/span> i <span class=\"cbb-keyword\">in<\/span> (<span class=\"cbb-number\">0<\/span>, <span class=\"cbb-number\">2<\/span>, <span class=\"cbb-number\">4<\/span>)&#93;\n<\/span><span class=\"cbb-line\">    linear = &#91;c \/ <span class=\"cbb-number\">12.92<\/span> <span class=\"cbb-keyword\">if<\/span> c &lt;= <span class=\"cbb-number\">0.04045<\/span> <span class=\"cbb-keyword\">else<\/span> ((c + <span class=\"cbb-number\">0.055<\/span>) \/ <span class=\"cbb-number\">1.055<\/span>) ** <span class=\"cbb-number\">2.4<\/span>\n<\/span><span class=\"cbb-line\">              <span class=\"cbb-keyword\">for<\/span> c <span class=\"cbb-keyword\">in<\/span> channels&#93;\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">return<\/span> <span class=\"cbb-function\">sum<\/span>(w * c <span class=\"cbb-keyword\">for<\/span> w, c <span class=\"cbb-keyword\">in<\/span> <span class=\"cbb-function\">zip<\/span>((<span class=\"cbb-number\">0.2126<\/span>, <span class=\"cbb-number\">0.7152<\/span>, <span class=\"cbb-number\">0.0722<\/span>), linear))\n<\/span><span class=\"cbb-line\">\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">def<\/span> <span class=\"cbb-function\">contrast<\/span>(foreground, background):\n<\/span><span class=\"cbb-line\">    a, b = <span class=\"cbb-function\">luminance<\/span>(foreground), <span class=\"cbb-function\">luminance<\/span>(background)\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">return<\/span> (<span class=\"cbb-function\">max<\/span>(a, b) + <span class=\"cbb-number\">0.05<\/span>) \/ (<span class=\"cbb-function\">min<\/span>(a, b) + <span class=\"cbb-number\">0.05<\/span>)\n<\/span><span class=\"cbb-line\">\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">if<\/span> __name__ == <span class=\"cbb-string\">\"__main__\"<\/span>:\n<\/span><span class=\"cbb-line\">    ratio = <span class=\"cbb-function\">contrast<\/span>(<span class=\"cbb-string\">\"#5e7184\"<\/span>, <span class=\"cbb-string\">\"#f1f5f9\"<\/span>)\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-function\">print<\/span>(<span class=\"cbb-string\">f\"{ratio:.4f}:1; AA normal text: {ratio &gt;= 4.5}\"<\/span>)<\/span><\/code><\/pre><\/figure>\n<h2>Vier Grenzen einer reinen Palettenpr\u00fcfung<\/h2>\n<ol><li><strong>Namen ersetzen keine Verwendung.<\/strong> <code>--on-accent<\/code> deutet auf Text auf einer Akzentfl\u00e4che hin. Eine CSS-Regel kann den Wert trotzdem anders verwenden. Ebenso kann ein als \u201eweich\u201c benannter Wert funktional wichtiger Text sein.<\/li><li><strong>Fehlende \u00dcberschreibung bedeutet nicht automatisch Fallback.<\/strong> Ein dunkles Design kann Werte aus einer gemeinsamen Basis erben. Selektoren, Kaskade und Vererbung bestimmen den berechneten Wert. Ein <code>var()<\/code>-Fallback greift unter bestimmten Bedingungen; eine fehlende zweite Deklaration allein beweist keinen Fehler.<\/li><li><strong>Transparenz und Verl\u00e4ufe ben\u00f6tigen den tats\u00e4chlichen Untergrund.<\/strong> Der Alphawert bestimmt die Transparenz. Die sichtbare Farbe ergibt sich aus der teilweise durchsichtigen Farbe und den darunterliegenden Ebenen. Bei Bildern oder Verl\u00e4ufen z\u00e4hlt der ung\u00fcnstigste relevante Bereich hinter dem Text. Dieser Bereich kann auch innerhalb eines Verlaufs liegen, nicht nur an dessen Enden.<\/li><li><strong>Zust\u00e4nde ver\u00e4ndern die Paare.<\/strong> Fokus, Hover, ausgew\u00e4hlte Elemente, Fehlermeldungen und hervorgehobene Karten k\u00f6nnen andere Hintergr\u00fcnde verwenden. Ein korrektes Standardpaar ist keine Freigabe s\u00e4mtlicher Zust\u00e4nde oder der ganzen Website.<\/li><\/ol>\n\n\n<!-- lw-flux-illu 15771-a3 -->\n<figure class=\"lw-illu\"><img src=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/illustrationen\/flux-15771-a3.webp\" width=\"1120\" height=\"630\" loading=\"lazy\" decoding=\"async\" alt=\"Zwei gleiche Glasanh\u00e4nger h\u00e4ngen im Fenster, einer vor einem Vorhang, einer vor einer Wand, und wirken ganz verschieden. Genauso h\u00e4ngt der sichtbare Farbton einer durchsichtigen Fl\u00e4che vom echten Untergrund ab.\"><figcaption>Zwei gleiche Glasanh\u00e4nger h\u00e4ngen im Fenster, einer vor einem Vorhang, einer vor einer Wand, und wirken ganz verschieden. Genauso h\u00e4ngt der sichtbare Farbton einer durchsichtigen Fl\u00e4che vom echten Untergrund ab.<\/figcaption><\/figure>\n\n\n<h2>Fokus und Formularbeschriftung<\/h2>\n<p>Ein Fokusindikator markiert das aktuell f\u00fcr Tastatureingaben ausgew\u00e4hlte Bedienelement, etwa durch einen sichtbaren Rahmen. Ein selbst gestalteter Fokusindikator muss die anwendbaren Anforderungen an erkennbare Zust\u00e4nde erf\u00fcllen. WCAG 2.4.13 auf Stufe AAA erg\u00e4nzt Anforderungen an die Indikatorfl\u00e4che und an mindestens 3:1 zwischen denselben Pixeln im fokussierten und unfokussierten Zustand. Dieser Vergleich ist von der Pr\u00fcfung angrenzender Farben nach 1.4.11 zu unterscheiden. Unver\u00e4nderte Browserdarstellung und weitere ausdr\u00fccklich genannte F\u00e4lle haben eigene Ausnahmen.<\/p>\n<p>Platzhaltertext in einem aktiven Eingabefeld ben\u00f6tigt den anwendbaren Textkontrast. Ein gut lesbarer Platzhalter ersetzt dennoch keine passende Feldbeschriftung: Der Hinweis verschwindet bei der Eingabe. Zweck und Beispiel sollten auch w\u00e4hrend der Eingabe verst\u00e4ndlich bleiben.<\/p>\n<h2>Was das Werkzeug leisten kann<\/h2>\n<p><a href=\"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/colour-contrast-palette-auditor\/\">Der verlinkte Palettenpr\u00fcfer<\/a> berechnet Farbpaare lokal im Browser. Die aktuelle Implementierung liest Deklarationen mit einem Textmuster und err\u00e4t Rollen aus Namen. Die Pr\u00fcfung l\u00f6st keine echte CSS-Kaskade auf: Bei mehrfacher Deklaration gewinnt im Werkzeug der erste gefundene Wert, sogar Deklarationen in Kommentaren k\u00f6nnen eingelesen werden. Werte mit <code>var()<\/code> oder <code>oklch()<\/code> werden nicht aufgel\u00f6st.<\/p>\n<p>Alphawerte werden gekennzeichnet, aber nicht in den Kontrast eingerechnet. Ein isolierter Test mit vollst\u00e4ndig transparentem Schwarz auf Wei\u00df liefert dadurch 21:1 und ein gutes Gesamturteil trotz Alphahinweis. Ein weiterer Test behandelt <code>--text-soft<\/code> als Dekoration und nimmt den Wert von den Befunden aus. Ein gutes Ergebnis ist daher nur ein Hinweis f\u00fcr die erkannten hypothetischen Paare, keine Abnahme der gerenderten Oberfl\u00e4che.<\/p>\n<p>Sechs isolierte Tests der Werkzeuglogik und zw\u00f6lf Tests des Python-Beispiels sichern diese konkreten Aussagen ab. Die Rechnergebnisse ersetzen keine Sicht- und Zustandspr\u00fcfung im Browser. F\u00fcr eine belastbare Pr\u00fcfung geh\u00f6ren beide Themes, tats\u00e4chlich verwendete Farbpaare und die relevanten Bedienelementzust\u00e4nde zusammen.<\/p>\n<div class=\"lw-faq\"><h2>Fragen und Antworten<\/h2><h3>Kann ein angezeigter Wert von 4,50 trotzdem durchfallen?<\/h3><p>Ja. Ein Wert knapp unter 4,5 kann auf 4,50 gerundet erscheinen. Die Entscheidung muss vor der Rundung erfolgen.<\/p><h3>Gilt ein sehr blasser Rand immer als Dekoration?<\/h3><p>Nein. Ma\u00dfgeblich ist die Funktion, nicht die Farbe oder der Variablenname. Eine f\u00fcr die Bedienung oder das Verst\u00e4ndnis erforderliche Darstellung ben\u00f6tigt die jeweils anwendbare Pr\u00fcfung.<\/p><h3>Beweisen zwei vollst\u00e4ndige Paletten Barrierefreiheit?<\/h3><p>Nein. Palettenvollst\u00e4ndigkeit und Kontrastberechnung decken nur einen Teil der Anforderungen ab. Die tats\u00e4chliche Darstellung, Zust\u00e4nde, Beschriftungen und weitere WCAG-Kriterien bleiben gesondert zu pr\u00fcfen.<\/p><\/div>\n<div class=\"lw-quellen\"><h2>Quellen<\/h2><ul><li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: Mindestkontrast<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-contrast.html\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: Nicht-Text-Kontrast<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: Relative Leuchtdichte<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/focus-appearance.html\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: Darstellung des Fokus<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascading_variables\/Using_custom_properties\" target=\"_blank\" rel=\"noopener noreferrer\">MDN: Benutzerdefinierte CSS-Eigenschaften<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/forms\/labels\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C WAI: Formularbeschriftungen<\/a><\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kontrast h\u00e4ngt von tats\u00e4chlichen Farbpaaren, CSS-Vererbung und Zust\u00e4nden ab. Ein gepr\u00fcftes sRGB-Beispiel erkl\u00e4rt WCAG-Schwellen und Rundung. Konkrete Werkzeugtests zeigen die Grenzen reiner Palettenpr\u00fcfungen.<\/p>\n","protected":false},"author":1,"featured_media":32487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[156],"tags":[92235,92759],"class_list":["post-15773","post","type-post","status-publish","format-standard","hentry","category-tutorials-de-web-entwicklung","tag-tutorial-de","tag-web-development-de"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen | Lukas Wojcik<\/title>\n<meta name=\"description\" content=\"WCAG-2.2-Kontrast \u00fcber helle und dunkle Palette: f\u00fcnf Textfarben unter der Grenze, ihre Korrektur und die vier Scheinbefunde einer naiven Pr\u00fcfung.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen | Lukas Wojcik\" \/>\n<meta property=\"og:description\" content=\"WCAG-2.2-Kontrast \u00fcber helle und dunkle Palette: f\u00fcnf Textfarben unter der Grenze, ihre Korrektur und die vier Scheinbefunde einer naiven Pr\u00fcfung.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/\" \/>\n<meta property=\"og:site_name\" content=\"Lukas Wojcik - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-13T12:15:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15773.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lukas Wojcik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lukas Wojcik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/\"},\"author\":{\"name\":\"Lukas Wojcik\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"headline\":\"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen\",\"datePublished\":\"2026-11-13T12:15:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/\"},\"wordCount\":946,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15773.png\",\"keywords\":[\"Tutorial\",\"Web Development\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/\",\"name\":\"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen | Lukas Wojcik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15773.png\",\"datePublished\":\"2026-11-13T12:15:00+00:00\",\"description\":\"WCAG-2.2-Kontrast \u00fcber helle und dunkle Palette: f\u00fcnf Textfarben unter der Grenze, ihre Korrektur und die vier Scheinbefunde einer naiven Pr\u00fcfung.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15773.png\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15773.png\",\"width\":1200,\"height\":630,\"caption\":\"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/web-entwicklung\\\/tutorials-de-web-entwicklung\\\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\",\"name\":\"Lukas Wojcik - Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\",\"name\":\"Lukas Wojcik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"width\":424,\"height\":636,\"caption\":\"Lukas Wojcik\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\"},\"sameAs\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen | Lukas Wojcik","description":"WCAG-2.2-Kontrast \u00fcber helle und dunkle Palette: f\u00fcnf Textfarben unter der Grenze, ihre Korrektur und die vier Scheinbefunde einer naiven Pr\u00fcfung.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/","og_locale":"en_US","og_type":"article","og_title":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen | Lukas Wojcik","og_description":"WCAG-2.2-Kontrast \u00fcber helle und dunkle Palette: f\u00fcnf Textfarben unter der Grenze, ihre Korrektur und die vier Scheinbefunde einer naiven Pr\u00fcfung.","og_url":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/","og_site_name":"Lukas Wojcik - Blog","article_published_time":"2026-11-13T12:15:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15773.png","type":"image\/png"}],"author":"Lukas Wojcik","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lukas Wojcik","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#article","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/"},"author":{"name":"Lukas Wojcik","@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"headline":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen","datePublished":"2026-11-13T12:15:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/"},"wordCount":946,"commentCount":0,"publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15773.png","keywords":["Tutorial","Web Development"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/","url":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/","name":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen | Lukas Wojcik","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#primaryimage"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15773.png","datePublished":"2026-11-13T12:15:00+00:00","description":"WCAG-2.2-Kontrast \u00fcber helle und dunkle Palette: f\u00fcnf Textfarben unter der Grenze, ihre Korrektur und die vier Scheinbefunde einer naiven Pr\u00fcfung.","breadcrumb":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#primaryimage","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15773.png","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15773.png","width":1200,"height":630,"caption":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/helle-und-dunkle-paletten-kontrast-prufen-und-grenzen-erkennen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lukaswojcik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Helle und dunkle Paletten: Kontrast pr\u00fcfen und Grenzen erkennen"}]},{"@type":"WebSite","@id":"https:\/\/www.lukaswojcik.com\/blog\/#website","url":"https:\/\/www.lukaswojcik.com\/blog\/","name":"Lukas Wojcik - Blog","description":"","publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lukaswojcik.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9","name":"Lukas Wojcik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","width":424,"height":636,"caption":"Lukas Wojcik"},"logo":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg"},"sameAs":["https:\/\/www.lukaswojcik.com\/blog"]}]}},"_links":{"self":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/15773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/comments?post=15773"}],"version-history":[{"count":8,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/15773\/revisions"}],"predecessor-version":[{"id":33083,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/15773\/revisions\/33083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media\/32487"}],"wp:attachment":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media?parent=15773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/categories?post=15773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/tags?post=15773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}