Website Tinting in Safari: What it Does & How to Turn it On or Off

Download Article
Everything you need to know about this mobile Safari feature
Download Article


If you use Safari on your iPhone or iPad, you may be wondering what Website Tinting is and how you can enable or disable it. Website Tinting is a Safari app setting that affects how the websites you visit look. This setting is similar to the "Show color in compact tab bar" MacOS setting for Safari. To learn more about Website Tinting, keep reading.

Website Tinting in Safari: Overview

Website Tinting was introduced in iOS/iPadOS 15, and it allows websites to change the color of the top part of your screen while in Safari (normally, the color of this section of your screen is controlled by your theme). To enable or disable Website Tinting, go to the Safari section in your Settings app.

Section 1 of 2:

What is Website Tinting?

Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/What-Is-Website-Tinting-Step-1.jpg\/v4-460px-What-Is-Website-Tinting-Step-1.jpg","bigUrl":"\/images\/thumb\/4\/4a\/What-Is-Website-Tinting-Step-1.jpg\/v4-728px-What-Is-Website-Tinting-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Introduced in iOS/iPadOS 15 [1] , Website Tinting adjusts the top bar of your iPhone or iPad's Safari browser to match the website you're on. With Website Tinting off, the top bar is a color that matches your device's theme.
    • Website Tinting is mostly for aesthetics and creating a more immersive web experience, though some users may find it easier on the eyes, depending on what website they're viewing.
    • On the other hand, some viewers may find the visual change distracting, or it could be problematic for people with color blindness or visual impairments.
    • It's also possible that Website Tinting could be causing websites to not look correct on your screen. If you're having issues viewing a website in Safari on your iPhone or iPad, check to see if Website Tinting is enabled (and disable it if so).
    2. Advertisement
Section 2 of 2:

How to Enable/Disable Website Tinting

Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/34\/What-Is-Website-Tinting-Step-2.jpg\/v4-460px-What-Is-Website-Tinting-Step-2.jpg","bigUrl":"\/images\/thumb\/3\/34\/What-Is-Website-Tinting-Step-2.jpg\/v4-728px-What-Is-Website-Tinting-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    The Settings app has a gray icon with a gear, and it's in the dock at the bottom of your screen by default.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/What-Is-Website-Tinting-Step-3.jpg\/v4-460px-What-Is-Website-Tinting-Step-3.jpg","bigUrl":"\/images\/thumb\/c\/c7\/What-Is-Website-Tinting-Step-3.jpg\/v4-728px-What-Is-Website-Tinting-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    The Safari button is located a bit further down in the Settings menu, in the same section as the other iOS apps.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/What-Is-Website-Tinting-Step-4.jpg\/v4-460px-What-Is-Website-Tinting-Step-4.jpg","bigUrl":"\/images\/thumb\/0\/05\/What-Is-Website-Tinting-Step-4.jpg\/v4-728px-What-Is-Website-Tinting-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    If the toggle is green, then website tinting is enabled, and if it's gray, then the option is disabled.
    4. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      2 Easy Ways to Check Your Safari Search History
      How to Disable Private Browsing in Safari on iPhone or iPad: Quick Guide
      Simple Steps to Change Your General Preferences on Safari
      How to
      Unblock Websites on Safari
      2 Simple Ways to Bookmark a Website in Safari
      Simple Ways to Open Safari in Full-Screen Every Time on Mac
      How to
      Enable Cookies in Safari
      3 Easy Ways to Transfer and Import Bookmarks with Safari
      2 Simple Ways to Clear Safari Search History
      How to
      Block a Website in Safari
      2 Easy Ways to Delete Cookies Using the Safari Web Browser
      How to
      Change Your Start Page on Safari
      2 Simple Ways to Clear History in Safari
      How to Disable the Safari Pop-Up Blocker: Quick Step-by-Step Tutorial
      Advertisement

      References

      1. ↑ https://support.apple.com/en-us/108051

      About This Article

      Thanks to all authors for creating a page that has been read 242 times.

      Is this article up to date?

      Advertisement