WordPress.com

1. julievanhuizen
   Member
   Feb 19, 2013, 6:10 PM

   Hi all, I have the custom design upgrade, and have selected two custom colours for my blog. A bright yellow (fec532) for the headers and bright orange (f58026) for the links. However, wordpress shows these colours as terribly ugly darker versions, and I'm totally at a loss as to why. Is there something I can stick in the css to fix this?

   Here's a screen shot showing the discrepancy between the colours selected, and how they are showing on my blog: Yuck!

   http://jubileecreative.files.wordpress.com/2013/02/screen-shot-2013-02-19-at-10-45-44-am.jpg

   Thanks in advance,

   The blog I need help with is jubileecreative.wordpress.com.

   The blog I need help with is wesothrifty.com.

2. designsimply
   Staff
   Feb 22, 2013, 8:24 PM

   @julievanhuizen, what is happening is that the Custom Colors feature has some built in contrast rules to try to help keep the text readable for people with impaired vision and for accessibility reasons. If you select a color that is too close to the background color or that is programmatically determined to be too hard to read, the color gets adjusted.

   It's possible to override the color contrast rules using custom CSS. Here is an example that adjusts all of the things Custom colors adjusts for link and heading color, except you need to copy and paste it into your Appearance → Custom Design → CSS editor:

   a,
   #nav-above a,
   .fetch a,
   .entry-meta a,
   #site-info a {
   	color: #f58026;
   }
   
   .menu ul a,
   #reply-title,
   .entry-title,
   .page-title,
   .post_title,
   .post_title h1,
   .post_title h2,
   #comments-title,
   #site-title a,
   #site-title,
   .widget-title a,
   .widget-title,
   .box h1,.box h1 a {
   	color: #fec532;
   }

Topic Closed

This topic has been closed to new replies.