{"id":5808,"date":"2026-07-01T06:32:54","date_gmt":"2026-07-01T13:32:54","guid":{"rendered":"https:\/\/clone.surecookie.com\/docs\/customizing-banner-colors-custom-colors-wcag\/"},"modified":"2026-07-10T04:02:58","modified_gmt":"2026-07-10T11:02:58","slug":"customizing-banner-colors","status":"publish","type":"docs","link":"https:\/\/clone.surecookie.com\/de\/docs\/customizing-banner-colors\/","title":{"rendered":"Customizing Banner Colors (Custom Colors, WCAG)"},"content":{"rendered":"

You can match the cookie banner to your site’s look. SureCookie ships with ready-made color palettes, and on SureCookie Pro<\/strong> you can set your own brand colors. As you pick custom colors, SureCookie shows a WCAG contrast<\/strong> reading, so your banner text stays readable for everyone.<\/p>\n\n\n\n

You’ll find these options at SureCookie \u2192 Settings \u2192 Banner \u2192 Layout<\/strong>, in the Color Palette<\/strong> section.<\/p>\n\n\n\n

\"SureCookie<\/figure>\n\n\n\n

Pick a Color Palette<\/h2>\n\n\n\n

A preset palette is the quickest way to restyle the banner, and it’s available on all plans.<\/p>\n\n\n\n

    \n
  1. Go to SureCookie \u2192 Settings \u2192 Banner \u2192 Layout<\/strong> and scroll to Color Palette<\/strong>.<\/li>\n\n\n\n
  2. Click one of the palette swatches. Each swatch previews its button colors, and the active palette’s name shows next to Color Palette:<\/strong> (for example, Green & Lime<\/em>).<\/li>\n\n\n\n
  3. Click Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n

    Set Custom Brand Colors<\/h2>\n\n\n\n

    Custom colors are a SureCookie Pro<\/strong> feature.<\/p>\n\n\n\n

      \n
    1. In the Color Palette<\/strong> row, select the last swatch, the multicolor Custom<\/strong> option.<\/li>\n\n\n\n
    2. The Custom Palette<\/strong> pickers appear. Set the banner’s colors, buttons, text, and background, to match your brand.<\/li>\n\n\n\n
    3. Click Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n

      Keep Your Banner Accessible<\/h2>\n\n\n\n

      Readable text isn’t just good design; it’s part of accessibility compliance. SureCookie helps you get it right as you choose custom colors.<\/p>\n\n\n\n

        \n
      • Below the custom pickers, SureCookie shows a contrast ratio<\/strong> (for example, 10.3:1<\/strong>) with an at-a-glance verdict such as Good contrast<\/strong>.<\/li>\n\n\n\n
      • This follows WCAG contrast guidance. As a rule of thumb, aim for at least 4.5:1<\/strong> for normal text and 3:1<\/strong> for large text.<\/li>\n\n\n\n
      • If the reading flags low contrast, adjust your text color or background until it passes. A comfortably high ratio keeps your banner easy to read for everyone. <\/li>\n<\/ul>\n\n\n\n

        Tips<\/h2>\n\n\n\n
          \n
        • Give your primary action (such as Accept All<\/strong>) the most prominent color so it stands out.<\/li>\n\n\n\n
        • Preview your colors before saving. Toggle Preview<\/strong> in the top bar to see the banner live on your admin screens.<\/li>\n\n\n\n
        • For styling beyond colors, use SureCookie \u2192 Settings \u2192 Banner \u2192 Custom CSS<\/strong>.<\/li>\n<\/ul>\n\n\n\n

          Troubleshooting<\/h2>\n\n\n\n
            \n
          • Colors didn’t change on the site<\/strong> \u2013 Make sure you clicked Save<\/strong>, then clear your page and CDN caches and reload.<\/li>\n\n\n\n
          • The contrast reading is low<\/strong> \u2013 Increase the difference between your text and background, for example darker text on a lighter background, until it passes.<\/li>\n\n\n\n
          • There’s no Custom Palette option<\/strong> \u2013 Custom colors are a SureCookie Pro feature. The free plugin offers the preset palettes.<\/li>\n<\/ul>\n\n\n\n

            <\/p>","protected":false},"excerpt":{"rendered":"

            Match the cookie banner to your brand with a preset color palette or, on Pro, your own custom colors. SureCookie shows a live WCAG contrast reading so your banner text stays readable and accessible.<\/p>","protected":false},"author":32,"featured_media":0,"template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_pfd_related_docs_manual":[],"pfd_doc_title":"","spectra_gs_classes":"[\"\"]","footnotes":""},"docs_category":[34],"docs_tag":[],"class_list":["post-5808","docs","type-docs","status-publish","hentry","docs_category-banner-customization"],"spectra_custom_meta":{"spectra_gs_classes":["[\"\"]"],"surerank_seo_checks":["a:14:{s:14:\"h2_subheadings\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:38:\"Page contains at least one subheading.\";s:4:\"type\";s:4:\"page\";}s:13:\"media_present\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:55:\"This page includes images or videos to enhance content.\";s:4:\"type\";s:4:\"page\";}s:13:\"links_present\";a:3:{s:6:\"status\";s:7:\"warning\";s:7:\"message\";s:27:\"No links found on the page.\";s:4:\"type\";s:4:\"page\";}s:10:\"url_length\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:35:\"Page URL is short and SEO-friendly.\";s:4:\"type\";s:4:\"page\";}s:19:\"search_engine_title\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:55:\"Search engine title is present and under 60 characters.\";s:4:\"type\";s:4:\"page\";}s:25:\"search_engine_description\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:62:\"Search engine description is present and under 160 characters.\";s:4:\"type\";s:4:\"page\";}s:13:\"canonical_url\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:37:\"Canonical tag is present on the page.\";s:4:\"type\";s:4:\"page\";}s:15:\"open_graph_tags\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:40:\"Open Graph tags are present on the page.\";s:4:\"type\";s:4:\"page\";}s:16:\"keyword_in_title\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:38:\"No focus keyword set to analyze title.\";s:4:\"type\";s:7:\"keyword\";}s:22:\"keyword_in_description\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:49:\"No focus keyword set to analyze meta description.\";s:4:\"type\";s:7:\"keyword\";}s:14:\"keyword_in_url\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:36:\"No focus keyword set to analyze URL.\";s:4:\"type\";s:7:\"keyword\";}s:18:\"keyword_in_content\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:40:\"No focus keyword set to analyze content.\";s:4:\"type\";s:7:\"keyword\";}s:12:\"broken_links\";a:3:{s:6:\"status\";s:7:\"success\";s:4:\"type\";s:4:\"page\";s:7:\"message\";s:34:\"No broken links found on the page.\";}s:14:\"image_alt_text\";a:5:{s:6:\"status\";s:7:\"success\";s:11:\"description\";a:1:{i:0;s:48:\"Images on the post\/page have alt text attributes\";}s:7:\"message\";s:49:\"All images on this page have alt text attributes.\";s:11:\"show_images\";b:0;s:4:\"type\";s:4:\"page\";}}"],"surerank_seo_checks_last_updated":["1783681378"],"_edit_lock":["1783682247:39"],"views":["91"],"_uag_custom_page_level_css":[""],"site-sidebar-layout":["default"],"site-content-layout":[""],"ast-site-content-layout":["default"],"site-content-style":["default"],"site-sidebar-style":["default"],"ast-global-header-display":[""],"ast-banner-title-visibility":[""],"ast-main-header-display":[""],"ast-hfb-above-header-display":[""],"ast-hfb-below-header-display":[""],"ast-hfb-mobile-header-display":[""],"site-post-title":[""],"ast-breadcrumbs-content":[""],"ast-featured-img":[""],"footer-sml-layout":[""],"ast-disable-related-posts":[""],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"header-above-stick-meta":[""],"header-main-stick-meta":[""],"header-below-stick-meta":[""],"astra-migrate-meta-layouts":["set"],"ast-page-background-enabled":["default"],"ast-page-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-4)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"ast-content-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"_pfd_related_docs_manual":["a:0:{}"],"pfd_doc_title":[""],"footnotes":[""],"_edit_last":["39"],"helpful":["0"],"unhelpful":["0"],"redirects":["0"],"_uag_page_assets":["a:9:{s:3:\"css\";s:263:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:12:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/image\";i:2;s:12:\"core\/heading\";i:3;s:9:\"core\/list\";i:4;s:14:\"core\/list-item\";i:5;s:11:\"core\/search\";i:6;s:10:\"core\/group\";i:7;s:17:\"core\/latest-posts\";i:8;s:20:\"core\/latest-comments\";i:9;s:13:\"core\/archives\";i:10;s:15:\"core\/categories\";i:11;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1789562764\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-5808.css"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"navanath b","author_link":"https:\/\/clone.surecookie.com\/de\/author\/navanathbbsf-io\/"},"uagb_comment_info":0,"uagb_excerpt":"Match the cookie banner to your brand with a preset color palette or, on Pro, your own custom colors. SureCookie shows a live WCAG contrast reading so your banner text stays readable and accessible.","_links":{"self":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/5808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/users\/32"}],"version-history":[{"count":3,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/5808\/revisions"}],"predecessor-version":[{"id":5976,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/5808\/revisions\/5976"}],"wp:attachment":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/media?parent=5808"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs_category?post=5808"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs_tag?post=5808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}