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.

Advertisements