{"id":6289,"date":"2026-02-01T17:49:47","date_gmt":"2026-02-01T16:49:47","guid":{"rendered":"https:\/\/siite.dk\/?page_id=6289"},"modified":"2026-02-01T17:52:23","modified_gmt":"2026-02-01T16:52:23","slug":"contrast-checker","status":"publish","type":"page","link":"https:\/\/siite.dk\/en\/vaerktoj\/kontrast-tjekker\/","title":{"rendered":"Contrast checker"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6289\" class=\"elementor elementor-6289\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8f6420 particle-overlay e-flex e-con-boxed e-con e-child\" data-id=\"f8f6420\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ff663e6 e-con-full e-flex e-con e-child\" data-id=\"ff663e6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9298c78 elementor-widget elementor-widget-sp-breadcrumbs\" data-id=\"9298c78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sp-breadcrumbs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav  aria-label=\"breadcrumb\"><ol class=\"breadcrumb\"><li class=\"breadcrumb-item active\" aria-current=\"page\"><span>Forside<\/span><\/li><\/ol><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7846d4b elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget-tablet__width-auto elementor-widget elementor-widget-heading\" data-id=\"7846d4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Kontrast-tjekker til WCAG AA og AAA\n<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21a4c54 elementor-widget__width-auto elementor-widget-mobile__width-inherit elementor-widget-tablet__width-auto elementor-widget elementor-widget-text-editor\" data-id=\"21a4c54\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p dir=\"auto\">Tjek hurtigt om dine farver overholder WCAG-kravene. Indtast tekst- og baggrundsfarve, og se om din kontrast lever op til AA og AAA-standarderne for webtilg\u00e6ngelighed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30b5a4d e-flex e-con-boxed e-con e-parent\" data-id=\"30b5a4d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83b751a elementor-widget elementor-widget-html\" data-id=\"83b751a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.siite-contrast-checker {\nfont-family: inherit;\ncolor: #111827;\nmargin: 0 auto;\nmax-width: 1200px;\n}\n.siite-grid {\ndisplay: flex;\ngap: 30px;\nalign-items: stretch; \/* Ensures equal height *\/\nmargin-bottom: 20px;\n}\n@media (max-width: 850px) {\n.siite-grid { flex-direction: column; }\n}\n\n.siite-column {\nflex: 1;\ndisplay: flex;\nflex-direction: column;\n}\n\n\/* Shared Section Styling *\/\n.siite-section {\nbackground: #f9fafb;\npadding: 30px;\nborder-radius: 8px;\nborder: 1px solid #e5e7eb;\nheight: 100%;\nbox-sizing: border-box;\ndisplay: flex;\nflex-direction: column;\njustify-content: center;\n}\n\n.siite-preview-card {\nbackground: white;\nborder: 2px solid #e5e7eb;\nborder-radius: 8px;\npadding: 30px;\nheight: 100%;\nbox-sizing: border-box;\ndisplay: flex;\nflex-direction: column;\njustify-content: space-between;\n}\n\n\/* Form Styling *\/\n.siite-group { margin-bottom: 24px; }\n.siite-group:last-child { margin-bottom: 0; }\n.siite-group label {\ndisplay: block;\nfont-size: 13px;\nfont-weight: 700;\ncolor: #111827;\nmargin-bottom: 10px;\ntext-transform: uppercase;\nletter-spacing: 0.5px;\n}\n.siite-input-wrapper {\ndisplay: flex;\ngap: 12px;\n}\n.siite-input-color {\nwidth: 50px;\nheight: 46px;\npadding: 2px;\nborder: 1px solid #d1d5db;\nborder-radius: 6px;\ncursor: pointer;\nbackground: white;\n}\n.siite-input-text {\nflex: 1;\npadding: 10px 15px;\nborder: 1px solid #d1d5db;\nborder-radius: 6px;\nfont-size: 15px;\nfont-family: monospace;\n}\n\n\/* Result\/Preview Styling *\/\n.siite-preview-box {\npadding: 25px;\nborder-radius: 6px;\ntext-align: center;\nborder: 1px solid #e5e7eb;\nmargin-bottom: 20px;\n}\n.siite-preview-text {\nfont-size: 18px;\nfont-weight: 600;\n}\n.siite-ratio-display {\ntext-align: center;\npadding: 15px;\nbackground: #f3f4f6;\nborder-radius: 6px;\nmargin-bottom: 20px;\n}\n.siite-ratio-value {\ndisplay: block;\nfont-size: 36px;\nfont-weight: 900;\ncolor: #111827;\nline-height: 1;\n}\n.siite-ratio-label {\nfont-size: 11px;\ncolor: #6b7280;\ntext-transform: uppercase;\nfont-weight: 700;\n}\n\n\/* Status Grid *\/\n.siite-status-grid {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 10px;\n}\n.siite-status-item {\npadding: 10px 12px;\nborder-radius: 6px;\nborder: 1px solid #e5e7eb;\ndisplay: flex;\njustify-content: space-between;\nalign-items: center;\nfont-size: 12px;\nfont-weight: 600;\n}\n.siite-status-tag {\npadding: 2px 6px;\nborder-radius: 4px;\nfont-size: 10px;\nfont-weight: 800;\n}\n.siite-pass { background: #22c55e; color: white; }\n.siite-fail { background: #ef4444; color: white; }\n<\/style>\n\n<div class=\"siite-contrast-checker\">\n<div class=\"siite-grid\">\n<!-- Equal Height Column 1 -->\n<div class=\"siite-column\">\n<div class=\"siite-section\">\n<h3 style=\"margin: 0 0 20px 0; font-size: 22px;\">Kontrast-tjekker<\/h3>\n\n<div class=\"siite-group\">\n<label>Tekstfarve<\/label>\n<div class=\"siite-input-wrapper\">\n<input type=\"color\" id=\"siite-color-text\" class=\"siite-input-color\" value=\"#111827\">\n<input type=\"text\" id=\"siite-hex-text\" class=\"siite-input-text\" value=\"#111827\" maxlength=\"7\">\n<\/div>\n<\/div>\n\n<div class=\"siite-group\">\n<label>Baggrundsfarve<\/label>\n<div class=\"siite-input-wrapper\">\n<input type=\"color\" id=\"siite-color-bg\" class=\"siite-input-color\" value=\"#FFFFFF\">\n<input type=\"text\" id=\"siite-hex-bg\" class=\"siite-input-text\" value=\"#FFFFFF\" maxlength=\"7\">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<!-- Equal Height Column 2 -->\n<div class=\"siite-column\">\n<div class=\"siite-preview-card\">\n<div id=\"siite-preview-box\" class=\"siite-preview-box\">\n<span class=\"siite-preview-text\">Eksempeltekst<\/span>\n<\/div>\n\n<div class=\"siite-ratio-display\">\n<span class=\"siite-ratio-label\">Kontrast-ratio<\/span>\n<span id=\"siite-ratio-value\" class=\"siite-ratio-value\">21.00:1<\/span>\n<\/div>\n\n<div class=\"siite-status-grid\">\n<div class=\"siite-status-item\">Normal AA <span id=\"siite-aa-normal\" class=\"siite-status-tag siite-pass\">Best\u00e5et<\/span><\/div>\n<div class=\"siite-status-item\">Normal AAA <span id=\"siite-aaa-normal\" class=\"siite-status-tag siite-pass\">Best\u00e5et<\/span><\/div>\n<div class=\"siite-status-item\">Stor AA <span id=\"siite-aa-large\" class=\"siite-status-tag siite-pass\">Best\u00e5et<\/span><\/div>\n<div class=\"siite-status-item\">Stor AAA <span id=\"siite-aaa-large\" class=\"siite-status-tag siite-pass\">Best\u00e5et<\/span><\/div>\n<\/div>\n<\/div>\n<\/div> <\/div>\n<\/div>\n\n<script>\n(function() {\nconst tP = document.getElementById('siite-color-text');\nconst tH = document.getElementById('siite-hex-text');\nconst bP = document.getElementById('siite-color-bg');\nconst bH = document.getElementById('siite-hex-bg');\nconst pB = document.getElementById('siite-preview-box');\nconst rV = document.getElementById('siite-ratio-value');\n\nconst statusTags = {\naan: document.getElementById('siite-aa-normal'),\naaan: document.getElementById('siite-aaa-normal'),\naal: document.getElementById('siite-aa-large'),\naaal: document.getElementById('siite-aaa-large')\n};\n\nfunction getLuminance(hex) {\nlet rgb = hexToRgb(hex);\nlet res = rgb.map(v => {\nv \/= 255;\nreturn v <= 0.03928 ? v \/ 12.92 : Math.pow((v + 0.055) \/ 1.055, 2.4);\n});\nreturn res[0] * 0.2126 + res[1] * 0.7152 + res[2] * 0.0722;\n}\n\nfunction hexToRgb(hex) {\nhex = hex.replace(\/^#\/, '');\nif (hex.length === 3) hex = hex.split('').map(s => s + s).join('');\nlet num = parseInt(hex, 16);\nreturn [num >> 16, (num >> 8) & 255, num & 255];\n}\n\nfunction update() {\nlet tc = tH.value.startsWith('#') ? tH.value : '#' + tH.value;\nlet bc = bH.value.startsWith('#') ? bH.value : '#' + bH.value;\n\n\/\/ Safety check for valid hex\nif(!\/^#[0-9A-F]{6}$\/i.test(tc) || !\/^#[0-9A-F]{6}$\/i.test(bc)) return;\n\npB.style.backgroundColor = bc;\npB.style.color = tc;\n\nlet l1 = getLuminance(tc);\nlet l2 = getLuminance(bc);\nlet ratio = (Math.max(l1, l2) + 0.05) \/ (Math.min(l1, l2) + 0.05);\n\nrV.innerText = ratio.toFixed(2) + ':1';\n\nconst setS = (el, p) => {\nel.innerText = p ? 'Best\u00e5et' : 'Fejlet';\nel.className = 'siite-status-tag ' + (p ? 'siite-pass' : 'siite-fail');\n};\n\nsetS(statusTags.aan, ratio >= 4.5);\nsetS(statusTags.aaan, ratio >= 7);\nsetS(statusTags.aal, ratio >= 3);\nsetS(statusTags.aaal, ratio >= 4.5);\n}\n\n[tP, bP].forEach(el => el.addEventListener('input', (e) => {\nlet targetHex = e.target === tP ? tH : bH;\ntargetHex.value = e.target.value.toUpperCase();\nupdate();\n}));\n\n[tH, bH].forEach(el => el.addEventListener('input', (e) => {\nlet val = e.target.value;\nif(val.length === 7 || (val.length === 6 && !val.startsWith('#'))) {\nlet targetPicker = e.target === tH ? tP : bP;\ntargetPicker.value = val.startsWith('#') ? val : '#' + val;\nupdate();\n}\n}));\n\nupdate();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dcb9bd7 e-flex e-con-boxed e-con e-parent\" data-id=\"dcb9bd7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04aae4b elementor-widget elementor-widget-text-editor\" data-id=\"04aae4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 dir=\"auto\">Hvad er kontrastforhold?<\/h3><p dir=\"auto\">Kontrastforhold (eller kontrastratio) er et tal, der beskriver forskellen i lysstyrke mellem to farver \u2013 typisk tekst og baggrund. Forholdet udtrykkes som f.eks. <strong>4.5:1<\/strong> eller <strong>21:1<\/strong>, hvor det f\u00f8rste tal angiver, hvor mange gange lysere den lyseste farve er i forhold til den m\u00f8rkeste. Jo h\u00f8jere tal, jo st\u00f8rre kontrast. Det maksimale kontrastforhold er <strong>21:1<\/strong> (sort p\u00e5 hvid), mens <strong>1:1<\/strong> betyder ingen kontrast (identiske farver).<\/p><h3 dir=\"auto\">Hvad er WCAG?<\/h3><p dir=\"auto\"><strong>WCAG<\/strong> st\u00e5r for <em>Web Content Accessibility Guidelines<\/em> og er internationale retningslinjer udviklet af W3C (World Wide Web Consortium). WCAG sikrer, at digitalt indhold er tilg\u00e6ngeligt for alle \u2013 inklusiv personer med synsneds\u00e6ttelse, farveblindhed eller andre funktionsneds\u00e6ttelser. Retningslinjerne bruges verden over og danner grundlag for lovgivning om webtilg\u00e6ngelighed i b\u00e5de EU og Danmark.<\/p><h3 dir=\"auto\">Hvad betyder AA og AAA?<\/h3><p dir=\"auto\">WCAG opererer med tre overordnede niveauer for tilg\u00e6ngelighed: <strong>A<\/strong>, <strong>AA<\/strong> og <strong>AAA<\/strong>.<\/p><div class=\"relative w-full group mb-2\"><div class=\" absolute top-1 right-1.5 z-20 invisible group-hover:visible flex gap-0.5\"><div class=\"flex\"><h4 dir=\"auto\">WCAG AA<\/h4><ul dir=\"auto\"><li class=\"text-start \"><strong>Normal tekst:<\/strong> Minimum 4.5:1<\/li><li class=\"text-start \"><strong>Stor tekst:<\/strong> Minimum 3:1<\/li><li class=\"text-start \"><strong>Beskrivelse:<\/strong> Minimumskravet for de fleste websites og apps. Opfylder lovkrav i EU.<\/li><\/ul><h4 dir=\"auto\">WCAG AAA<\/h4><ul dir=\"auto\"><li class=\"text-start \"><strong>Normal tekst:<\/strong> Minimum 7:1<\/li><li class=\"text-start \"><strong>Stor tekst:<\/strong> Minimum 4.5:1<\/li><li class=\"text-start \"><strong>Beskrivelse:<\/strong> H\u00f8jeste niveau \u2013 anbefales til offentlige tjenester og maksimal tilg\u00e6ngelighed.<\/li><\/ul><\/div><\/div><\/div><p dir=\"auto\"><strong>Stor tekst<\/strong> defineres som tekst p\u00e5 mindst <strong>18pt<\/strong> (24px) eller <strong>14pt fed<\/strong> (18.5px bold).<\/p><h3 dir=\"auto\">Hvorfor er kontrast vigtigt?<\/h3><p dir=\"auto\">Tilstr\u00e6kkelig farvekontrast er afg\u00f8rende for:<\/p><ul dir=\"auto\"><li class=\"text-start \"><strong>L\u00e6sbarhed<\/strong> \u2013 Tekst bliver lettere at l\u00e6se for alle brugere<\/li><li class=\"text-start \"><strong>Tilg\u00e6ngelighed<\/strong> \u2013 Personer med nedsat syn eller farveblindhed kan navigere dit indhold<\/li><li class=\"text-start \"><strong>Lovkrav<\/strong> \u2013 EU&#8217;s tilg\u00e6ngelighedsdirektiv kr\u00e6ver WCAG AA-overholdelse for mange digitale tjenester<\/li><li class=\"text-start \"><strong>Brugeroplevelse<\/strong> \u2013 God kontrast forbedrer oplevelsen p\u00e5 alle enheder og i alle lysforhold<\/li><\/ul><h3 dir=\"auto\">S\u00e5dan bruger du kontrast-tjekkeren<\/h3><ol dir=\"auto\" start=\"1\"><li class=\"text-start\"><strong>V\u00e6lg din tekstfarve<\/strong> ved at indtaste en HEX-kode eller bruge farvev\u00e6lgeren<\/li><li class=\"text-start\"><strong>V\u00e6lg din baggrundsfarve<\/strong> p\u00e5 samme m\u00e5de<\/li><li class=\"text-start\"><strong>Se resultatet med det samme<\/strong> \u2013 v\u00e6rkt\u00f8jet beregner automatisk kontrastforholdet og viser, om kombinationen overholder WCAG AA og AAA for b\u00e5de normal og stor tekst<\/li><\/ol><p dir=\"auto\">Alle beregninger sker lokalt i din browser \u2013 hurtigt, sikkert og uden at gemme data.<\/p><h3 dir=\"auto\">Hvem har gavn af dette v\u00e6rkt\u00f8j?<\/h3><p dir=\"auto\">Kontrast-tjekkeren er udviklet til <strong>webdesignere<\/strong>, <strong>UX-designere<\/strong>, <strong>frontend-udviklere<\/strong> og alle, der arbejder med digitale brugerflader. Den er ogs\u00e5 relevant for <strong>virksomheder og organisationer<\/strong>, der skal leve op til krav om digital tilg\u00e6ngelighed \u2013 herunder offentlige institutioner, e-handelsvirksomheder og SaaS-udbydere.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Forside Kontrast-tjekker til WCAG AA og AAA Tjek hurtigt om dine farver overholder WCAG-kravene. Indtast tekst- og baggrundsfarve, og se om din [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":6218,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"UTM Link Builder til professionel kampagnesporing","_seopress_titles_desc":"Byg UTM-links hurtigt og korrekt. Spor kampagner fra Google og Facebook, minimer datofejl og f\u00e5 fuldt overblik over konverteringer i Analytics.","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"class_list":["post-6289","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/comments?post=6289"}],"version-history":[{"count":4,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6289\/revisions"}],"predecessor-version":[{"id":6293,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6289\/revisions\/6293"}],"up":[{"embeddable":true,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6218"}],"wp:attachment":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/media?parent=6289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}