A fix for low contrast sites in Safari

Many websites still provide low contrast for text, even though it can make it difficult to read. One solution in Safari is by creating a CSS file that the browser can use in addition to the designer’s and then specify in Safari’s preferences.

  1. Create a blank file. This is best done in a plain text editor, such as BBEdit or TextWrangler. If using another program make sure the file is saved in plain text.
  2. Type the following line in the file to provide black text on a white background.
    p, ul, ol, li { background-color: #fff; color: #000; !important; }
  3. Save the file on your computer in plain text format with a name such as “override.css”.
  4. Within the “Advanced” pane of Safari’s preferences select the option “Style Sheet” and then “Other…” from the menu to locate your file.
  5. Choose “None Selected” to remove the changes at any time.

Note the stylesheet won’t change all of the text, but should affect the main content. If you know some basic CSS you can adjust it to work best for you and use when needed.

For web designers

If you are a web designer, please consider your visitors and remember that there are factors beyond just making your website look nice. Even if high profile companies like Apple have this issue doesn’t mean it should be followed.

Recently I changed the theme for this blog with the above in mind. A new theme also provided for a current and responsive theme suitable for mobile devices.

Apple releases Safari 5

In addition to the big news of iPhone 4 and iOS 4 Apple also released a new version of Safari. Added to Safari are some of the new HTML5 elements and improved performance. Another addition is an official extensions capability to Safari. One of the most interesting features that has been added to Safari is what Apple calls “Safari Reader”. When Safari finds an article in a webpage and you select “Reader” from the menu Safari will pull the main content into a window, without adds and other items that may distract from reading. This is similar to when sites create a simpler “print” view.

To see some of the HTML5 capabilities in action check the  HTML5 web pages Apple posted last week.