{"id":149,"date":"2026-08-20T19:17:33","date_gmt":"2026-08-20T19:17:33","guid":{"rendered":"https:\/\/netguide.io\/tools\/wcag-kontrast-checker\/"},"modified":"2026-08-20T19:17:33","modified_gmt":"2026-08-20T19:17:33","slug":"wcag-kontrast-checker","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/wcag-kontrast-checker\/","title":{"rendered":"WCAG-Kontrast-Checker"},"content":{"rendered":"<div id=\"netgu-31518924\" class=\"netgu-before-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"3494115342\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n<style>\n.wp-cc-container { max-width:100%; background:#fff; padding:20px; border:1px solid #ddd; border-radius:10px; font-family:-apple-system, sans-serif; color:#333; }\n.wp-cc-title { margin:0 0 15px 0; color:#2271b1; font-size:1.4rem; }\n.wp-cc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:10px; }\n.wp-cc-input-group label { display:block; font-size:11px; font-weight:bold; margin-bottom:4px; text-transform:uppercase; color:#666; }\n.wp-cc-input-group input, .wp-cc-input-group select { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; }\n.wp-cc-checkbox-group { margin:15px 0; font-size:12px; display:flex; align-items:center; gap:8px; color:#666; }\n.wp-cc-note { font-size:12px; color:#666; margin-top:12px; min-height:1em; }\n.wp-cc-warn { color:#d63638; font-weight:bold; }\n.wp-cc-results { margin-top:20px; border-top:2px solid #eee; padding-top:15px; }\n.wp-cc-res-item { display:flex; justify-content:space-between; margin-bottom:6px; font-size:14px; gap:10px; }\n.wp-cc-total { font-weight:bold; font-size:18px; color:#2271b1; margin:10px 0; padding:5px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; }\n.wp-cc-val { color:#2271b1; font-weight:bold; }\n.wp-cc-out { width:100%; box-sizing:border-box; padding:10px; border:1px solid #ccc; border-radius:4px; font-family:monospace; font-size:13px; word-break:break-all; background:#f7f7f7; margin-top:6px; }\n.wp-cc-btn { background:#2271b1; color:#fff; border:none; padding:9px 14px; border-radius:4px; cursor:pointer; font-size:13px; margin-top:10px; }\n<\/style><div class=\"wp-cc-container\">\n  <h3 class=\"wp-cc-title\">WCAG-Kontrast-Checker<\/h3>\n  <div class=\"wp-cc-grid\">\n    <div class=\"wp-cc-input-group\"><label>Textfarbe<\/label><input type=\"color\" id=\"cc-fg\" value=\"#1a1a1a\" style=\"height:40px; padding:2px;\" oninput=\"calcContrast()\"><\/div>\n    <div class=\"wp-cc-input-group\"><label>Hex Text<\/label><input type=\"text\" id=\"cc-fg-hex\" value=\"#1a1a1a\" oninput=\"ccSync('fg')\"><\/div>\n    <div class=\"wp-cc-input-group\"><label>Hintergrund<\/label><input type=\"color\" id=\"cc-bg\" value=\"#ffffff\" style=\"height:40px; padding:2px;\" oninput=\"calcContrast()\"><\/div>\n    <div class=\"wp-cc-input-group\"><label>Hex Hintergrund<\/label><input type=\"text\" id=\"cc-bg-hex\" value=\"#ffffff\" oninput=\"ccSync('bg')\"><\/div>\n  <\/div>\n  <div id=\"cc-preview\" style=\"margin:14px 0; padding:18px; border-radius:6px; border:1px solid #ddd; text-align:center; font-size:16px;\">Beispieltext \u2013 Vorschau<\/div>\n  <div class=\"wp-cc-results\">\n    <div class=\"wp-cc-res-item wp-cc-total\"><span>Kontrastverh\u00e4ltnis:<\/span><span id=\"cc-ratio\">0:1<\/span><\/div>\n    <div class=\"wp-cc-res-item\"><span>AA \u2013 normaler Text (\u2265 4,5):<\/span><span id=\"cc-aa\">\u2014<\/span><\/div>\n    <div class=\"wp-cc-res-item\"><span>AA \u2013 gro\u00dfer Text (\u2265 3):<\/span><span id=\"cc-aal\">\u2014<\/span><\/div>\n    <div class=\"wp-cc-res-item\"><span>AAA \u2013 normaler Text (\u2265 7):<\/span><span id=\"cc-aaa\">\u2014<\/span><\/div>\n    <div class=\"wp-cc-res-item\"><span>AAA \u2013 gro\u00dfer Text (\u2265 4,5):<\/span><span id=\"cc-aaal\">\u2014<\/span><\/div>\n  <\/div>\n  <div class=\"wp-cc-note\">Berechnung nach WCAG 2.x (relative Luminanz). \u201eGro\u00dfer Text&#8221; = ab ca. 18 pt bzw. 14 pt fett.<\/div>\n<\/div>\n<script>window.wpCcL = {\"pass\":\"Bestanden \u2713\",\"fail\":\"Nicht bestanden \u2717\"};<\/script>\n<script>\nfunction ccLum(hex){\n  hex=String(hex).replace('#','');\n  var r=parseInt(hex.substr(0,2),16)\/255, g=parseInt(hex.substr(2,2),16)\/255, b=parseInt(hex.substr(4,2),16)\/255;\n  function lin(c){ return c<=0.03928 ? c\/12.92 : Math.pow((c+0.055)\/1.055,2.4); }\n  return 0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b);\n}\nfunction ccBadge(id,pass,L){ var e=document.getElementById(id); e.innerText=pass?(L.pass||'Pass'):(L.fail||'Fail'); e.style.color=pass?'#2e7d32':'#d63638'; e.style.fontWeight='bold'; }\nfunction calcContrast(){\n  var L=window.wpCcL||{};\n  var fg=document.getElementById('cc-fg').value, bg=document.getElementById('cc-bg').value;\n  var ratio=(Math.max(ccLum(fg),ccLum(bg))+0.05)\/(Math.min(ccLum(fg),ccLum(bg))+0.05);\n  document.getElementById('cc-ratio').innerText=ratio.toFixed(2)+':1';\n  ccBadge('cc-aa', ratio>=4.5, L); ccBadge('cc-aal', ratio>=3, L); ccBadge('cc-aaa', ratio>=7, L); ccBadge('cc-aaal', ratio>=4.5, L);\n  var p=document.getElementById('cc-preview'); p.style.background=bg; p.style.color=fg;\n  document.getElementById('cc-fg-hex').value=fg; document.getElementById('cc-bg-hex').value=bg;\n}\nfunction ccSync(which){\n  var hx=document.getElementById('cc-'+which+'-hex').value.trim();\n  if(\/^#?[0-9a-fA-F]{6}$\/.test(hx)){ if(hx.charAt(0)!=='#') hx='#'+hx; document.getElementById('cc-'+which).value=hx; calcContrast(); }\n}\ncalcContrast();\n<\/script>\n\n\n<div id=\"netgu-4029241339\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<!-- NetGuide.io-After-Widget-Tools -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-6258556257245998\"\r\n     data-ad-slot=\"5175852350\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Farbkontrast nach WCAG pr\u00fcfen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Guter Kontrast zwischen Text und Hintergrund entscheidet \u00fcber Lesbarkeit und Barrierefreiheit. Der Checker berechnet das Kontrastverh\u00e4ltnis nach den Web Content Accessibility Guidelines (WCAG) und zeigt sofort, welche Stufen erf\u00fcllt sind.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kontrastverh\u00e4ltnis:<\/strong> Reicht von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Wei\u00df).<\/li>\n\n\n<li><strong>Stufe AA:<\/strong> Mindestens 4,5:1 f\u00fcr normalen, 3:1 f\u00fcr gro\u00dfen Text \u2013 der \u00fcbliche gesetzliche Ma\u00dfstab.<\/li>\n\n\n<li><strong>Stufe AAA:<\/strong> Strenger, mit 7:1 bzw. 4,5:1.<\/li>\n\n\n<li><strong>Gro\u00dfer Text:<\/strong> ab ca. 18 pt (24 px) oder 14 pt fett (ca. 19 px).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Verwandte Tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/tools\/de\/hex-rgb-converter\/\">Hex &#038; RGB Converter<\/a><\/li>\n\n\n<li><a href=\"\/tools\/de\/passwort-entropie-rechner\/\">Passwort-Entropie-Rechner<\/a><\/li>\n<\/ul>\n\n\n<div id=\"netgu-1855032684\" class=\"netgu-after-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"4559785002\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Farbkontrast nach WCAG pr\u00fcfen \u2013 Kontrastverh\u00e4ltnis plus Bestehen von AA und AAA f\u00fcr normalen und gro\u00dfen Text, mit Live-Vorschau.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[69],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-rechner-calculator"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":0,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}