Color in CSS Design: Color in Content Organization

Where a website is used to present a lot of data, especially numerical data, colors can be almost indispensable in the organization. When colors are used in this way, rather than picking them randomly, a set of colors should be chosen, then a purpose or meaning should be assigned to each color, and the principle of usage should be maintained across pages for consistency. Color can also be used to label or group related items to help remember more items than usual or to create a hierarchy according to the order of importance; for example, the darkest and brightest colors can be used for the most important information in order to draw attention to them and soft natural colors can be used for most other information.

When color is used to separate items into groups, although the colors used should be distinctly different from one another, they should not vary in perceived intensity, as this can cause one color to stand out more than the others, falsely giving the impression that it is more important. For example, if red is used for one group, then green, and not bright green, should be used for another group; otherwise, the bright green group will appear more important.

Where a sequence of values is color-coded, a single hue is best used, with the intensity varying from pale colors to darker and brighter colors for low to higher values, respectively. However, this technique should be avoided where different concepts are being given colors, as shades of the same color can be difficult to distinguish. Different concepts should be assigned different hues. Also, because visual perception is relative and not absolute, the perception of the same color can change with different color background or surrounding, giving the impression that the same color represents different concepts. To avoid this (e.g., across pages), background or surrounding color must be consistent. To further ensure color consistency in the colors that different users see, it is a good practice to check a color scheme across various devices, since the appearance of colors often changes across devices.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *