WCAG Farbkontrastprüfer
Prüfen, anpassen und konvertieren Sie Vorder- und Hintergrundfarbkombinationen auf Übereinstimmung mit den W3C Zugänglichkeitsrichtlinien.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html class="noJS minCSS desktop" lang=en-GB itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<script id=declare_globals>
var LS = {
globalJS : "342-globalJS",
prismCSS : "155-prismCSS",
prismJS : "112-prismJS",
socialCSS : "129-socialCSS",
disqusCSS : "107-disqusCSS",
disqusJS : "118-disqusJS"
};
var device="desktop",hasDemo='',d=document,useJS=!1,useCSS=!1,useLocalStorage=!1,useTouch=!1,addDisqus="1",tidyLS = false;
!function(){"use strict";var e=d.documentElement,a=function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}();useLocalStorage=a,e.className=e.className.replace("noJS","hasJS"),d.addEventListener&&d.documentElement.classList&&d.documentElement.classList&&window.File&&window.FileReader&&window.FileList&&(useJS=!0,e.className=e.className.replace("hasJS","useJS")),"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0?(useTouch=!0,e.className+=" useTouch"):e.className+=" noTouch","flex"in e.style&&(useCSS=!0,e.className=e.className.replace("minCSS","useCSS")),performance&&performance.mark&&performance.mark("timeToTitle")}();
if(window.location.hash==="#noAnimations"){d.documentElement.className+=" noAnimations"}
function removeIdNode(i){i&&(i=d.getElementById(i))&&i.parentNode.removeChild(i)}
function scriptWriter(i,s,c){var a=d.createElement("script");a.src=s;a.async=!0;a.id=i;c&&(a.onload=c);d.body.appendChild(a)}
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t||200),a&&n.apply(i,o)}}
window.getFile=k;
function k(l,e,a,f,g,h){var c=d.getElementById(a);if(useJS&&useCSS&&c){if(useLocalStorage)for(a=localStorage.length;a--;)if(localStorage.key(a)===e){c.innerHTML=localStorage.getItem(e);g=!0;removeIdNode(f);break}if(!g){var b=new XMLHttpRequest;b.version=e;b.onload=function(){var a=b.version;200===this.status&&(c.innerHTML=this.responseText,useLocalStorage&&a&&"X"!==a&&(localStorage[a]=this.responseText,tidyLS=!0,console.log(a+" added to local storage")),removeIdNode(f))};b.open("get",l,!0);b.send()}if(h)return h(c)}};
</script>
<style id=basic_styles>
.button,a{text-decoration:none}html{font-family:sans-serif;box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}.mobile{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}body{background:#fafafd;color:#3a2c49}h1,h2,h3,h4{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#4B3D5A;font-weight:400}h2,h3,h4,code{letter-spacing:-.01em}b,strong{font-weight:700}a{color:#236ECE;border-bottom:1px solid #236ECE}a:active,a:focus,a:hover{color:#014cac;border-color:#014cac}a:focus{background-color:#fff;outline:#fff solid .25rem}h1 a,h1 a:active,h1 a:focus,h1 a:hover{color:#4B3D5A;cursor:text;border:0 solid}img{border:0;max-width:100%;vertical-align:top}fieldset{border:0;padding:0;margin:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-decoration,search-cancel-button{-webkit-appearance:none}em,i,q{font-style:italic;padding-right:.1rem}code,kbd,pre{font-family:monospace,monospace}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button,select{text-transform:none}button{cursor:pointer;overflow:visible;vertical-align:bottom}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}pre{overflow:hidden;background-color:#FCFDFA}pre>code{overflow-x:scroll;display:block;padding:1rem}.hide{position:absolute;left:-200em;margin:0}.noscript{font-weight:700;color:#c00}.list--unstyled{list-style-type:none;padding-left:0}.button{display:block;color:#fff;background-color:#666;border:1px solid #242424;text-align:center;cursor:pointer;letter-spacing:1px;border-radius:4px;padding:.618em 1.618em}.smaller{font-size:smaller}small{font-size:small}
.skipToContent{display:block;position:absolute;left:0;top:-4em;padding:.618em 1em;transition:all .4s}
.skipToContent:focus{top:.384em;color:#fff;background:#3B2D4A;z-index:10;left:.384em;outline:.125rem solid #b3d4ff}
</style>
<style id=minimum_styles>
h1{font-size:26px}h2{font-size:22px}h3{font-size:20px}small{font-size:small}hr{box-sizing:content-box;height:0;color:#fff}input{line-height:normal;padding:.156em;width:195px}body{line-height:24px;margin:16px;max-width:34em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACIAQMAAADgcTgQAAAAA1BMVEXu7u6DSdFtAAAADElEQVR4XmNAAaMAAAEQAAHPBGa9AAAAAElFTkSuQmCC) 0 -32px repeat-x}article,aside,footer,header,main,nav,section{display:block}h1,h2,h3{margin:42px 0 24px;line-height:1.2em}li{margin:0 0 16px}p{margin:0 0 24px}.content .r{margin:42px 0}.c,.list-nav .logo-li,.logo-svg,.main-header .r,.noJS .js-required,.search-input+button>svg{display:none}ul{margin:0}.list-nav li{display:inline-block;padding-right:1em}article .smaller{margin-bottom:10px}article h2{margin-bottom:6px}.content ul,pre{margin:24px 0}pre>code{padding:12px}
</style>
<style id=local_styles>
.inputarea {
position:relative;