{"id":4052,"date":"2008-09-14T15:50:28","date_gmt":"2008-09-14T10:20:28","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=4052"},"modified":"2026-10-11T12:11:14","modified_gmt":"2026-10-11T06:41:14","slug":"fix-light-text-on-dark-background","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/","title":{"rendered":"Light Text on Dark Background? How to Fix It and Reduce Eye Strain"},"content":{"rendered":"<p>Does light text on dark background pages give you eye strain? In 2008 I kept finding blogs with white text on black backgrounds that looked stylish for a moment but were tiring to read, and left an after-image when I switched to another site. Back then I used a bookmarklet from Ironic Sans to flip those pages to dark text on a light background. Today dark mode is everywhere, so here is how to fix light text on a dark background in 2026, and how designers can make dark themes easy to read.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-63856\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/fix-light-text-dark-background-1024x538.webp\" alt=\"Fix light text on dark background\" width=\"1024\" height=\"538\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/fix-light-text-dark-background-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/fix-light-text-dark-background-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/fix-light-text-dark-background-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/fix-light-text-dark-background-768x403.webp 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/fix-light-text-dark-background.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> To fix light text on a dark background, open the page in your browser&#8217;s Reader mode, which shows dark text on a light page, or use an extension like Dark Reader to set your own colours. Also check that your device is not forcing dark mode on websites. Designers should use off-white text on dark grey (not pure white on pure black) with a contrast ratio of at least 4.5:1.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ad921faddbae\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ad921faddbae\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#Why_light_text_on_a_dark_background_causes_eye_strain\" >Why light text on a dark background causes eye strain<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#How_to_fix_light_text_on_dark_backgrounds_as_a_reader\" >How to fix light text on dark backgrounds as a reader<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#Tips_for_designers_readable_dark_themes\" >Tips for designers: readable dark themes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#Other_ways_to_reduce_computer_eye_strain\" >Other ways to reduce computer eye strain<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#Is_dark_mode_better_for_your_eyes\" >Is dark mode better for your eyes?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#How_do_I_turn_a_website_from_dark_to_light\" >How do I turn a website from dark to light?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#What_is_the_best_contrast_for_dark_mode\" >What is the best contrast for dark mode?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2008\/09\/fix-light-text-on-dark-background\/#What_happened_to_the_Ironic_Sans_bookmarklet\" >What happened to the Ironic Sans bookmarklet?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_light_text_on_a_dark_background_causes_eye_strain\"><\/span>Why light text on a dark background causes eye strain<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For long reading, many people find dark text on a light background easier. Very high contrast, such as pure white text on pure black, can cause glare and a halo effect, especially for people with astigmatism. Thin fonts and small text make it worse. Dark mode is great at night and in dim rooms, but long articles in light-on-dark can be tiring.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_fix_light_text_on_dark_backgrounds_as_a_reader\"><\/span>How to fix light text on dark backgrounds as a reader<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>Use Reader mode:<\/strong> in Safari, click the Reader icon in the address bar; in Edge, use Immersive Reader; in Firefox, click the Reader View icon; in Chrome, open the menu and choose Reading mode. You get clean text with your preferred colours.<\/li>\n<li><strong>Install Dark Reader:<\/strong> the <a href=\"https:\/\/darkreader.org\/\" target=\"_blank\" rel=\"noopener\">Dark Reader<\/a> extension can switch any site to light or dark and adjust brightness and contrast per site.<\/li>\n<li><strong>Check forced dark mode:<\/strong> some browsers and phones force dark mode on all websites. Turn this off in browser appearance settings if sites look wrong.<\/li>\n<li><strong>Use your system settings:<\/strong> Windows contrast themes, macOS Increase contrast, and Android or iPhone display settings can make text easier to read.<\/li>\n<li><strong>Zoom in:<\/strong> press Ctrl and + (Cmd and + on Mac) to make thin text bigger.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Tips_for_designers_readable_dark_themes\"><\/span>Tips for designers: readable dark themes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Use off-white text (for example #e6e6e6) on dark grey (for example #121212) rather than #ffffff on #000000.<\/li>\n<li>Meet <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener\">WCAG contrast guidelines<\/a>: at least 4.5:1 for normal text.<\/li>\n<li>Increase line height and use regular, not thin, font weights.<\/li>\n<li>Offer both light and dark themes and respect the visitor&#8217;s setting with the <code>prefers-color-scheme<\/code> CSS media query.<\/li>\n<li>Keep long-form reading pages light by default if most visitors read in the daytime.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Other_ways_to_reduce_computer_eye_strain\"><\/span>Other ways to reduce computer eye strain<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Follow the 20-20-20 rule: every 20 minutes, look at something 20 feet away for 20 seconds.<\/li>\n<li>Match screen brightness to the room, and use night light or Night Shift in the evening.<\/li>\n<li>Use a modern monitor with a higher refresh rate; see our older tip on <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/change-refresh-rate-of-your-monitor-avoid-flickers-and-headaches\/\">changing your monitor refresh rate<\/a>.<\/li>\n<li>Make fonts smoother with <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/turn-on-windows-xp-cleartype-improve-font-display-and-readability\/\">ClearType<\/a> on Windows.<\/li>\n<\/ul>\n<p>Prefer dark mode in apps? See how to turn on <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/10\/dark-mode-snapchat\/\">dark mode in Snapchat<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Is_dark_mode_better_for_your_eyes\"><\/span>Is dark mode better for your eyes?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It can be more comfortable in low light, but for long reading in bright rooms many people find dark text on a light background easier.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_turn_a_website_from_dark_to_light\"><\/span>How do I turn a website from dark to light?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use Reader mode, or the Dark Reader extension set to light mode for that site.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_best_contrast_for_dark_mode\"><\/span>What is the best contrast for dark mode?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Off-white text on dark grey, with at least a 4.5:1 contrast ratio, works well for most people.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_happened_to_the_Ironic_Sans_bookmarklet\"><\/span>What happened to the Ironic Sans bookmarklet?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It was a 2008 tool that flipped page colours. Today, Reader mode and Dark Reader do the same job better.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Does light text on dark background pages give you eye strain? In 2008 I kept finding blogs with white text&#8230;<\/p>\n","protected":false},"author":4,"featured_media":63856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-4052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/4052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=4052"}],"version-history":[{"count":2,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/4052\/revisions"}],"predecessor-version":[{"id":63860,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/4052\/revisions\/63860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/63856"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=4052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=4052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=4052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}