Easier Online Link Color Testing

Web page link colors are important. They need to somehow stand out while not clashing with the page design. (It may also be prudent to consider the 4.5% of the population who are colorblind.)

There may be an inclination to give link colors less priority than they should because testing various link colors on live pages can be frustrating and time consuming.

The primary frustration for link color testing with browsers is their insistence on caching the CSS file. To test an updated CSS file, the file name needs to be changed or the browser's cache emptied.

I'll show you how to eliminate that caching annoyance with a temporary page dedicated to testing various link colors.

The temporary page will load CSS into the head area, below any other CSS statements or imports. Because CSS cascades, the code loaded into the temporary page will override any earlier CSS a link declarations.

Thus, there is no need to change any of your current CSS files until you've finalized the colors you want for your links.

To get a feel for how it works, see the demonstration page.

How to Do It

The first thing to do is make a copy of a representative web page containing links that is currently working on your website. It must be a .php page because it will be the temporary page used for testing various link colors.

1. Download the page.

2. Make a copy of the page.

3. Save the copy as linkcolortest.php

4. Upload linkcolortest.php to your browser.

5. Load the URL of linkcolortest.php into your browser.

6. Verify it works like the original.

When the copy works like the original, you're ready to proceed with these next 2 steps.

1. Create a temporary subdirectory.

Create a temporary subdirectory named temp on your server in the directory where the temporary link color test is located. (Your PHP might need the temporary subdirectory to have 777 permissions. If so, assign 777 permissions to the subdirectory.)

2. Modify the temporary page.

Modify the temporary link color test page that you uploaded. Two places need to be modified.

1. Immediately above the cancel </head> tag of the temporary page source code, paste this:

   <style type="text/css">
   <?php
   if( isset($_POST['css']) ){ file_put_contents('./temp/linktest.css',$_POST['css']); }
   echo(@file_get_contents('./temp/linktest.css'));
   ?>
   </style>
   

2. Determine where on the temporary page you want the textarea box where you will be putting the CSS to test. The textarea box will float on top of regular content — except form fields already published on the page and perhaps other non-text elements. If needed, the position of the textarea box can be changed.

   In the temporary page source code, at the place where you want the textarea box to be, paste this:

   <div style="position:relative;">
   <div style="position:absolute; border:9px solid #ccc; background-color:white;">
   <?php if(isset($_POST['css'])): ?><div style="text-align:center;">{Update applied}</div><?php endif; ?>
   <form method="POST" style="display:inline; margin:0;">
   <textarea name="css" style="width:280px; height:200px; font-family:monospace;" nowrap wrap="off"><?php echo(@file_get_contents('./temp/linktest.css')); ?></textarea>
   <div style="text-align:center;"><input type="submit" value="Update CSS"></div>
   </form>
   </div>
   </div>
   

Upload the modified temporary link color test page and it's ready to use.

Using the Temporary Link Color Test Page

Type the URL of the temporary link color test page into your browser.

You'll see a form textarea box on the page where you pasted in the code of step 2 when you modified the temporary page.

The demo page shows you what the textarea box looks like. For your implementation, the style may be affected by the CSS of your page.

The textarea box on your temporary link color test page will be blank when the page first loads. Type any valid CSS into it and click the "Update CSS" button.

Example of valid CSS:

a { 
   text-decoration: none; 
   color: #369; 
}

Whatever you type into the textarea box, so long as it's valid CSS, will be effective on the page immediately after you click the "Update CSS" button.

Change the color (or other aspects of the link), clicking the button after each change.

When the links on the temporary page appear as you want, save the CSS code somewhere. Then, update the CSS file(s) your site uses to conform with the new CSS.

The temporary link color test page can be deleted from the server when you're done testing. The temporary subdirectory, too, unless you have other use for it.

There's less frustration using this system for testing various link colors.

And because it's easier, a person may be inclined to pay more attention to link colors with an eye on how to make them visually appealing and user-friendly.

(This article first appeared in Possibilities newsletter.)

Will Bontrager