Register Free Account

Register Me

How Not To Make Poor Color Choices While Developing a Theme for WordPress

Over the past few years, an interesting shift has been observed with the way WordPress themes have evolved to make sure your website stands out from the crowd. WordPress themes are getting quite sophisticated these days, providing a website that works well out-of-the-box. Quite recently, one feature that almost every WordPress user was excited about is the “accent color” option that comes by default with Twenty Fourteen theme that was introduced in the WP version 3.8. The option allowed developers to replace the default green color with whatever the shade you like. That is something which helped developers to make color decisions personally.

However, the option is now no longer available in the theme. There are several reasons for the removal of feature. First of all, it was possible to select any color, which implies that the user could pick any of the low contrast colors, which might hamper the usability of their website. Further, the availability of two alternative color shades picked up by the user were mainly generated behind the scene, thus making the feature code-heavy. The nature of default WordPress themes keep the code simple and lightweight, so that developers, especially who are new to this field can use the default theme as starter or parent theme.

Also, given to the short development cycle of the version 3.8, it became quite evident that WordPress developers did not get sufficient time ( as there was a less gap between the launch of 3.7 and 3.8) to improve the color accent implementation within the theme, which ultimately resulted in the removal of feature.


WordPress Theme and Color Choices



The presence of the feature like “accent color” persuaded theme designers to come up with poor color choices. Also, it bought unnecessary inline CSS, which can be harmful for your theme.

Developing a WordPress theme that’s both attractive and functional requires you to make logical color choices. Theme development is a complicated task and should be dealt with proper care. Planning colors for your theme is crucial to give your website the right tone and vibe. WordPress themes aren’t short of color options, but the majority of them still suffer from the same problem-bad color choices.

When selecting a color scheme or contrast for your theme, it is important to have full control over the colors you want to implement in your design. One must learn the basic color theory and terminology so that you don’t ruin a design by picking a poor color combination.

While playing around theme options, one must have a rational view of the website needs and goals. We can understand the concept better with the help of an example.  Look at Weaver WordPress theme. It boasts an option panel that allows you adjust the color for any element of your site.

Weaver is a nice theme, and developers praise its default look. Also, it’s a popular theme in the because it comes packed with options that offer more freedom and control to its users.

But, there is a flip side as well. The freedom for developers vouch for comes with a price, in the form of Weaver’s pro version. Something which you can opt for blindly without analyzing whether you actually need it or not.

So, what are the ways you can take to make sure you can protect yourself from making poor theme color choices. Playing around prebuilt color schemes is a standard way to perform the job, but there is another method we are going to talk about in this post.


Correcting the Contrast Using Sass or LESS



Planning a striking contrast is essential to make your site engaging and Sass and LESS are just right to do the job. For those who are familiar with the virtues of CSS, must be knowing about SASS and LESS to choose contrasting colors. You can either use ‘brightness ()’ or ‘lightness()’ to make a nice contrast between the background and the text. In addition, ‘darken()’ and ‘lighten()’ can be used to perform some modifications. There are more options to get the desired color brightness and amount of contrast.

However, when using SASS and LESS for WordPress theme development, you are indirectly altering the CSS in a new way. To combine SASS or LESS within your theme, you need to offload CSS into a WordPress plugins called Jetpack.


Jetpack Custom CSS

One of the most underrated or we can say underutilized features of Jetpack is CSS Custom Module. The plugin comes packed with all the essential PHP libraries, and showcase them all with the help of functions such as jetpack_sass_css_preprocess ():


$accent_color = get_theme_mod( 'accent_color', '#00ff00' );
$sass = sprintf( '$accent-color: %s;', $accent_color );
$sass .= get_the_rest_of_the_sass_code();
$css = jetpack_sass_css_preprocess( $sass ); // boom!

Now, it’s up to you where you wish to implement the $accent-color variable.

.element {
    background: $accent-color;
    color: if( lightness( $accent-color ) > 50, 'black', 'white' );
    &:hover {
        background: darken( $accent-color, 5% );

Also, it’s entirely up to the user from where they would like to fetch the entire Sass code. One way of doing it, is simply store it in the form of string in your PHP file. Alternatively, you can choose to use functions such as wp_remote_get (), as a fallback.

Using Sass and LESS is a revolutionary idea, but defining them mathematically can be tricky and time consuming. Functions such as pow () or nthroat () are used to measure brightness and contrast ratios. The process is a bit daunting, so perform it with precision.



Sass and LESS are best solutions available to plan your color implementation easily. They are great as they offer some dynamic options to modify the overall look and feel of our website.

No Comments Yet.

Leave a comment

You must be Logged in to post a comment.