Kontrastrechner<\/title><\/head><body><section class=\"contrast-calc__wrapper\"><div class=\"contrast-calc__container\"><form class=\"contrast-calc\"><fieldset class=\"contrast-calc__box contrast-calc__box--foreground\"><legend class=\"contrast-calc__legend\">Farbe Vordergrund<\/legend><div class=\"contrast-calc__section contrast-calc__section--hex\"><label for=\"foreground-hex\" class=\"contrast-calc__label\">HEX-Farbwert <span id=\"foreground-error-inline\" class=\"error-inline\" role=\"alert\" aria-live=\"assertive\"><\/span><\/label> <input id=\"foreground-hex\" type=\"text\" class=\"contrast-calc__input contrast-calc__input--hex\" maxlength=\"7\" pattern=\"^#?[0-9A-Fa-f]{6}$\" title=\"Bitte einen g\u00fcltigen HEX-Farbcode im Format #RRGGBB eingeben\"><\/div><div class=\"contrast-calc__section contrast-calc__section--rgb\"><label class=\"contrast-calc__label\">RGB-Farbwert<\/label><div class=\"contrast-calc__rgb\"><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--red\"><label for=\"foreground-r\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--red\">R<\/label> <input id=\"foreground-r\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--red\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--green\"><label for=\"foreground-g\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--green\">G<\/label> <input id=\"foreground-g\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--green\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--blue\"><label for=\"foreground-b\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--blue\">B<\/label> <input id=\"foreground-b\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--blue\" min=\"0\" max=\"255\" step=\"1\"><\/div><\/div><\/div><div class=\"contrast-calc__section contrast-calc__section--picker\"><label for=\"foreground-color-picker\" class=\"contrast-calc__label\">Farbw\u00e4hler<\/label> <input id=\"foreground-color-picker\" type=\"color\" class=\"contrast-calc__input contrast-calc__input--picker\" value=\"#007db3\"><\/div><div class=\"contrast-calc__section contrast-calc__section--brightness\"><label for=\"foreground-brightness\" class=\"contrast-calc__label\">Helligkeit<\/label> <input id=\"foreground-brightness\" type=\"range\" class=\"contrast-calc__input contrast-calc__input--brightness\" min=\"0\" max=\"100\" step=\"1\"><\/div><\/fieldset><button id=\"swap-button\" type=\"button\" class=\"contrast-calc__swap-button\" aria-label=\"Farben tauschen\" title=\"Farben tauschen\"><svg class=\"contrast-calc__icon-swap\" viewBox=\"0 0 28.35 33.07\" width=\"24\" height=\"28\" aria-hidden=\"true\"><path id=\"path2\" class=\"cls-1\" d=\"M10.11,18.38c.69-.69.69-1.81,0-2.51-.69-.69-1.81-.69-2.51,0L.52,22.96c-.33.33-.52.78-.52,1.25s.19.92.52,1.25l7.09,7.09c.69.69,1.81.69,2.51,0,.69-.69.69-1.81,0-2.51l-4.06-4.06h20.53c.98,0,1.77-.79,1.77-1.77s-.79-1.77-1.77-1.77H6.05l4.06-4.06Z\" fill=\"currentColor\"\/><path id=\"path1\" class=\"cls-1\" d=\"M20.74.52c-.69-.69-1.81-.69-2.51,0s-.69,1.81,0,2.51l4.06,4.06H1.77c-.98,0-1.77.79-1.77,1.77s.79,1.77,1.77,1.77h20.53l-4.06,4.06c-.69.69-.69,1.81,0,2.51.69.69,1.81.69,2.51,0l7.09-7.09c.69-.69.69-1.81,0-2.51L20.74.52Z\" fill=\"currentColor\"\/><\/svg><\/button><fieldset class=\"contrast-calc__box contrast-calc__box--background\"><legend class=\"contrast-calc__legend\">Farbe Hintergrund<\/legend><div class=\"contrast-calc__section contrast-calc__section--hex\"><label for=\"background-hex\" class=\"contrast-calc__label\">HEX-Farbwert <span id=\"background-error-inline\" class=\"error-inline\" role=\"alert\" aria-live=\"assertive\"><\/span><\/label> <input id=\"background-hex\" type=\"text\" class=\"contrast-calc__input contrast-calc__input--hex\" maxlength=\"7\" pattern=\"^#?[0-9A-Fa-f]{6}$\" title=\"Bitte einen g\u00fcltigen HEX-Farbcode im Format #RRGGBB eingeben\"><\/div><div class=\"contrast-calc__section contrast-calc__section--rgb\"><label class=\"contrast-calc__label\">RGB-Farbwert<\/label><div class=\"contrast-calc__rgb\"><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--red\"><label for=\"background-r\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--red\">R<\/label> <input id=\"background-r\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--red\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--green\"><label for=\"background-g\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--green\">G<\/label> <input id=\"background-g\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--green\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--blue\"><label for=\"background-b\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--blue\">B<\/label> <input id=\"background-b\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--blue\" min=\"0\" max=\"255\" step=\"1\"><\/div><\/div><\/div><div class=\"contrast-calc__section contrast-calc__section--picker\"><label for=\"background-color-picker\" class=\"contrast-calc__label\">Farbw\u00e4hler<\/label> <input id=\"background-color-picker\" type=\"color\" class=\"contrast-calc__input contrast-calc__input--picker\" value=\"#FDFDFD\"><\/div><div class=\"contrast-calc__section contrast-calc__section--brightness\"><label for=\"background-brightness\" class=\"contrast-calc__label\">Helligkeit<\/label> <input id=\"background-brightness\" type=\"range\" class=\"contrast-calc__input contrast-calc__input--brightness\" min=\"0\" max=\"100\" step=\"1\"><\/div><\/fieldset><\/form><section aria-label=\"Ergebnis, WCAG Bewertung und Vorschau\" class=\"result-preview\"><div class=\"result-preview__result\"><h2>Kontrastverh\u00e4ltnis<\/h2><p id=\"result-display\" class=\"result-preview__value\" aria-live=\"polite\">21.00 : 1<\/p><\/div><div class=\"result-preview__wcag\" aria-label=\"WCAG Bewertung\"><div class=\"wcag-rating wcag-rating--aa\"><h3 class=\"wcag-rating__heading\">WCAG AA<\/h3><ul class=\"wcag-rating__criteria\"><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Normaler Text<\/span> <span id=\"wcag-aa-normal\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Normaler Text\">Erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Gro\u00dfer Text (≥18 pt)<\/span> <span id=\"wcag-aa-large\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Gro\u00dfer Text\">Erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Grafiken & UI<\/span> <span id=\"wcag-aa-ui\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Grafiken und UI\">Nicht erf\u00fcllt<\/span><\/li><\/ul><\/div><div class=\"wcag-rating wcag-rating--aaa\"><h3 class=\"wcag-rating__heading\">WCAG AAA<\/h3><ul class=\"wcag-rating__criteria\"><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Kleiner Text<\/span> <span id=\"wcag-aaa-normal\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Normaler Text\">Nicht erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Gro\u00dfer Text (≥18 pt)<\/span> <span id=\"wcag-aaa-large\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Gro\u00dfer Text\">Erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Grafiken & UI<\/span> <span id=\"wcag-aaa-ui\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Grafiken und UI\">Erf\u00fcllt<\/span><\/li><\/ul><\/div><\/div><div id=\"result-preview\" class=\"result-preview__preview\" aria-label=\"Farbvorschau\"><h3 id=\"result-preview-heading\">Heading<\/h3><p id=\"result-preview-paragraph\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p><\/div><\/section><\/div><\/section><\/body><\/html>\n<style>.kt-accordion-id1398_604c87-e9 .kt-accordion-inner-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:10px;}.kt-accordion-id1398_604c87-e9 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);border-top-left-radius:0.33em;border-top-right-radius:0.33em;border-bottom-right-radius:0.33em;border-bottom-left-radius:0.33em;background:var(--global-palette8, #F7FAFC);font-weight:600;color:var(--global-palette3, #1A202C);padding-top:13px;padding-right:15px;padding-bottom:13px;padding-left:15px;}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette8, #F7FAFC);}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9 .kt-blocks-accordion-header:focus-visible{color:var(--global-palette3, #1A202C);background:var(--global-palette8, #F7FAFC);border-top:1px solid var(--global-palette4, #2D3748);border-right:1px solid var(--global-palette4, #2D3748);border-bottom:1px solid var(--global-palette4, #2D3748);border-left:1px solid var(--global-palette4, #2D3748);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette8, #F7FAFC);}.kt-accordion-id1398_604c87-e9 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{color:var(--global-palette6, #718096);background:var(--global-palette1, #3182CE);border-top:1px solid var(--global-palette1, #3182CE);border-right:1px solid var(--global-palette1, #3182CE);border-bottom:1px solid var(--global-palette1, #3182CE);border-left:1px solid var(--global-palette1, #3182CE);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette6, #718096);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger{background:var(--global-palette6, #718096);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette1, #3182CE);}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9 .kt-blocks-accordion-header:focus-visible{border-top:1px solid var(--global-palette4, #2D3748);border-right:1px solid var(--global-palette4, #2D3748);border-bottom:1px solid var(--global-palette4, #2D3748);border-left:1px solid var(--global-palette4, #2D3748);}}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid var(--global-palette1, #3182CE);border-right:1px solid var(--global-palette1, #3182CE);border-bottom:1px solid var(--global-palette1, #3182CE);border-left:1px solid var(--global-palette1, #3182CE);}}@media all and (max-width: 767px){.kt-accordion-id1398_604c87-e9 .kt-accordion-inner-wrap{display:block;}.kt-accordion-id1398_604c87-e9 .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child){margin-top:10px;}.kt-accordion-id1398_604c87-e9 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9 .kt-blocks-accordion-header:focus-visible{border-top:1px solid var(--global-palette4, #2D3748);border-right:1px solid var(--global-palette4, #2D3748);border-bottom:1px solid var(--global-palette4, #2D3748);border-left:1px solid var(--global-palette4, #2D3748);}.kt-accordion-id1398_604c87-e9 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid var(--global-palette1, #3182CE);border-right:1px solid var(--global-palette1, #3182CE);border-bottom:1px solid var(--global-palette1, #3182CE);border-left:1px solid var(--global-palette1, #3182CE);}}<\/style>\n<div class=\"wp-block-kadence-accordion alignnone\"><div class=\"kt-accordion-wrap kt-accordion-id1398_604c87-e9 kt-accordion-has-8-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right\" style=\"max-width:none\"><div class=\"kt-accordion-inner-wrap\" data-allow-multiple-open=\"false\" data-start-open=\"none\">\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane1398_02f343-44\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">How does the contrast checker calculate the contrast ratio according to WCAG?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>The contrast ratio between foreground and background color is crucial for accessible colors (or color combinations).<br\/>For digital media (e.g., websites, PDFs) to be accessible, they must meet various requirements. One of these requirements concerns the contrast ratio between the colors used. In Europe and many other parts of the world, the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-contrast-ratio\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG contrast calculation<\/a> is used for this purpose, which is explained below. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conversion from HEX to RGB<\/h3>\n\n\n\n<p>The WCAG contrast calculation is based on the RGB color model in its numerical RGB representation (e.g., <code>RGB(0, 125, 179)<\/code>). In the digital world, however, colors are typically available in HEX-encoded form (e.g., <code>#007db3<\/code>) and must therefore first be converted to RGB values. Since the conversion from HEX to RGB is available as a standard function in most programming languages, the exact formula is not explained further here. Instead, the following table shows the already calculated RGB values for two example HEX colors \u2013 for foreground and background respectively. <\/p>\n\n\n<style>.kb-table-container1398_31bc7e-31{overflow-x:auto;}.kb-table-container .kb-table1398_31bc7e-31 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_31bc7e-31 caption{text-align:center;}.kb-table-container .kb-table1398_31bc7e-31 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_31bc7e-31 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_31bc7e-31 td, .kb-table1398_31bc7e-31 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_31bc7e-31 td, .kb-table1398_31bc7e-31 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_31bc7e-31 td, .kb-table1398_31bc7e-31 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_31bc7e-31 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_31bc7e-31\">\n<tr class=\"kb-table-row kb-table-row1398_082a11-1b\">\n<th class=\"kb-table-data kb-table-data1398_6a7ff1-69\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_8b1b24-a3\">\n\n<p>Foreground<\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_a3b216-43\">\n\n<p>Background<\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_20a8f7-ab\">\n<th class=\"kb-table-data kb-table-data1398_55f8b1-0a\">\n\n<p>HEX<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_8d1aa8-94\">\n\n<p><code>#007db3<\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_77e856-80\">\n\n<p><code>#fdfdfd<\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_a34922-25\">\n<th class=\"kb-table-data kb-table-data1398_c4ec8b-4a\">\n\n<p>RGB (8-bit)<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_190064-b1\">\n\n<p><code>RGB(0, 125, 179)<\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_4bab40-a5\">\n\n<p><code>RGB(253, 253, 253)<\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Normalization of RGB values<\/h3>\n\n\n\n<p>In the next step, the 8-bit RGB values are transferred from the original value range <code>[0; 255]<\/code> to the normalized range <code>[0; 1]<\/code> by dividing each by 255.<\/p>\n\n\n<style>.kb-table-container1398_0a9f55-fd{overflow-x:auto;}.kb-table-container .kb-table1398_0a9f55-fd th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_0a9f55-fd caption{text-align:center;}.kb-table-container .kb-table1398_0a9f55-fd td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_0a9f55-fd tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_0a9f55-fd td, .kb-table1398_0a9f55-fd th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_0a9f55-fd td, .kb-table1398_0a9f55-fd th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_0a9f55-fd td, .kb-table1398_0a9f55-fd th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_0a9f55-fd wp-block-kadence-table\"><table class=\"kb-table kb-table1398_0a9f55-fd\">\n<tr class=\"kb-table-row kb-table-row1398_cc5c0d-1b\">\n<th class=\"kb-table-data kb-table-data1398_5a185e-b1\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_4aada2-3e\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_21c9ac-d9\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_c6afdd-5a\">\n<th class=\"kb-table-data kb-table-data1398_b4c06f-cc\">\n\n<p>RGB (8-bit)<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_6e8edb-aa\">\n\n<p><code><code>RGB(0, 125, 179)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_cd825e-58\">\n\n<p><code><code>RGB(253, 253, 253)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_252a30-d2\">\n<th class=\"kb-table-data kb-table-data1398_ab18d5-6d\">\n\n<p>RGB (normalized)<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_c2fa62-ff\">\n\n<p><code><code>RGB(0.0000, 0.4902, 0.7020)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_6efb33-1e\">\n\n<p><code><code>RGB(0.9922, 0.9922, 0.9922)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Linearization of color values<\/h3>\n\n\n\n<p>So far, you know that the calculation is based on the RGB color model. Now another piece of information is added: WCAG assumes color representation in the sRGB color space. But what does that mean exactly? <\/p>\n\n\n\n<p>The sRGB color space is a standard that precisely defines how individual RGB values are interpreted \u2013 that is, how these 3 numbers (e.g., <code>RGB(0, 125, 179)<\/code>) ultimately appear on the screen, particularly in terms of brightness and color perception. <\/p>\n\n\n\n<p>What many do not know: RGB values are not linear in the sRGB color space. This means that a value of <code>128<\/code> on a scale from <code>0<\/code> to <code>255<\/code> does not correspond to half the brightness of a value of <code>255<\/code>.<br\/>The reason for this is a so-called gamma encoding, which adapts the values to the perception of the human eye. While this is useful for display on screens, it leads to incorrect results in mathematical calculations \u2013 such as determining brightness or contrast ratio.<br\/>Therefore, the RGB values must first be linearized (according to <a href=\"https:\/\/webstore.iec.ch\/en\/publication\/6169\" target=\"_blank\" rel=\"noreferrer noopener\">IEC\/4WD 61966-2-1<\/a> – fee-based standard). Only through this step do they correctly reflect the actual light intensity and can be used as a basis for calculating relative luminance.<br\/>The RGB values are linearized using the following formula: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized u-radius-0\"><img loading=\"lazy\" decoding=\"async\" width=\"18145\" height=\"2999\" src=\"https:\/\/leonrenner.com\/wp-content\/uploads\/2026\/02\/Formel-zur-Linearisierung-von-sRGB-Werten.svg\" alt=\"If x is less than or equal to 0.04045, x linear is calculated as x divided by 12.92. If x is greater than 0.04045, x linear is calculated as the fraction of x plus 0.055 divided by 1.055, raised to the power of 2.4. \" class=\"wp-image-1402\" style=\"width:auto;height:70px\"\/><\/figure>\n\n\n<style>.kb-table-container1398_19d6bd-91{overflow-x:auto;}.kb-table-container .kb-table1398_19d6bd-91 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_19d6bd-91 caption{text-align:center;}.kb-table-container .kb-table1398_19d6bd-91 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_19d6bd-91 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_19d6bd-91 td, .kb-table1398_19d6bd-91 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_19d6bd-91 td, .kb-table1398_19d6bd-91 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_19d6bd-91 td, .kb-table1398_19d6bd-91 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_19d6bd-91 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_19d6bd-91\">\n<tr class=\"kb-table-row kb-table-row1398_471e64-84\">\n<th class=\"kb-table-data kb-table-data1398_31470c-a8\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_1a1437-fd\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_91f5d1-1e\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_cfb595-d1\">\n<th class=\"kb-table-data kb-table-data1398_1f697c-43\">\n\n<p><strong>RGB (normalized)<\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_09a0ed-08\">\n\n<p><code><code>RGB(0.0000, 0.4902, 0.7020)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_388ec9-82\">\n\n<p><code><code>RGB(0.9922, 0.9922, 0.9922)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_fd79fa-1f\">\n<th class=\"kb-table-data kb-table-data1398_b632d5-8e\">\n\n<p><strong>RGB (linear)<\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_eed76a-2f\">\n\n<p><code><code>RGB(0.0000, 0.2051, 0.4508)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_ad7bd4-e3\">\n\n<p><code><code>RGB(0.9823, 0.9823, 0.9823)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Calculation of relative luminance<\/h3>\n\n\n\n<p>After the sRGB values have been normalized and linearized, we can now calculate their <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noreferrer noopener\">relative luminance according to WCAG<\/a>. Relative luminance is the brightness of a color, adjusted to human perception. Since the human eye perceives green more intensely than red or blue, for example, the green component of the color is weighted more heavily in the brightness calculation. The scale ranges from <code>0<\/code> (black) to <code>1<\/code> (white). <\/p>\n\n\n\n<p><code>L = 0.2126\u2219R<sub>lin<\/sub> + 0.7152\u2219G<sub>lin<\/sub> + 0.0722\u2219B<sub>lin<\/sub><\/code><\/p>\n\n\n<style>.kb-table-container1398_816eb2-c6{overflow-x:auto;}.kb-table-container .kb-table1398_816eb2-c6 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_816eb2-c6 caption{text-align:center;}.kb-table-container .kb-table1398_816eb2-c6 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_816eb2-c6 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_816eb2-c6 td, .kb-table1398_816eb2-c6 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_816eb2-c6 td, .kb-table1398_816eb2-c6 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_816eb2-c6 td, .kb-table1398_816eb2-c6 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_816eb2-c6 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_816eb2-c6\">\n<tr class=\"kb-table-row kb-table-row1398_eadb82-3b\">\n<th class=\"kb-table-data kb-table-data1398_89123f-b4\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_9f198d-ba\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_0ceeb0-a7\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_d12c5b-d3\">\n<th class=\"kb-table-data kb-table-data1398_e792c5-b5\">\n\n<p><strong><strong>RGB (linear)<\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_e203a1-1c\">\n\n<p><code><code>RGB(0.0000, 0.2051, 0.4508)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_e7d56e-b1\">\n\n<p><code><code>RGB(0.9823, 0.9823, 0.9823)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_a44dcf-67\">\n<th class=\"kb-table-data kb-table-data1398_114074-25\">\n\n<p><strong><strong>Luminance<\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_381eb0-1e\">\n\n<p><code><code>0.1792<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_937533-20\">\n\n<p><code><code>0.9823<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Calculation of contrast ratio<\/h3>\n\n\n\n<p>From the relative luminances of two colors, the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noreferrer noopener\">contrast ratio<\/a> can now be calculated as defined by WCAG:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized u-radius-0\"><img loading=\"lazy\" decoding=\"async\" width=\"6780\" height=\"2195\" src=\"https:\/\/leonrenner.com\/wp-content\/uploads\/2026\/02\/Formel-zur-Berechnung-des-Kontrastverhaeltnisses-aus-den-Luminanzen-zweier-Farben.svg\" alt=\"Contrast ratio equals (L one plus 0.05) divided by (L two plus 0.05)\" class=\"wp-image-1403\" style=\"width:auto;height:70px\"\/><\/figure>\n\n\n\n<p>It should be noted that the lighter color <code>L<sub>1<\/sub><\/code> is always in the numerator, so that the contrast ratio is consistently always <code>\u2265 1.0<\/code>.<\/p>\n\n\n<style>.kb-table-container1398_fab066-e1{overflow-x:auto;}.kb-table-container .kb-table1398_fab066-e1 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_fab066-e1 caption{text-align:center;}.kb-table-container .kb-table1398_fab066-e1 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_fab066-e1 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_fab066-e1 td, .kb-table1398_fab066-e1 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_fab066-e1 td, .kb-table1398_fab066-e1 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_fab066-e1 td, .kb-table1398_fab066-e1 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_fab066-e1 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_fab066-e1\">\n<tr class=\"kb-table-row kb-table-row1398_ee2a1a-e2\">\n<th class=\"kb-table-data kb-table-data1398_fe1cf6-66\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_406b1c-7f\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_0d0a31-82\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_d9ca5b-2d\">\n<th class=\"kb-table-data kb-table-data1398_fdfe06-15\">\n\n<p><strong><strong><strong>Luminance<\/strong><\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_a1bb5a-5a\">\n\n<p><code><code>0.1792<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_f7e393-a2\">\n\n<p><code><code>0.9823<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_218bdb-ac\">\n<th class=\"kb-table-data kb-table-data1398_8215f9-b8\">\n\n<p><strong><strong><strong>Contrast ratio<\/strong><\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_4256cb-aa\">\n\n<p><code>(0.9823 + 0.05) \u00f7 (0.1792 + 0.05) \u2248 4.50 : 1<\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_392847-e4\">\n\n<p><code>(0.9823 + 0.05) \u00f7 (0.1792 + 0.05) \u2248 4.50 : 1<\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<p>The contrast ratio of <code>4.5 : 1<\/code> calculated in this example meets the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#contrast-minimum\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG AA level<\/a>. The selected color combination is therefore “accessible colors.” <\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane1398_54d405-bd\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What is meant by color contrast?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>The term “color contrast” is not clearly defined. Depending on the context (e.g., color theory, photography, fashion, accessible design, etc.), it can refer to very different things. In accessible design, “color contrast” is the colloquial term for the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-contrast-ratio\" target=\"_blank\" rel=\"noreferrer noopener\">technically clearly defined “contrast.”<\/a> This is measurable and refers to the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noreferrer noopener\">brightness difference (luminance)<\/a> between two colors \u2013 completely independent of hue.<br\/>The goal is to choose the contrast as high as possible so that all content is easily perceptible and readable. <\/p>\n\n\n\n<p>But be careful: High contrast does not depend on how different colors appear, but solely on their brightness difference. For example, a light and a dark shade of blue can form a very high contrast \u2013 even though they are the same hue. Conversely, an intense red next to a strong green can be difficult to read despite a strong color effect if both colors have similar brightness.<br\/>The example image shown below clearly illustrates this difference. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized u-radius-0\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"241\" src=\"https:\/\/leonrenner.com\/wp-content\/uploads\/2026\/02\/Farbkontraste-Vergleich-Hellblau-Dunkelblau-vs-Rot-Gruen.svg\" alt=\"Comparison of color contrasts: Left shows high brightness contrast between light blue and dark blue with good readability – despite the same hue. Right shows red-green combination with low brightness and poor readability – despite strong color differences. \" class=\"wp-image-1404\" style=\"aspect-ratio:4.971517348524081;object-fit:contain;width:auto;height:100px\"\/><\/figure>\n\n\n\n<p><strong>Left:<\/strong> Same hue with high brightness contrast and good readability.<br\/><strong>Right:<\/strong> Complementary colors with low brightness difference and poor readability.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane1398_a859de-7e\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Why are color contrasts so important in accessible design?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>High color contrasts are particularly important in accessible design because they ensure that content becomes perceptible and operable for everyone. Color contrast is a major factor in determining how well information on a website or in a document can be captured. Especially with digital content, the readability of texts, the recognizability of controls, or the comprehensibility of graphics depend heavily on contrast.<br\/>Insufficient contrast can lead to content being overlooked or misunderstood \u2013 especially for people with impaired vision. However, users without impairments also benefit from clear contrasts, for example in poor lighting or on mobile devices outdoors.<br\/>Therefore, color contrast is not just a design aspect, but a central criterion for digital accessibility and usability. <\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-4 kt-pane1398_a5f0da-c3\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Which content must have sufficient color contrast?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>All content that serves a genuine functional purpose is relevant. This can include texts, images, diagrams, symbols, and controls. However, the contrast between text and background is particularly important, as texts constitute the main content of many websites and documents. Interactive elements such as forms or buttons must also be clearly recognizable in order to be used reliably.<\/p>\n\n\n\n<p>Purely decorative elements or graphics are not included \u2013 they have no functional purpose and therefore do not need to meet minimum contrasts.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-5 kt-pane1398_652f83-63\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Which users benefit from high color contrast?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Minimum contrasts in accessible design are primarily intended to support people with impaired vision \u2013 such as age-related vision loss, cataracts, or color vision deficiency such as red-green color blindness.<\/p>\n\n\n\n<p>However, people without visual impairments also benefit enormously. Ask yourself: Have you ever had difficulty recognizing content on a display in strong sunlight? High color contrast can make the difference even in such everyday situations. <\/p>\n\n\n\n<p>Therefore: Color contrast plays a major role not only in accessible design \u2013 high contrast optimizes usability for everyone!<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-6 kt-pane1398_4683e0-29\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What are the disadvantages of a poor contrast ratio?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Insufficient color contrast between foreground and background can significantly impair perception and readability \u2013 even for people without visual impairments. Content that needs to be quickly captured or interactive is particularly affected. <\/p>\n\n\n\n<p>Disadvantages of poor contrast ratio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Poor readability of body text, especially at small font sizes<\/li>\n\n\n\n<li>Increased cognitive load and faster fatigue when reading<\/li>\n\n\n\n<li>Errors in data entry, e.g., in forms<\/li>\n\n\n\n<li>Higher risk of overlooking content (e.g., buttons, links, error messages)<\/li>\n\n\n\n<li>Important call-to-actions (e.g., “Buy now” in light gray on white) may not be perceived \u2013 which can directly lead to loss of revenue<\/li>\n\n\n\n<li>Higher bounce rate, especially on mobile devices or in difficult lighting conditions<\/li>\n\n\n\n<li>Exclusion of people with visual impairments<\/li>\n\n\n\n<li>Possible legal violation (BFSG and BITV)<\/li>\n\n\n\n<li>Accessible labels or certification marks (e.g., BITV certification) cannot be achieved<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-7 kt-pane1398_0dd546-26\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What are the advantages of a good contrast ratio?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Sufficient color contrast not only improves accessibility, but also generally increases the usability and visual clarity of content \u2013 on all devices and for all user groups.<\/p>\n\n\n\n<p>Advantages of good contrast ratio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Better readability of texts in all font sizes<\/li>\n\n\n\n<li>Lower cognitive load and better user satisfaction<\/li>\n\n\n\n<li>Higher visibility of important elements such as buttons or links<\/li>\n\n\n\n<li>Safer and faster operation of forms and interactive areas<\/li>\n\n\n\n<li>Positive impact on dwell time, conversion rate, and user retention<\/li>\n\n\n\n<li>Improved usability in unfavorable lighting conditions (e.g., sunlight)<\/li>\n\n\n\n<li>Accessibility for people with visual impairments<\/li>\n\n\n\n<li>Legal compliance<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-8 kt-pane1398_7fb6bd-17\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Common misconceptions about color contrast<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Despite clear technical definitions and guidelines around color contrast, some misconceptions persist stubbornly in practice \u2013 especially in design processes. The following statements sound familiar, but often lead to non-accessible results: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>“Light gray is modern” \u2192 That is true \u2013 but only if the contrast is sufficient. Fashionable design must not come at the expense of readability. <\/li>\n\n\n\n<li>“Contrast is a matter of taste” \u2192 No \u2013 contrast is clearly measurable and objectively verifiable according to WCAG.<\/li>\n\n\n\n<li>“My target audience has good vision” \u2192 Accessible design does not only offer advantages for people with visual impairments. It increases usability for everyone. <\/li>\n\n\n\n<li>“That is just a design question.” \u2192 No \u2013 color contrast affects not only aesthetics, but also the perceptibility and usability of content.<\/li>\n<\/ul>\n\n\n\n<p>These and similar statements quickly lead to contrast requirements being underestimated or ignored \u2013 with negative consequences for usability and accessibility.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Want to know if your color contrasts are accessible? Our contrast checker shows you the contrast ratio in real time \u2013 including WCAG evaluation and preview.<\/p>\n","protected":false},"author":2,"featured_media":2560,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2184","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages\/2184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/comments?post=2184"}],"version-history":[{"count":4,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages\/2184\/revisions"}],"predecessor-version":[{"id":2588,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages\/2184\/revisions\/2588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/media?parent=2184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2184,"date":"2026-02-15T13:51:20","date_gmt":"2026-02-15T12:51:20","guid":{"rendered":"https:\/\/darkcyan-guanaco-919474.hostingersite.com\/kontrastrechner\/"},"modified":"2026-04-01T15:27:47","modified_gmt":"2026-04-01T13:27:47","slug":"contrast-calculator","status":"publish","type":"page","link":"https:\/\/leonrenner.com\/en\/contrast-calculator\/","title":{"rendered":"Contrast Checker \u2013 Test Color Contrasts for Accessibility"},"content":{"rendered":"\n

Want to know if your color contrasts are accessible? Our contrast checker shows you the contrast ratio in real time \u2013 including WCAG evaluation and preview. <\/p>\nKontrastrechner<\/title><\/head><body><section class=\"contrast-calc__wrapper\"><div class=\"contrast-calc__container\"><form class=\"contrast-calc\"><fieldset class=\"contrast-calc__box contrast-calc__box--foreground\"><legend class=\"contrast-calc__legend\">Farbe Vordergrund<\/legend><div class=\"contrast-calc__section contrast-calc__section--hex\"><label for=\"foreground-hex\" class=\"contrast-calc__label\">HEX-Farbwert <span id=\"foreground-error-inline\" class=\"error-inline\" role=\"alert\" aria-live=\"assertive\"><\/span><\/label> <input id=\"foreground-hex\" type=\"text\" class=\"contrast-calc__input contrast-calc__input--hex\" maxlength=\"7\" pattern=\"^#?[0-9A-Fa-f]{6}$\" title=\"Bitte einen g\u00fcltigen HEX-Farbcode im Format #RRGGBB eingeben\"><\/div><div class=\"contrast-calc__section contrast-calc__section--rgb\"><label class=\"contrast-calc__label\">RGB-Farbwert<\/label><div class=\"contrast-calc__rgb\"><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--red\"><label for=\"foreground-r\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--red\">R<\/label> <input id=\"foreground-r\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--red\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--green\"><label for=\"foreground-g\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--green\">G<\/label> <input id=\"foreground-g\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--green\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--blue\"><label for=\"foreground-b\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--blue\">B<\/label> <input id=\"foreground-b\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--blue\" min=\"0\" max=\"255\" step=\"1\"><\/div><\/div><\/div><div class=\"contrast-calc__section contrast-calc__section--picker\"><label for=\"foreground-color-picker\" class=\"contrast-calc__label\">Farbw\u00e4hler<\/label> <input id=\"foreground-color-picker\" type=\"color\" class=\"contrast-calc__input contrast-calc__input--picker\" value=\"#007db3\"><\/div><div class=\"contrast-calc__section contrast-calc__section--brightness\"><label for=\"foreground-brightness\" class=\"contrast-calc__label\">Helligkeit<\/label> <input id=\"foreground-brightness\" type=\"range\" class=\"contrast-calc__input contrast-calc__input--brightness\" min=\"0\" max=\"100\" step=\"1\"><\/div><\/fieldset><button id=\"swap-button\" type=\"button\" class=\"contrast-calc__swap-button\" aria-label=\"Farben tauschen\" title=\"Farben tauschen\"><svg class=\"contrast-calc__icon-swap\" viewBox=\"0 0 28.35 33.07\" width=\"24\" height=\"28\" aria-hidden=\"true\"><path id=\"path2\" class=\"cls-1\" d=\"M10.11,18.38c.69-.69.69-1.81,0-2.51-.69-.69-1.81-.69-2.51,0L.52,22.96c-.33.33-.52.78-.52,1.25s.19.92.52,1.25l7.09,7.09c.69.69,1.81.69,2.51,0,.69-.69.69-1.81,0-2.51l-4.06-4.06h20.53c.98,0,1.77-.79,1.77-1.77s-.79-1.77-1.77-1.77H6.05l4.06-4.06Z\" fill=\"currentColor\"\/><path id=\"path1\" class=\"cls-1\" d=\"M20.74.52c-.69-.69-1.81-.69-2.51,0s-.69,1.81,0,2.51l4.06,4.06H1.77c-.98,0-1.77.79-1.77,1.77s.79,1.77,1.77,1.77h20.53l-4.06,4.06c-.69.69-.69,1.81,0,2.51.69.69,1.81.69,2.51,0l7.09-7.09c.69-.69.69-1.81,0-2.51L20.74.52Z\" fill=\"currentColor\"\/><\/svg><\/button><fieldset class=\"contrast-calc__box contrast-calc__box--background\"><legend class=\"contrast-calc__legend\">Farbe Hintergrund<\/legend><div class=\"contrast-calc__section contrast-calc__section--hex\"><label for=\"background-hex\" class=\"contrast-calc__label\">HEX-Farbwert <span id=\"background-error-inline\" class=\"error-inline\" role=\"alert\" aria-live=\"assertive\"><\/span><\/label> <input id=\"background-hex\" type=\"text\" class=\"contrast-calc__input contrast-calc__input--hex\" maxlength=\"7\" pattern=\"^#?[0-9A-Fa-f]{6}$\" title=\"Bitte einen g\u00fcltigen HEX-Farbcode im Format #RRGGBB eingeben\"><\/div><div class=\"contrast-calc__section contrast-calc__section--rgb\"><label class=\"contrast-calc__label\">RGB-Farbwert<\/label><div class=\"contrast-calc__rgb\"><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--red\"><label for=\"background-r\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--red\">R<\/label> <input id=\"background-r\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--red\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--green\"><label for=\"background-g\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--green\">G<\/label> <input id=\"background-g\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--green\" min=\"0\" max=\"255\" step=\"1\"><\/div><div class=\"contrast-calc__rgb-channel contrast-calc__rgb-channel--blue\"><label for=\"background-b\" class=\"contrast-calc__rgb-label contrast-calc__rgb-label--blue\">B<\/label> <input id=\"background-b\" type=\"number\" class=\"contrast-calc__input contrast-calc__rgb-input contrast-calc__rgb-input--blue\" min=\"0\" max=\"255\" step=\"1\"><\/div><\/div><\/div><div class=\"contrast-calc__section contrast-calc__section--picker\"><label for=\"background-color-picker\" class=\"contrast-calc__label\">Farbw\u00e4hler<\/label> <input id=\"background-color-picker\" type=\"color\" class=\"contrast-calc__input contrast-calc__input--picker\" value=\"#FDFDFD\"><\/div><div class=\"contrast-calc__section contrast-calc__section--brightness\"><label for=\"background-brightness\" class=\"contrast-calc__label\">Helligkeit<\/label> <input id=\"background-brightness\" type=\"range\" class=\"contrast-calc__input contrast-calc__input--brightness\" min=\"0\" max=\"100\" step=\"1\"><\/div><\/fieldset><\/form><section aria-label=\"Ergebnis, WCAG Bewertung und Vorschau\" class=\"result-preview\"><div class=\"result-preview__result\"><h2>Kontrastverh\u00e4ltnis<\/h2><p id=\"result-display\" class=\"result-preview__value\" aria-live=\"polite\">21.00 : 1<\/p><\/div><div class=\"result-preview__wcag\" aria-label=\"WCAG Bewertung\"><div class=\"wcag-rating wcag-rating--aa\"><h3 class=\"wcag-rating__heading\">WCAG AA<\/h3><ul class=\"wcag-rating__criteria\"><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Normaler Text<\/span> <span id=\"wcag-aa-normal\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Normaler Text\">Erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Gro\u00dfer Text (≥18 pt)<\/span> <span id=\"wcag-aa-large\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Gro\u00dfer Text\">Erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Grafiken & UI<\/span> <span id=\"wcag-aa-ui\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Grafiken und UI\">Nicht erf\u00fcllt<\/span><\/li><\/ul><\/div><div class=\"wcag-rating wcag-rating--aaa\"><h3 class=\"wcag-rating__heading\">WCAG AAA<\/h3><ul class=\"wcag-rating__criteria\"><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Kleiner Text<\/span> <span id=\"wcag-aaa-normal\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Normaler Text\">Nicht erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Gro\u00dfer Text (≥18 pt)<\/span> <span id=\"wcag-aaa-large\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Gro\u00dfer Text\">Erf\u00fcllt<\/span><\/li><li class=\"wcag-rating__item\"><span class=\"wcag-rating__criteria-label\">Grafiken & UI<\/span> <span id=\"wcag-aaa-ui\" class=\"wcag-rating__criteria-value\" role=\"img\" aria-label=\"Grafiken und UI\">Erf\u00fcllt<\/span><\/li><\/ul><\/div><\/div><div id=\"result-preview\" class=\"result-preview__preview\" aria-label=\"Farbvorschau\"><h3 id=\"result-preview-heading\">Heading<\/h3><p id=\"result-preview-paragraph\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p><\/div><\/section><\/div><\/section><\/body><\/html>\n<style>.kt-accordion-id1398_604c87-e9 .kt-accordion-inner-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:10px;}.kt-accordion-id1398_604c87-e9 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);border-top-left-radius:0.33em;border-top-right-radius:0.33em;border-bottom-right-radius:0.33em;border-bottom-left-radius:0.33em;background:var(--global-palette8, #F7FAFC);font-weight:600;color:var(--global-palette3, #1A202C);padding-top:13px;padding-right:15px;padding-bottom:13px;padding-left:15px;}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette8, #F7FAFC);}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9 .kt-blocks-accordion-header:focus-visible{color:var(--global-palette3, #1A202C);background:var(--global-palette8, #F7FAFC);border-top:1px solid var(--global-palette4, #2D3748);border-right:1px solid var(--global-palette4, #2D3748);border-bottom:1px solid var(--global-palette4, #2D3748);border-left:1px solid var(--global-palette4, #2D3748);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger{background:var(--global-palette3, #1A202C);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette8, #F7FAFC);}.kt-accordion-id1398_604c87-e9 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{color:var(--global-palette6, #718096);background:var(--global-palette1, #3182CE);border-top:1px solid var(--global-palette1, #3182CE);border-right:1px solid var(--global-palette1, #3182CE);border-bottom:1px solid var(--global-palette1, #3182CE);border-left:1px solid var(--global-palette1, #3182CE);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette6, #718096);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger{background:var(--global-palette6, #718096);}.kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id1398_604c87-e9:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette1, #3182CE);}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9 .kt-blocks-accordion-header:focus-visible{border-top:1px solid var(--global-palette4, #2D3748);border-right:1px solid var(--global-palette4, #2D3748);border-bottom:1px solid var(--global-palette4, #2D3748);border-left:1px solid var(--global-palette4, #2D3748);}}@media all and (max-width: 1024px){.kt-accordion-id1398_604c87-e9 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid var(--global-palette1, #3182CE);border-right:1px solid var(--global-palette1, #3182CE);border-bottom:1px solid var(--global-palette1, #3182CE);border-left:1px solid var(--global-palette1, #3182CE);}}@media all and (max-width: 767px){.kt-accordion-id1398_604c87-e9 .kt-accordion-inner-wrap{display:block;}.kt-accordion-id1398_604c87-e9 .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child){margin-top:10px;}.kt-accordion-id1398_604c87-e9 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id1398_604c87-e9 .kt-blocks-accordion-header:focus-visible{border-top:1px solid var(--global-palette4, #2D3748);border-right:1px solid var(--global-palette4, #2D3748);border-bottom:1px solid var(--global-palette4, #2D3748);border-left:1px solid var(--global-palette4, #2D3748);}.kt-accordion-id1398_604c87-e9 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id1398_604c87-e9 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid var(--global-palette1, #3182CE);border-right:1px solid var(--global-palette1, #3182CE);border-bottom:1px solid var(--global-palette1, #3182CE);border-left:1px solid var(--global-palette1, #3182CE);}}<\/style>\n<div class=\"wp-block-kadence-accordion alignnone\"><div class=\"kt-accordion-wrap kt-accordion-id1398_604c87-e9 kt-accordion-has-8-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right\" style=\"max-width:none\"><div class=\"kt-accordion-inner-wrap\" data-allow-multiple-open=\"false\" data-start-open=\"none\">\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane1398_02f343-44\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">How does the contrast checker calculate the contrast ratio according to WCAG?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>The contrast ratio between foreground and background color is crucial for accessible colors (or color combinations).<br\/>For digital media (e.g., websites, PDFs) to be accessible, they must meet various requirements. One of these requirements concerns the contrast ratio between the colors used. In Europe and many other parts of the world, the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-contrast-ratio\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG contrast calculation<\/a> is used for this purpose, which is explained below. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conversion from HEX to RGB<\/h3>\n\n\n\n<p>The WCAG contrast calculation is based on the RGB color model in its numerical RGB representation (e.g., <code>RGB(0, 125, 179)<\/code>). In the digital world, however, colors are typically available in HEX-encoded form (e.g., <code>#007db3<\/code>) and must therefore first be converted to RGB values. Since the conversion from HEX to RGB is available as a standard function in most programming languages, the exact formula is not explained further here. Instead, the following table shows the already calculated RGB values for two example HEX colors \u2013 for foreground and background respectively. <\/p>\n\n\n<style>.kb-table-container1398_31bc7e-31{overflow-x:auto;}.kb-table-container .kb-table1398_31bc7e-31 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_31bc7e-31 caption{text-align:center;}.kb-table-container .kb-table1398_31bc7e-31 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_31bc7e-31 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_31bc7e-31 td, .kb-table1398_31bc7e-31 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_31bc7e-31 td, .kb-table1398_31bc7e-31 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_31bc7e-31 td, .kb-table1398_31bc7e-31 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_31bc7e-31 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_31bc7e-31\">\n<tr class=\"kb-table-row kb-table-row1398_082a11-1b\">\n<th class=\"kb-table-data kb-table-data1398_6a7ff1-69\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_8b1b24-a3\">\n\n<p>Foreground<\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_a3b216-43\">\n\n<p>Background<\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_20a8f7-ab\">\n<th class=\"kb-table-data kb-table-data1398_55f8b1-0a\">\n\n<p>HEX<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_8d1aa8-94\">\n\n<p><code>#007db3<\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_77e856-80\">\n\n<p><code>#fdfdfd<\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_a34922-25\">\n<th class=\"kb-table-data kb-table-data1398_c4ec8b-4a\">\n\n<p>RGB (8-bit)<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_190064-b1\">\n\n<p><code>RGB(0, 125, 179)<\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_4bab40-a5\">\n\n<p><code>RGB(253, 253, 253)<\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Normalization of RGB values<\/h3>\n\n\n\n<p>In the next step, the 8-bit RGB values are transferred from the original value range <code>[0; 255]<\/code> to the normalized range <code>[0; 1]<\/code> by dividing each by 255.<\/p>\n\n\n<style>.kb-table-container1398_0a9f55-fd{overflow-x:auto;}.kb-table-container .kb-table1398_0a9f55-fd th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_0a9f55-fd caption{text-align:center;}.kb-table-container .kb-table1398_0a9f55-fd td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_0a9f55-fd tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_0a9f55-fd td, .kb-table1398_0a9f55-fd th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_0a9f55-fd td, .kb-table1398_0a9f55-fd th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_0a9f55-fd td, .kb-table1398_0a9f55-fd th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_0a9f55-fd wp-block-kadence-table\"><table class=\"kb-table kb-table1398_0a9f55-fd\">\n<tr class=\"kb-table-row kb-table-row1398_cc5c0d-1b\">\n<th class=\"kb-table-data kb-table-data1398_5a185e-b1\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_4aada2-3e\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_21c9ac-d9\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_c6afdd-5a\">\n<th class=\"kb-table-data kb-table-data1398_b4c06f-cc\">\n\n<p>RGB (8-bit)<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_6e8edb-aa\">\n\n<p><code><code>RGB(0, 125, 179)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_cd825e-58\">\n\n<p><code><code>RGB(253, 253, 253)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_252a30-d2\">\n<th class=\"kb-table-data kb-table-data1398_ab18d5-6d\">\n\n<p>RGB (normalized)<\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_c2fa62-ff\">\n\n<p><code><code>RGB(0.0000, 0.4902, 0.7020)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_6efb33-1e\">\n\n<p><code><code>RGB(0.9922, 0.9922, 0.9922)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Linearization of color values<\/h3>\n\n\n\n<p>So far, you know that the calculation is based on the RGB color model. Now another piece of information is added: WCAG assumes color representation in the sRGB color space. But what does that mean exactly? <\/p>\n\n\n\n<p>The sRGB color space is a standard that precisely defines how individual RGB values are interpreted \u2013 that is, how these 3 numbers (e.g., <code>RGB(0, 125, 179)<\/code>) ultimately appear on the screen, particularly in terms of brightness and color perception. <\/p>\n\n\n\n<p>What many do not know: RGB values are not linear in the sRGB color space. This means that a value of <code>128<\/code> on a scale from <code>0<\/code> to <code>255<\/code> does not correspond to half the brightness of a value of <code>255<\/code>.<br\/>The reason for this is a so-called gamma encoding, which adapts the values to the perception of the human eye. While this is useful for display on screens, it leads to incorrect results in mathematical calculations \u2013 such as determining brightness or contrast ratio.<br\/>Therefore, the RGB values must first be linearized (according to <a href=\"https:\/\/webstore.iec.ch\/en\/publication\/6169\" target=\"_blank\" rel=\"noreferrer noopener\">IEC\/4WD 61966-2-1<\/a> – fee-based standard). Only through this step do they correctly reflect the actual light intensity and can be used as a basis for calculating relative luminance.<br\/>The RGB values are linearized using the following formula: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized u-radius-0\"><img loading=\"lazy\" decoding=\"async\" width=\"18145\" height=\"2999\" src=\"https:\/\/leonrenner.com\/wp-content\/uploads\/2026\/02\/Formel-zur-Linearisierung-von-sRGB-Werten.svg\" alt=\"If x is less than or equal to 0.04045, x linear is calculated as x divided by 12.92. If x is greater than 0.04045, x linear is calculated as the fraction of x plus 0.055 divided by 1.055, raised to the power of 2.4. \" class=\"wp-image-1402\" style=\"width:auto;height:70px\"\/><\/figure>\n\n\n<style>.kb-table-container1398_19d6bd-91{overflow-x:auto;}.kb-table-container .kb-table1398_19d6bd-91 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_19d6bd-91 caption{text-align:center;}.kb-table-container .kb-table1398_19d6bd-91 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_19d6bd-91 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_19d6bd-91 td, .kb-table1398_19d6bd-91 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_19d6bd-91 td, .kb-table1398_19d6bd-91 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_19d6bd-91 td, .kb-table1398_19d6bd-91 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_19d6bd-91 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_19d6bd-91\">\n<tr class=\"kb-table-row kb-table-row1398_471e64-84\">\n<th class=\"kb-table-data kb-table-data1398_31470c-a8\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_1a1437-fd\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_91f5d1-1e\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_cfb595-d1\">\n<th class=\"kb-table-data kb-table-data1398_1f697c-43\">\n\n<p><strong>RGB (normalized)<\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_09a0ed-08\">\n\n<p><code><code>RGB(0.0000, 0.4902, 0.7020)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_388ec9-82\">\n\n<p><code><code>RGB(0.9922, 0.9922, 0.9922)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_fd79fa-1f\">\n<th class=\"kb-table-data kb-table-data1398_b632d5-8e\">\n\n<p><strong>RGB (linear)<\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_eed76a-2f\">\n\n<p><code><code>RGB(0.0000, 0.2051, 0.4508)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_ad7bd4-e3\">\n\n<p><code><code>RGB(0.9823, 0.9823, 0.9823)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Calculation of relative luminance<\/h3>\n\n\n\n<p>After the sRGB values have been normalized and linearized, we can now calculate their <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noreferrer noopener\">relative luminance according to WCAG<\/a>. Relative luminance is the brightness of a color, adjusted to human perception. Since the human eye perceives green more intensely than red or blue, for example, the green component of the color is weighted more heavily in the brightness calculation. The scale ranges from <code>0<\/code> (black) to <code>1<\/code> (white). <\/p>\n\n\n\n<p><code>L = 0.2126\u2219R<sub>lin<\/sub> + 0.7152\u2219G<sub>lin<\/sub> + 0.0722\u2219B<sub>lin<\/sub><\/code><\/p>\n\n\n<style>.kb-table-container1398_816eb2-c6{overflow-x:auto;}.kb-table-container .kb-table1398_816eb2-c6 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_816eb2-c6 caption{text-align:center;}.kb-table-container .kb-table1398_816eb2-c6 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_816eb2-c6 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_816eb2-c6 td, .kb-table1398_816eb2-c6 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_816eb2-c6 td, .kb-table1398_816eb2-c6 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_816eb2-c6 td, .kb-table1398_816eb2-c6 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_816eb2-c6 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_816eb2-c6\">\n<tr class=\"kb-table-row kb-table-row1398_eadb82-3b\">\n<th class=\"kb-table-data kb-table-data1398_89123f-b4\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_9f198d-ba\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_0ceeb0-a7\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_d12c5b-d3\">\n<th class=\"kb-table-data kb-table-data1398_e792c5-b5\">\n\n<p><strong><strong>RGB (linear)<\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_e203a1-1c\">\n\n<p><code><code>RGB(0.0000, 0.2051, 0.4508)<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_e7d56e-b1\">\n\n<p><code><code>RGB(0.9823, 0.9823, 0.9823)<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_a44dcf-67\">\n<th class=\"kb-table-data kb-table-data1398_114074-25\">\n\n<p><strong><strong>Luminance<\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_381eb0-1e\">\n\n<p><code><code>0.1792<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_937533-20\">\n\n<p><code><code>0.9823<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<h3 class=\"wp-block-heading\">Calculation of contrast ratio<\/h3>\n\n\n\n<p>From the relative luminances of two colors, the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noreferrer noopener\">contrast ratio<\/a> can now be calculated as defined by WCAG:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized u-radius-0\"><img loading=\"lazy\" decoding=\"async\" width=\"6780\" height=\"2195\" src=\"https:\/\/leonrenner.com\/wp-content\/uploads\/2026\/02\/Formel-zur-Berechnung-des-Kontrastverhaeltnisses-aus-den-Luminanzen-zweier-Farben.svg\" alt=\"Contrast ratio equals (L one plus 0.05) divided by (L two plus 0.05)\" class=\"wp-image-1403\" style=\"width:auto;height:70px\"\/><\/figure>\n\n\n\n<p>It should be noted that the lighter color <code>L<sub>1<\/sub><\/code> is always in the numerator, so that the contrast ratio is consistently always <code>\u2265 1.0<\/code>.<\/p>\n\n\n<style>.kb-table-container1398_fab066-e1{overflow-x:auto;}.kb-table-container .kb-table1398_fab066-e1 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_fab066-e1 caption{text-align:center;}.kb-table-container .kb-table1398_fab066-e1 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}.kb-table-container .kb-table1398_fab066-e1 tr:nth-of-type(even){background-color:var(--global-palette8, #F7FAFC);}.kb-table-container .kb-table1398_fab066-e1 td, .kb-table1398_fab066-e1 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}@media all and (max-width: 1024px){.kb-table-container .kb-table1398_fab066-e1 td, .kb-table1398_fab066-e1 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}@media all and (max-width: 767px){.kb-table-container .kb-table1398_fab066-e1 td, .kb-table1398_fab066-e1 th{border-top:1px solid var(--global-palette8, #F7FAFC);border-right:1px solid var(--global-palette8, #F7FAFC);border-bottom:1px solid var(--global-palette8, #F7FAFC);border-left:1px solid var(--global-palette8, #F7FAFC);}}<\/style><div class=\"kb-table-container kb-table-container1398_fab066-e1 wp-block-kadence-table\"><table class=\"kb-table kb-table1398_fab066-e1\">\n<tr class=\"kb-table-row kb-table-row1398_ee2a1a-e2\">\n<th class=\"kb-table-data kb-table-data1398_fe1cf6-66\">\n\n<p><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_406b1c-7f\">\n\n<p>Foreground<br\/><code>#007db3<\/code><\/p>\n\n<\/th>\n\n<th class=\"kb-table-data kb-table-data1398_0d0a31-82\">\n\n<p>Background<br\/><code>#fdfdfd<\/code><\/p>\n\n<\/th>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_d9ca5b-2d\">\n<th class=\"kb-table-data kb-table-data1398_fdfe06-15\">\n\n<p><strong><strong><strong>Luminance<\/strong><\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_a1bb5a-5a\">\n\n<p><code><code>0.1792<\/code><\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_f7e393-a2\">\n\n<p><code><code>0.9823<\/code><\/code><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row1398_218bdb-ac\">\n<th class=\"kb-table-data kb-table-data1398_8215f9-b8\">\n\n<p><strong><strong><strong>Contrast ratio<\/strong><\/strong><\/strong><\/p>\n\n<\/th>\n\n<td class=\"kb-table-data kb-table-data1398_4256cb-aa\">\n\n<p><code>(0.9823 + 0.05) \u00f7 (0.1792 + 0.05) \u2248 4.50 : 1<\/code><\/p>\n\n<\/td>\n\n<td class=\"kb-table-data kb-table-data1398_392847-e4\">\n\n<p><code>(0.9823 + 0.05) \u00f7 (0.1792 + 0.05) \u2248 4.50 : 1<\/code><\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<p>The contrast ratio of <code>4.5 : 1<\/code> calculated in this example meets the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#contrast-minimum\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG AA level<\/a>. The selected color combination is therefore “accessible colors.” <\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane1398_54d405-bd\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What is meant by color contrast?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>The term “color contrast” is not clearly defined. Depending on the context (e.g., color theory, photography, fashion, accessible design, etc.), it can refer to very different things. In accessible design, “color contrast” is the colloquial term for the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-contrast-ratio\" target=\"_blank\" rel=\"noreferrer noopener\">technically clearly defined “contrast.”<\/a> This is measurable and refers to the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noreferrer noopener\">brightness difference (luminance)<\/a> between two colors \u2013 completely independent of hue.<br\/>The goal is to choose the contrast as high as possible so that all content is easily perceptible and readable. <\/p>\n\n\n\n<p>But be careful: High contrast does not depend on how different colors appear, but solely on their brightness difference. For example, a light and a dark shade of blue can form a very high contrast \u2013 even though they are the same hue. Conversely, an intense red next to a strong green can be difficult to read despite a strong color effect if both colors have similar brightness.<br\/>The example image shown below clearly illustrates this difference. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized u-radius-0\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"241\" src=\"https:\/\/leonrenner.com\/wp-content\/uploads\/2026\/02\/Farbkontraste-Vergleich-Hellblau-Dunkelblau-vs-Rot-Gruen.svg\" alt=\"Comparison of color contrasts: Left shows high brightness contrast between light blue and dark blue with good readability – despite the same hue. Right shows red-green combination with low brightness and poor readability – despite strong color differences. \" class=\"wp-image-1404\" style=\"aspect-ratio:4.971517348524081;object-fit:contain;width:auto;height:100px\"\/><\/figure>\n\n\n\n<p><strong>Left:<\/strong> Same hue with high brightness contrast and good readability.<br\/><strong>Right:<\/strong> Complementary colors with low brightness difference and poor readability.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane1398_a859de-7e\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Why are color contrasts so important in accessible design?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>High color contrasts are particularly important in accessible design because they ensure that content becomes perceptible and operable for everyone. Color contrast is a major factor in determining how well information on a website or in a document can be captured. Especially with digital content, the readability of texts, the recognizability of controls, or the comprehensibility of graphics depend heavily on contrast.<br\/>Insufficient contrast can lead to content being overlooked or misunderstood \u2013 especially for people with impaired vision. However, users without impairments also benefit from clear contrasts, for example in poor lighting or on mobile devices outdoors.<br\/>Therefore, color contrast is not just a design aspect, but a central criterion for digital accessibility and usability. <\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-4 kt-pane1398_a5f0da-c3\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Which content must have sufficient color contrast?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>All content that serves a genuine functional purpose is relevant. This can include texts, images, diagrams, symbols, and controls. However, the contrast between text and background is particularly important, as texts constitute the main content of many websites and documents. Interactive elements such as forms or buttons must also be clearly recognizable in order to be used reliably.<\/p>\n\n\n\n<p>Purely decorative elements or graphics are not included \u2013 they have no functional purpose and therefore do not need to meet minimum contrasts.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-5 kt-pane1398_652f83-63\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Which users benefit from high color contrast?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Minimum contrasts in accessible design are primarily intended to support people with impaired vision \u2013 such as age-related vision loss, cataracts, or color vision deficiency such as red-green color blindness.<\/p>\n\n\n\n<p>However, people without visual impairments also benefit enormously. Ask yourself: Have you ever had difficulty recognizing content on a display in strong sunlight? High color contrast can make the difference even in such everyday situations. <\/p>\n\n\n\n<p>Therefore: Color contrast plays a major role not only in accessible design \u2013 high contrast optimizes usability for everyone!<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-6 kt-pane1398_4683e0-29\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What are the disadvantages of a poor contrast ratio?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Insufficient color contrast between foreground and background can significantly impair perception and readability \u2013 even for people without visual impairments. Content that needs to be quickly captured or interactive is particularly affected. <\/p>\n\n\n\n<p>Disadvantages of poor contrast ratio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Poor readability of body text, especially at small font sizes<\/li>\n\n\n\n<li>Increased cognitive load and faster fatigue when reading<\/li>\n\n\n\n<li>Errors in data entry, e.g., in forms<\/li>\n\n\n\n<li>Higher risk of overlooking content (e.g., buttons, links, error messages)<\/li>\n\n\n\n<li>Important call-to-actions (e.g., “Buy now” in light gray on white) may not be perceived \u2013 which can directly lead to loss of revenue<\/li>\n\n\n\n<li>Higher bounce rate, especially on mobile devices or in difficult lighting conditions<\/li>\n\n\n\n<li>Exclusion of people with visual impairments<\/li>\n\n\n\n<li>Possible legal violation (BFSG and BITV)<\/li>\n\n\n\n<li>Accessible labels or certification marks (e.g., BITV certification) cannot be achieved<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-7 kt-pane1398_0dd546-26\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What are the advantages of a good contrast ratio?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Sufficient color contrast not only improves accessibility, but also generally increases the usability and visual clarity of content \u2013 on all devices and for all user groups.<\/p>\n\n\n\n<p>Advantages of good contrast ratio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Better readability of texts in all font sizes<\/li>\n\n\n\n<li>Lower cognitive load and better user satisfaction<\/li>\n\n\n\n<li>Higher visibility of important elements such as buttons or links<\/li>\n\n\n\n<li>Safer and faster operation of forms and interactive areas<\/li>\n\n\n\n<li>Positive impact on dwell time, conversion rate, and user retention<\/li>\n\n\n\n<li>Improved usability in unfavorable lighting conditions (e.g., sunlight)<\/li>\n\n\n\n<li>Accessibility for people with visual impairments<\/li>\n\n\n\n<li>Legal compliance<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-8 kt-pane1398_7fb6bd-17\"><h2 class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Common misconceptions about color contrast<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/h2><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p>Despite clear technical definitions and guidelines around color contrast, some misconceptions persist stubbornly in practice \u2013 especially in design processes. The following statements sound familiar, but often lead to non-accessible results: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>“Light gray is modern” \u2192 That is true \u2013 but only if the contrast is sufficient. Fashionable design must not come at the expense of readability. <\/li>\n\n\n\n<li>“Contrast is a matter of taste” \u2192 No \u2013 contrast is clearly measurable and objectively verifiable according to WCAG.<\/li>\n\n\n\n<li>“My target audience has good vision” \u2192 Accessible design does not only offer advantages for people with visual impairments. It increases usability for everyone. <\/li>\n\n\n\n<li>“That is just a design question.” \u2192 No \u2013 color contrast affects not only aesthetics, but also the perceptibility and usability of content.<\/li>\n<\/ul>\n\n\n\n<p>These and similar statements quickly lead to contrast requirements being underestimated or ignored \u2013 with negative consequences for usability and accessibility.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Want to know if your color contrasts are accessible? Our contrast checker shows you the contrast ratio in real time \u2013 including WCAG evaluation and preview.<\/p>\n","protected":false},"author":2,"featured_media":2560,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2184","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages\/2184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/comments?post=2184"}],"version-history":[{"count":4,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages\/2184\/revisions"}],"predecessor-version":[{"id":2588,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/pages\/2184\/revisions\/2588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/leonrenner.com\/en\/wp-json\/wp\/v2\/media?parent=2184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}