Yellow Fonts, Contrast, And Clarity

custom-colours

I went into the customisation options for this theme to see whether I could change the colour of the font in the sidebar because it seems a bit unclear. That is, the contrast between the yellow font and the white background means that I have to peer to see the lettering.

I don’t mean that I actually bend forward towards the screen, lift my fictitious glasses, squint, and utter small sounds while trying to make out the lettering.

I mean that inside my semi-conscious mind, my inner ‘me’ is doing that.

Notice that the yellow lettering changes to dark blue when you bring your mouse over any of the sidebar widgets. It is so much easier to read with the mouse at on-hover over a particular sidebar widget.

But that is not the default position for a general view of the page, and the yellow is too light and unclear, in my opinion.

I went into the customisation options, to see whether it was possible to change the colour of the font. There didn’t seem to be an option to do this, so I went into the custom upgrade options.

That’s when I saw the information (see the image above) that the option to change the colours will be available at some time in the future – and without buying the custom upgrade, of course.

The Superhero theme is made by Automattic (the makers of WordPress), so I would think it would be high on the list of themes for which they will be making this feature active.

Self-Hosted Superhero

The Superhero theme is available for self-hosted WordPress sites and I have this site that I keep for testing themes, which is at DBWORDPRESS.COM.

I went into it and activated Superhero, and then in the stylesheet CSS I changed the colours of the font in the sidebar from #F6C628 (yellow) to the same colour blue as the headings in the main body content, which is #1E4A66.

Colors/Colours On The Web

colors-on-the-webI might change the font colour to something else when I have the time and inclination to decide what colour palette will work.

Then, when WordPress.com introduces Custom Colors, I will have done the groundwork and be able to change the colour straight away to something that ‘works’.

I use Colors On The Web for playing around with colour palettes. Go to Color Tools in the main navigation bar and click on Color Wizard in the drop-down menu. That will bring up an interactive color-matching application like you can see here.

You can start from scratch or you can input a hexadecimal if you have one that you want to use. Then you have various choices like the one shown here – ‘split complimentary’.

By the way, the font in Superhero is Carrois Gothic, which is a Google font, available by going to the Google fonts pages.

8 thoughts on “Yellow Fonts, Contrast, And Clarity

  1. Thanks for sharing your experience with Super Hero and the image. What a nugget!

    That’s when I saw the information (see the image above) that the option to change the colours will be available at some time in the future – and without buying the custom upgrade, of course.

    Like

  2. Reblogged this on one cool site and commented:
    I’m eagerly awaiting activation of this feature. I can’t wait to be able to set custom colors without having to pay for a custom design upgrade. There are themes that I would be using now if we had the ability but we don’t.

    Like

  3. Pingback: Yellow Fonts, Contrast, And Clarity| Light Reading | one cool site

  4. Yes, it looks really nice on the other page. I’m in full understanding — I have lots of hang-ups about stuff like this. Last year, I went ahead and bought the custom CSS upgrade. Had decided to give it up after a year, but took it back again.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s