CINXE.COM
Alternatives to Low-Contrast Text (Video)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>Alternatives to Low-Contrast Text (Video)</title><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="721be388-83be-48ef-9882-002f0dc9dc4f"></script><script>(function(){ var FLAGS = { 'use_server_algolia_search_flag': false,'use_teamdesk_api_for_user_profile_override': false,'enable_user_auth_redesign': true,'use_cart_redesign': false,'use_local_user_profile_cert_and_exam_meta_data_apis': true,'banner_sales': false,'use_profile_redesign_flag': false,'not': false,'use_local_user_profile_exam_api': false,'enable_reportcart_dataclass': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'create_course_reminders': true,'allow_course_new_fields_editing': false,'send_exam_availability_reminder_email': false,'send_repeated_course_emails': false,'use_virtual_overview_redesign': true,'permanently-migrate-slack': false,'use_teamdesk_message_etl': true,'slack-integration': true,'use_course_search_redesign': false,'use_course_calendar_redesign': false }, SAMPLES = { }; window.waffle = { "flag_is_active": function waffle_flag(flag_name) { return !!FLAGS[flag_name]; }, "switch_is_active": function waffle_switch(switch_name) { return !!SWITCHES[switch_name]; }, "sample_is_active": function waffle_sample(sample_name) { return !!SAMPLES[sample_name]; }, "FLAGS": FLAGS, "SWITCHES": SWITCHES, "SAMPLES": SAMPLES }; })(); </script><!-- Google Consent Mode --><script data-cookieconsent="ignore"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) } gtag("consent", "default", { ad_personalization: "denied", ad_storage: "denied", ad_user_data: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 500 }); gtag("set", "ads_data_redaction", true); gtag("set", "url_passthrough", false); </script><!-- End Google Consent Mode--><!-- Google Tag Manager --><script type="text/plain" data-cookieconsent="statistics">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '>m_auth=oQvLGCv6ryZLP7PJLlpI-g>m_preview=env-2>m_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THJDDHK');</script><!-- End Google Tag Manager --><link rel="preconnect" href="https://media.nngroup.com/"/><link rel="preconnect" href="https://consent.cookiebot.com/"/><link rel="preconnect" href="https://consentcdn.cookiebot.com/"/><link rel="preconnect" href="https://www.googletagmanager.com/"/><link rel="preconnect" href="https://dnn506yrbagrg.cloudfront.net/"/><script src="https://media.nngroup.com/static/js/output.2e14f0aaa8d0.js" async></script><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.55aab3a9e87a.css" type="text/css"><meta name="description" content="If the foreground color (the actual words) is too similar to the background color, legibility suffers, and users can't read your copy. Simple tweaks make websites much easier to read."/><meta property="og:description" content="If the foreground color (the actual words) is too similar to the background color, legibility suffers, and users can't read your copy. Simple tweaks make websites much easier to read."/><meta name="keywords" content="low contrast, low contrast text, ux design, user experience design, accessibility, readability"/><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="Alternatives to Low-Contrast Text (Video)"/><meta property="og:url" content="https://www.nngroup.com/videos/alternatives-low-contrast-text/"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:type" content="video.other" /><meta property="og:image" content="https://media.nngroup.com/media/videos/thumbnails/Alternatives_to_Low_Contrast_Text_Thumbnail.jpg" /><meta name="twitter:site" content="@nngroup"/><meta name="twitter:card" content="summary_large_image" /><link rel="canonical" href="https://www.nngroup.com/videos/alternatives-low-contrast-text/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.1b70725e7506.css" type="text/css"> </head> <body class=" sidebar-base left-sidebar publication video-detail " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="svg-definitions"> <svg width="0" id="icon-error-svg" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/> </svg> <svg width="0" id="icon-error-svg-outlined" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/> <circle cx="12" cy="18.625" r="1.5" fill="black"/> <path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/> </svg> <svg width="0" id="icon-confirm-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/> </svg> <svg width="0" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-information"> <circle cx="8" cy="8.08008" r="7.25" fill="currentColor" stroke="black" stroke-width="1.5"/> <path d="M7.24718 11.7468V6.64511H8.75918V11.7468H7.24718ZM7.99804 5.89425C7.74433 5.89425 7.53861 5.82225 7.3809 5.67825C7.22318 5.53425 7.14433 5.34225 7.14433 5.10225C7.14433 4.86225 7.22318 4.67025 7.3809 4.52625C7.53861 4.38225 7.74433 4.31025 7.99804 4.31025C8.25176 4.31025 8.45747 4.38225 8.61518 4.52625C8.7729 4.67025 8.85176 4.86225 8.85176 5.10225C8.85176 5.34225 8.7729 5.53425 8.61518 5.67825C8.45747 5.82225 8.25176 5.89425 7.99804 5.89425Z" fill="black"/> </g> </svg> <svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor"/> <path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor"/> <path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor"/> <path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor"/> </g> <g id="icon-burger"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" /> </g> <path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor"/> <path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor"/> <g id="icon-cart"> <circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor"/> <circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor"/> <path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> <path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/> </g> </svg> <svg id="icon-close-svg" viewbox="0 0 22 22" width="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-close"> <path d="M1 1L20.5 20.5" stroke="currentColor" stroke-width="2" /> <path d="M20.5 1L1 20.5" stroke="currentColor" stroke-width="2" /> </g> </svg> </div> <header class="banner-image" > <nav class="nav-main desktop" aria-label="main"> <button class="burger-button"> <svg width="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Open main navigation</title> <use href="#icon-burger" /> </svg> </button> <a href="/" class="logo" aria-label="Nielsen Norman Group - Home"> <svg width="71" viewBox="0 0 71 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Nielsen Norman Group</title> <use href="#logo" /> </svg> </a> <ul> <li class=" has-subnav"> <button aria-controls="nav-live-courses" aria-expanded="false">Training & UX Certification <svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-live-courses"> <li class=""> <a href="/courses/">All Live Courses</a> </li> <li class=""> <a href="/training/live-courses/">About Live Courses</a> </li> <li class=""> <a href="/team-training/">Private Team Training</a> </li> <li class=""> <a href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a href="/ux-certification/">UX Certification</a> </li> </ul> </li> <li class=" "> <a href="/articles/">Articles & Videos</a> </li> <li class=" "> <a href="/consulting/">Consulting</a> </li> <li class=" "> <a href="/reports/">Reports & Books</a> </li> <li class=" has-subnav"> <button aria-controls="nav-about-home" aria-expanded="false">About NN/g <svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-about-home"> <li class=""> <a href="/about/">Overview</a> </li> <li class=""> <a href="/people/">People</a> </li> <li class=""> <a href="/about/about-client-list/">Clients</a> </li> <li class=""> <a href="/news/">News</a> </li> <li class=""> <a href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty" aria-hidden> <a href=/cart/> <svg width="30" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-cart" /> </svg> <span></span> </a> </div> <div class="profile has-subnav"> <button class="loading" aria-expanded="false">Profile <svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> </div> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="562fc62a44f3e67b0e9b1d7a40fb17e2" data-index="Document_production_query_suggestions" > <button type="button" class="search-button search-toggle-button" aria-controls="search-form-content" aria-expanded="false"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> <div class="form-content" id="search-form-content"> <label class="visually-hidden" for="search">Search</label> <div id="search-autocomplete"><input id="search" name="q" type="search" /></div> <button type="reset" class="reset-button empty" disabled> <svg width="13" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Reset</title> <use href="#icon-close" /> </svg> </button> <button type="submit" class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> </div> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <div class="twelve column grid"> <aside class="two wide mobile-twelve m-12-wide m-row-1 sidebar"> <div class="collapsable-content"> <h1 class="only mobile collapse-link"><span class="icon fa fa-caret-right"></span> <strong>Browse All Topics & Authors</strong></h1> <div class="collapsable mobile collapsed"> <div id="navTopicsPopular" class="topic-list popular-topic-nav"> <h1><strong>Topics</strong></h1> <ul class="relaxed no-bullet topics" id="article-popular-topics"> <li><a href="/topic/agile/">Agile</a></li> <li><a href="/topic/ai/">Artificial Intelligence</a></li> <li><a href="/topic/ux-design-process/">Design Process</a></li> <li><a href="/topic/e-commerce/">Ecommerce</a></li> <li><a href="/topic/intranets/">Intranets</a></li> <li><a href="/topic/navigation/">Navigation</a></li> <li><a href="/topic/psychology-and-ux/">Psychology and UX</a></li> <li><a href="/topic/research-methods/">Research Methods</a></li> <li><a href="/topic/study-guide/">Study Guides</a></li> <li><a href="/topic/user-testing/">User Testing</a></li> <li><a href="/topic/careers-ux/">UX Careers</a></li> <li><a href="/topic/web-usability/">Web Usability</a></li> <li><a href="/topic/writing-web/">Writing for the Web</a></li> <li><a href="" id="navTopics__seeAll"><strong><span class="far fa-caret-right"></span> See all topics</strong></a></li> </ul> </div> <div id="navTopicsAll" class="topic-list all-topic-nav" style="display: none;"> <h1><strong>All Article Topics</strong></h1> <ul class="relaxed no-bullet topics" id="article-all-topics"> <li><a href="" id="navTopics__seeFewer"><strong><span class="far fa-caret-down"></span> See fewer topics</strong></a></li> <li><a href="/topic/accessibility/">Accessibility</a></li> <li><a href="/topic/agile/">Agile</a></li> <li><a href="/topic/analytics-and-metrics/">Analytics & Metrics</a></li> <li><a href="/topic/applications/">Application Design</a></li> <li><a href="/topic/ai/">Artificial Intelligence</a></li> <li><a href="/topic/b2b-websites/">B2B Websites</a></li> <li><a href="/topic/behavior-patterns/">Behavior Patterns</a></li> <li><a href="/topic/branding/">Branding</a></li> <li><a href="/topic/content-strategy/">Content Strategy</a></li> <li><a href="/topic/corporate-websites/">Corporate Websites</a></li> <li><a href="/topic/customer-journeys/">Customer Journeys</a></li> <li><a href="/topic/design-patterns/">Design Patterns</a></li> <li><a href="/topic/ux-design-process/">Design Process</a></li> <li><a href="/topic/e-commerce/">Ecommerce</a></li> <li><a href="/topic/email/">Email</a></li> <li><a href="/topic/eyetracking/">Eyetracking</a></li> <li><a href="/topic/heuristic-evaluation/">Heuristic Evaluation</a></li> <li><a href="/topic/human-computer-interaction/">Human Computer Interaction</a></li> <li><a href="/topic/ux-ideation/">Ideation</a></li> <li><a href="/topic/information-architecture/">Information Architecture</a></li> <li><a href="/topic/interaction-design/">Interaction Design</a></li> <li><a href="/topic/international-users/">International Users</a></li> <li><a href="/topic/intranets/">Intranets</a></li> <li><a href="/topic/ux-management/">Managing UX Teams</a></li> <li><a href="/topic/mobile-and-tablet-design/">Mobile & Tablet</a></li> <li><a href="/topic/navigation/">Navigation</a></li> <li><a href="/topic/non-profit-websites/">Non-Profit Websites</a></li> <li><a href="/topic/personas/">Personas</a></li> <li><a href="/topic/persuasive-design/">Persuasive Design</a></li> <li><a href="/topic/prototyping/">Prototyping</a></li> <li><a href="/topic/psychology-and-ux/">Psychology and UX</a></li> <li><a href="/topic/remote-ux-work/">Remote UX Work</a></li> <li><a href="/topic/research-methods/">Research Methods</a></li> <li><a href="/topic/search/">Search</a></li> <li><a href="/topic/social-media/">Social Media</a></li> <li><a href="/topic/strategy/">Strategy</a></li> <li><a href="/topic/study-guide/">Study Guides</a></li> <li><a href="/topic/user-testing/">User Testing</a></li> <li><a href="/topic/careers-ux/">UX Careers</a></li> <li><a href="/topic/ux-humor/">UX Humor</a></li> <li><a href="/topic/ux-teams/">UX Teams</a></li> <li><a href="/topic/visual-design/">Visual Design</a></li> <li><a href="/topic/web-usability/">Web Usability</a></li> <li><a href="/topic/writing-web/">Writing for the Web</a></li> <li><a href="/topic/young-users/">Young Users</a></li> </ul> </div> <div class="popular-articles"> <h1><strong>Popular Articles</strong></h1> <ul class="relaxed no-bullet" id="article-popular-articles"> <li><a href="/articles/ten-usability-heuristics/">10 Usability Heuristics for User Interface Design</a></li> <li><a href="/articles/empathy-mapping/">Empathy Mapping: The First Step in Design Thinking</a></li> <li><a href="/articles/which-ux-research-methods/">When to Use Which User-Experience Research Methods</a></li> <li><a href="/articles/service-blueprints-definition/">Service Blueprints: Definition</a></li> <li><a href="/articles/journey-mapping-101/">Journey Mapping 101</a></li> <li><a href="/articles/tone-of-voice-dimensions/">The Four Dimensions of Tone of Voice</a></li> <li><a href="/articles/between-within-subjects/">Between-Subjects vs. Within-Subjects Study Design</a></li> <li><a href="/articles/ux-research-cheat-sheet/">UX Research Cheat Sheet</a></li> <li><a href="/articles/usability-101-introduction-to-usability/">Usability 101: Introduction to Usability</a></li> <li><a href="/articles/usability-testing-101/">Usability (User) Testing 101</a></li> </ul> </div> <div class="recent-articles"> <h1><strong>Recent Articles</strong></h1> <ul class="relaxed no-bullet" id="article-recent-articles"> <li><a href="/articles/researchops-kate-towsey/">Strategic Research: Advice from ResearchOps Expert Kate Towsey</a></li> <li><a href="/articles/service-design-evolve-ai-agents/">How Service Design Will Evolve with AI Agents</a></li> <li><a href="/articles/swot-analysis/">SWOT Analysis</a></li> <li><a href="/articles/ai-hallucinations/">AI Hallucinations: What Designers Need to Know</a></li> <li><a href="/articles/apply-secure-ux-job/">How to Apply and Secure a UX Job</a></li> </ul> </div> <div class="recent-videos"> <h1><strong>Recent Videos</strong></h1> <ul class="relaxed no-bullet" id="article-recent-videos"> <li><a href="/videos/alt-text-to-improve-usability/">Alt Text: Avoid Redundancy to Improve Usability</a></li> <li><a href="/videos/designops-team-of-one/">Tips for the DesignOps Team of One</a></li> <li><a href="/videos/5-reasons-to-test/">5 Reasons to Test Even When You “Know” the Answer</a></li> <li><a href="/videos/improve-your-designops-practice/">Improve Your DesignOps Practice: 3 Essential Tips</a></li> <li><a href="/videos/entering-the-ux-field/">Entering the UX Field: How to Overcome the Biggest Challenges</a></li> </ul> </div> <div id="navAuthorsMain" class="article-authors"> <h1><strong>Authors</strong></h1> <ul class="relaxed no-bullet" id="article-initial-authors"> <li><a href="/articles/author/bruce-tognazzini/">Bruce Tognazzini</a></li> <li><a href="/articles/author/don-norman/">Don Norman</a></li> <li><a href="/articles/author/jakob-nielsen/">Jakob Nielsen</a></li> <li><a href="" id="navAuthors__seeAll"><strong><span class="far fa-caret-right"></span> See all authors</strong></a></li> </ul> </div> <div id="navAuthorsAll" class="article-authors" style="display: none;"> <h1><strong>All Authors</strong></h1> <ul class="relaxed no-bullet" id="article-all-authors"> <li><a href="" id="navAuthors__seeFewer"><strong><span class="far fa-caret-down"></span> See fewer authors</strong></a></li> <li><a href="/articles/author/mayya-azarova/">Mayya Azarova</a></li> <li><a href="/articles/author/sana-behnam/">Sana Behnam</a></li> <li><a href="/articles/author/maddie-brown/">Maddie Brown</a></li> <li><a href="/articles/author/megan-brown/">Megan Brown</a></li> <li><a href="/articles/author/raluca-budiu/">Raluca Budiu</a></li> <li><a href="/articles/author/patty-caya/">Patty Caya</a></li> <li><a href="/articles/author/connor-chan/">Connor Chan</a></li> <li><a href="/articles/author/megan-chan/">Megan Chan</a></li> <li><a href="/articles/author/nishi-chitale/">Nishi Chitale</a></li> <li><a href="/articles/author/emma-cionca/">Emma Cionca</a></li> <li><a href="/articles/author/taylor-dykes/">Taylor Dykes</a></li> <li><a href="/articles/author/lola-famulegun/">Lola Famulegun</a></li> <li><a href="/articles/author/pablo-fernandez-vallejo/">Pablo Fernández Vallejo</a></li> <li><a href="/articles/author/therese-fessenden/">Therese Fessenden</a></li> <li><a href="/articles/author/kim-flaherty/">Kim Flaherty</a></li> <li><a href="/articles/author/sarah-gibbons/">Sarah Gibbons</a></li> <li><a href="/articles/author/kelley-gordon/">Kelley Gordon</a></li> <li><a href="/articles/author/aurora-harley/">Aurora Harley</a></li> <li><a href="/articles/author/anna-kaley/">Anna Kaley</a></li> <li><a href="/articles/author/lexie-kane/">Lexie Kane</a></li> <li><a href="/articles/author/kate-kaplan/">Kate Kaplan</a></li> <li><a href="/articles/author/alita-kendrick/">Alita Kendrick</a></li> <li><a href="/articles/author/tanner-kohler/">Tanner Kohler</a></li> <li><a href="/articles/author/rachel-krause/">Rachel Krause</a></li> <li><a href="/articles/author/page-laubheimer/">Page Laubheimer</a></li> <li><a href="/articles/author/feifei-liu/">Feifei Liu</a></li> <li><a href="/articles/author/hoa-loranger/">Hoa Loranger</a></li> <li><a href="/articles/author/kate-moran/">Kate Moran</a></li> <li><a href="/articles/author/tarun-mugunthan/">Tarun Mugunthan</a></li> <li><a href="/articles/author/tim-neusesser/">Tim Neusesser</a></li> <li><a href="/articles/author/jakob-nielsen/">Jakob Nielsen</a></li> <li><a href="/articles/author/the-experts-at-nng/">The Experts at NN/g</a></li> <li><a href="/articles/author/don-norman/">Don Norman</a></li> <li><a href="/articles/author/sara-ramaswamy/">Sara Paul</a></li> <li><a href="/articles/author/kara-pernice/">Kara Pernice</a></li> <li><a href="/articles/author/kara-rivenbark/">Kara Rivenbark</a></li> <li><a href="/articles/author/christian-rohrer/">Christian Rohrer</a></li> <li><a href="/articles/author/maria-rosala/">Maria Rosala</a></li> <li><a href="/articles/author/katie-sherwin/">Katie Sherwin</a></li> <li><a href="/articles/author/caleb-sponheim/">Caleb Sponheim</a></li> <li><a href="/articles/author/evan-sunwall/">Evan Sunwall</a></li> <li><a href="/articles/author/samhita-tankala/">Samhita Tankala</a></li> <li><a href="/articles/author/bruce-tognazzini/">Bruce Tognazzini</a></li> <li><a href="/articles/author/huei-hsin-wang/">Huei-Hsin Wang</a></li> <li><a href="/articles/author/kathryn-whitenton/">Kathryn Whitenton</a></li> <li><a href="/articles/author/amy-zhang/">Amy Zhang</a></li> <li><a href="/articles/author/mingjin-zhang/">Mingjin Zhang</a></li> </ul> </div> </div> <section class="announcements-container" data-zone="articles-left"></section> </div> </aside> <div id="body-content" class="ten wide mobile-twelve m-12-wide m-row-2 body-content"> <article> <h1 class="article-h1">Alternatives to Low-Contrast Text</h1> <div class="publication-wrapper"> <div class="publication-container"> <section class="lede"> <p><strong>Summary:</strong> If the foreground color (the actual words) is too similar to the background color, legibility suffers, and users can't read your copy. Simple tweaks make websites much easier to read.</p> </section> <section class="authors-and-topics"> <div class="byline-wrapper"> <div class="authors inline-nav"> <p> <strong><time>4 minute video</time> by </strong> <span id="gaDataPubDate" class="ga-data-layer" aria-hidden="true">2020-08-28</span> <span id="gaDataLength" class="ga-data-layer" aria-hidden="true">4</span> </p> <ul class="item-list"> <span id="gaDataAuthors" class="ga-data-layer" aria-hidden="true">Katie Sherwin</span> <li> <a href="/people/katie-sherwin/"> Katie Sherwin </a> </li> </ul> </div> <div class="topics inline-nav"> <p><strong>Topics:</strong></p> <span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">contrast,Accessibility,readability,minimalism</span> <ul class="no-bullet inline item-list"> <li><span id="gaDataTopic" class="ga-data-layer" aria-hidden="true">Accessibility</span> <a href="/topic/accessibility/">Accessibility</a></li> </ul> </div> </div> <div class="small desktop only"> <div class="share-widget compact-inline" id="shareWidgetBodyTop"> <div class="share-buttons"> <p>Share this article:</p> <ul class="share-icons"> <li><a href="https://twitter.com/intent/tweet?url=https://www.nngroup.com/videos/alternatives-low-contrast-text/&text=&via=nngroup" data-share-type="Twitter"><span class="icon fab fa-twitter"></span></a></li> <li><a href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.nngroup.com/videos/alternatives-low-contrast-text/&title=&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn"><span class="icon fab fa-linkedin-in"></span></a></li> <li><a href="mailto:?subject=NN/g Article: &body=https://www.nngroup.com/videos/alternatives-low-contrast-text/" data-share-type="Email"><span class="icon fal fa-envelope"></span></a></li> </ul> </div> </div> </div> </section> </div> <div class="publication-sidebar"> <div class="share"> <div class="share-widget" id="shareWidgetBodySidebar"> <ul class="no-bullet share-links"> <li><strong>Share this video:</strong></li> <li><a href="https://twitter.com/intent/tweet?url=https://www.nngroup.com/videos/alternatives-low-contrast-text/&text=Alternatives to Low-Contrast Text&via=nngroup" data-share-type="Twitter"><span class="icon fab fa-twitter"></span>Twitter</a></li> <li><a href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.nngroup.com/videos/alternatives-low-contrast-text/&title=Alternatives to Low-Contrast Text&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn"><span class="icon fab fa-linkedin-in"></span>LinkedIn</a></li> <li><a href="mailto:?subject=NN/g Video: Alternatives to Low-Contrast Text&body=https://www.nngroup.com/videos/alternatives-low-contrast-text/" data-share-type="Email"><span class="icon fal fa-envelope"></span>Email</a></li> </ul> </div> </div> </div> </div> <div class="videos-detail"> <div class="cookieconsent-optin-marketing"> <div class="youtube-embed video-youtube"> <iframe allowfullscreen allow="encrypted-media" data-cookieconsent="marketing" data-cookieblock-src="https://www.youtube.com/embed/pnstAE4NtL4" frameborder="0"></iframe> </div> </div> <div class="cookieconsent-optout-marketing"> <a class="video-placeholder " href="https://www.youtube.com/watch?v=pnstAE4NtL4" target="_blank" title="Alternatives to Low-Contrast Text on YouTube (new window)"> <div class="play"></div> <img src="https://media.nngroup.com/media/videos/thumbnails/Alternatives_to_Low_Contrast_Text_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Alternatives_to_Low_Contrast_Text_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Alternatives_to_Low_Contrast_Text_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg x2" alt="Alternatives to Low-Contrast Text" loading="lazy" > </a> <p class="no-cookie-video-message"> <button class="link cookie-button">Enable cookies</button> to watch NN/g videos </p> </div> </div> </article> <section class="two column grid"> <div> <p><strong>Related Article</strong></p> <p> <a href="/articles/low-contrast/">Low-Contrast Text Is Not the Answer</a> </p> <p class="mt-0">Low-contrast text may be trendy, but it is also illegible, undiscoverable, and inaccessible. Instead, consider more usable alternatives.</p> </div> <div class="about-the-author"> <p><strong>Video Author</strong></p> <p><a href="https://www.nngroup.com/people/katie-sherwin/">Katie Sherwin</a> is a Senior User Experience Specialist with Nielsen Norman Group. She specializes in helping organizations utilize principles of user-centered design and strategic communication to achieve their goals. </p> </div> </section> <section class="share"> <div class="share-widget" id="shareWidgetBodyBottom"> <ul class="no-bullet inline share-links"> <li>Share: </li> <li><a href="https://twitter.com/intent/tweet?url=https://www.nngroup.com/videos/alternatives-low-contrast-text/&text=Alternatives to Low-Contrast Text&via=nngroup" data-share-type="Twitter"><span class="icon fab fa-twitter"></span></a></li> <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nngroup.com/videos/alternatives-low-contrast-text/&title=Alternatives to Low-Contrast Text&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn"><span class="icon fab fa-linkedin-in"></span></a></li> <li><a href="mailto:?subject=NN/g Video: Alternatives to Low-Contrast Text&body=https://www.nngroup.com/videos/alternatives-low-contrast-text/" data-share-type="Email"><span class="icon fal fa-envelope"></span></a></li> </ul> </div> </section> <section class="learn-more"> <h2>Learn More</h2> <p><a href="/articles/subscribe/">Subscribe to the weekly newsletter</a> to get notified about future articles.</p> </section> <section class="videos"> <h3 class="small large desktop only">Videos</h3> <div class="related-videos"> <ul class="inline no-bullet"> <li> <div class="video tile"> <div class="media"> <a href="/videos/alt-text-to-improve-usability/"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Alt_Text_Avoid_Redundancy_to_Improve_Usability_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Alt_Text_Avoid_Redundancy_to_Improve_Usability_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Alt_Text_Avoid_Redundancy_to_Improve_Usability_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> <div class="content"> <p><a href="/videos/alt-text-to-improve-usability/?lm=alternatives-low-contrast-text&pt=youtubevideo">Alt Text: Avoid Redundancy to Improve Usability</a></p> <p><time>4 minute video</time></p> </div> </div> </li> <li> <div class="video tile"> <div class="media"> <a href="/videos/content-dispersion-in-mobile-first-design/"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Content_Dispersion_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Content_Dispersion_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Content_Dispersion_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> <div class="content"> <p><a href="/videos/content-dispersion-in-mobile-first-design/?lm=alternatives-low-contrast-text&pt=youtubevideo">Content Dispersion: The Downside of Mobile-first Design</a></p> <p><time>4 minute video</time></p> </div> </div> </li> <li> <div class="video tile"> <div class="media"> <a href="/videos/user-testing-older-adults/"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/User_Testing_With_Older_Adults_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/User_Testing_With_Older_Adults_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/User_Testing_With_Older_Adults_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> <div class="content"> <p><a href="/videos/user-testing-older-adults/?lm=alternatives-low-contrast-text&pt=youtubevideo">User Testing with Older Adults</a></p> <p><time>4 minute video</time></p> </div> </div> </li> <li> <div class="video tile"> <div class="media"> <a href="/videos/visual-principle-contrast/"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/VisualContrast.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/VisualContrast.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/VisualContrast.jpeg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> <div class="content"> <p><a href="/videos/visual-principle-contrast/?lm=alternatives-low-contrast-text&pt=youtubevideo">The Visual Principle of Contrast in UI Design</a></p> <p><time>2 minute video</time></p> </div> </div> </li> </ul> </div> </section> <section class="two column grid related-content"> <div> <div class="related-articles"> <h3>Articles</h3> <ul class="no-bullet"> <li><a href="/articles/text-over-images/?lm=alternatives-low-contrast-text&pt=youtubevideo">Ensure High Contrast for Text Over Images</a></li> <li><a href="/articles/usability-for-senior-citizens/?lm=alternatives-low-contrast-text&pt=youtubevideo">Usability for Older Adults: Challenges and Changes</a></li> <li><a href="/articles/privacy-policies-terms-use-pages/?lm=alternatives-low-contrast-text&pt=youtubevideo">Privacy Policies and Terms of Use: 5 Common Mistakes</a></li> <li><a href="/articles/dark-mode/?lm=alternatives-low-contrast-text&pt=youtubevideo">Dark Mode vs. Light Mode: Which Is Better?</a></li> <li><a href="/articles/video-usability/?lm=alternatives-low-contrast-text&pt=youtubevideo">Video Usability</a></li> </ul> </div> <div> <h3>Research Reports</h3> <ul class="no-bullet"> <li><a href="/reports/intranet-design-annual-2022/?lm=alternatives-low-contrast-text&pt=youtubevideo">Intranet Design Annual: 2022</a></li> <li><a href="/reports/usability-guidelines-accessible-web-design/?lm=alternatives-low-contrast-text&pt=youtubevideo">Usability Guidelines for Accessible Web Design</a></li> <li><a href="/reports/senior-citizens-on-the-web/?lm=alternatives-low-contrast-text&pt=youtubevideo">UX Design for Seniors (Ages 65 and older)</a></li> <li><a href="/reports/how-to-conduct-usability-studies-accessibility/?lm=alternatives-low-contrast-text&pt=youtubevideo">How to Conduct Usability Studies for Accessibility</a></li> </ul> </div> </div> </section> </div> </div> </div> </section> </main> <footer class="footer"> <div class="wrapper row"> <div class="subscribe"> <h2 class="title-large">Subscribe to Our Newsletter</h2> <p class="body-medium">Get weekly UX articles, videos, and upcoming training events straight to your inbox.</p> <form class="form-validated" action="https://nngroup.us4.list-manage.com/subscribe/post?u=538d934a891681a5d850bb4e5&id=7f29a2b335" id="subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" > <div class="form-field"> <div class="outline"> <label for="newsletter-subscribe-email" class="label-medium">Email</label> <input autocomplete="email" class="body-small" id="newsletter-subscribe-email" placeholder="norman@gmail.com" name="EMAIL" type="email" value=""> </div> <div class="error-local"></div> </div> <input class="button-fill button-small" name="subscribe" type="submit" value="Subscribe"> </form> </div> <div class="follow"> <h2 class="title-large">Follow Us</h2> <ul> <li class="label-large"> <a href="https://www.linkedin.com/company/nielsen-norman-group"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-linkedin.svg" alt=""> LinkedIn </a> </li> <li class="label-large"> <a href="https://www.instagram.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-instagram.svg" alt=""> Instagram </a> </li> <li class="label-large"> <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-youtube.svg" alt=""> Youtube </a> </li> <li class="label-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup "> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-podcast.svg" alt=""> Podcast </a> </li> <li class="label-large"> <a href="https://twitter.com/nngroup"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-x.svg" alt=""> X (Twitter) </a> </li> <li class="label-large"> <a href="https://www.facebook.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-facebook.svg" alt=""> Facebook </a> </li> </ul> </div> </div> <section class="navigation"> <div class="wrapper"> <ul> <li><span class="title-small">Certification</span> <ul> <li class="body-large"> <a href="/ux-certification/">What is UX Certification?</a> </li> <li class="body-large"> <a href="/ux-certification/specialties/">Specialties</a> </li> <li class="body-large"> <a href="/ux-certification/exams/">Exams</a> </li> <li class="body-large"> <a href="/ux-certification/people/">UX Certified People</a> </li> </ul> </li> <li> <span class="title-small">UX Training</span> <ul> <li class="body-large"> <a href="/courses/">All Live Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">About Live Courses</a> </li> <li class="body-large"> <a href="/team-training/">Private Team Training</a> </li> <li class="body-large"> <a href="/course-calendar/">Course Calendar</a> </li> </ul> </li> <li> <span class="title-small">Consulting</span> <ul> <li class="body-large"> <a href="/consulting/expert-review/">Expert Review</a> </li> <li class="body-large"> <a href="/consulting/user-testing/">User Testing</a> </li> <li class="body-large"> <a href="/consulting/user-research/">Customized Research</a> </li> <li class="body-large"> <a href="/consulting/applied-workshops/">Applied Workshops</a> </li> <li class="body-large"> <a href="/consulting/keynote-speaking/">Keynote Speaking</a> </li> </ul> </li> <li> <span class="title-small">Free Guidance</span> <ul> <li class="body-large"> <a href="/articles/">Articles & Videos</a> </li> <li class="body-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup">The NN/g UX Podcast</a> </li> </ul> </li> <li> <span class="title-small">About</span> <ul> <li class="body-large" > <a href="/about/why-nng/">Why NN/g</a> </li> <li class="body-large" > <a href="/about/">About Us</a> </li> <li class="body-large" > <a href="/people/">People</a> </li> <li class="body-large" > <a href="/about/about-client-list/">Clients</a> </li> <li class="body-large" > <a href="/about/contact/">Contact</a> </li> <li class="body-large" > <a href="/return-policy/">Return Policy</a> </li> </ul> </li> </ul> </div> </section> <div class="copyright"> <div class="wrapper"> <p><a href="/copyright-and-reprint-info/">Copyright</a> © 1998-2025 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a class="cookie-button">Cookie Preferences</a></li> <li><a href="/cookie-declaration/">Cookie Declaration</a></li> <li><a href="/privacy-policy/">Privacy Policy</a></li> </ul> </div> </div> </footer> <button class="back-to-top" aria-label="Back to top"><span class="text"><span class="fas fa-caret-up arrow" aria-hidden="true"></span><br>Top</span></button> <script src="https://media.nngroup.com/static/js/output.4573ebdb8665.js" defer></script> <script src="https://media.nngroup.com/static/js/publication-nav.aa539b40719d.js"></script> <script> window.addEventListener('CookiebotOnAccept', function (e) { Cookiebot.consent.preferences&&window.dataLayer.push({event:"cookieconsent_preferences"}); Cookiebot.consent.statistics&&window.dataLayer.push({event:"cookieconsent_statistics"}); Cookiebot.consent.marketing&&window.dataLayer.push({event:"cookieconsent_marketing"}); }); window.addEventListener('CookiebotOnDecline', function (e) {}); </script> </body> </html>