Difference between revisions of "Projects/Usability/HIG/Color"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Created page with "==Purpose== ==Guidelines== * Choose colors by selecting the appropriate theme color or system color. * Never use color as a primary method of communication, but as a secondary...")
 
m (Implementation)
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
==Purpose==
 
==Purpose==
 +
Color is a basal quality in human perception. Color can be used for communication, it is a very efficient way to direct attention, and significance can be assigned to an object with color. However, color is a historical and cultural phenomenon, and is subject of continuous aesthetical changes. Furthermore, it should be taken into consideration that a rather high percentage of population has a perception disorder ranging from difficulties to discriminate between red and green to complete color blindness.
 +
 +
A consistent color set helps create a familiar visual language throughout the user interface.
 +
 
==Guidelines==
 
==Guidelines==
* Choose colors by selecting the appropriate theme color or system color.
+
[[File:VDGColors.png|frame|none|alt=Alt text|Visual design color set]]
* Never use color as a primary method of communication, but as a secondary method to reinforce meaning visually.
+
* While the system color theme can be selected by the user, the color set (above) is used for the reference visual design of KDE Applications and Workspaces, and make up the default system color theme.
* Make foreground color contrasting to background.
+
** Primary colors are used throughout the main interface of the applications and workspaces. '''Plasma Blue''' is used as the primary highlight color.
 +
** Secondary colors are used sparingly as accents throughout the visual design.
 +
** Where transparency is used (e.g. shadows) consider using the opacities listed.
 +
* Avoid using color as a primary method of communication. Color is best used as secondary method to reinforce meaning visually.
 +
* Ensure sufficient contrast between foreground and background colors.
 
* Consider accessibility for users with color vision deficiency (~5% population).
 
* Consider accessibility for users with color vision deficiency (~5% population).
 +
 
==Implementation==
 
==Implementation==
 +
* When implementing colors in your application, select the appropriate theme color or system color from the palette provided by the Qt or KDE Platform/Frameworks library. You can use the [http://kde-look.org/content/show.php/CheckColorRoles?content=90034 CheckColorRoles] theme to detect bugs regarding the use of system colors in your application.
 +
* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKColorScheme.html KColorScheme] provides methods to pick readable colors based on the type of message to convey.
 +
 +
[[Category:Usability]][[Category: Presentation]]

Revision as of 18:32, 28 March 2014

Purpose

Color is a basal quality in human perception. Color can be used for communication, it is a very efficient way to direct attention, and significance can be assigned to an object with color. However, color is a historical and cultural phenomenon, and is subject of continuous aesthetical changes. Furthermore, it should be taken into consideration that a rather high percentage of population has a perception disorder ranging from difficulties to discriminate between red and green to complete color blindness.

A consistent color set helps create a familiar visual language throughout the user interface.

Guidelines

Alt text
Visual design color set
  • While the system color theme can be selected by the user, the color set (above) is used for the reference visual design of KDE Applications and Workspaces, and make up the default system color theme.
    • Primary colors are used throughout the main interface of the applications and workspaces. Plasma Blue is used as the primary highlight color.
    • Secondary colors are used sparingly as accents throughout the visual design.
    • Where transparency is used (e.g. shadows) consider using the opacities listed.
  • Avoid using color as a primary method of communication. Color is best used as secondary method to reinforce meaning visually.
  • Ensure sufficient contrast between foreground and background colors.
  • Consider accessibility for users with color vision deficiency (~5% population).

Implementation

  • When implementing colors in your application, select the appropriate theme color or system color from the palette provided by the Qt or KDE Platform/Frameworks library. You can use the CheckColorRoles theme to detect bugs regarding the use of system colors in your application.
  • KColorScheme provides methods to pick readable colors based on the type of message to convey.

KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal