Easier to Read - Black on White or White on Black
Applying Colour Theory to Digital Displays
January twenty, 2007
This article is Role III of my series "Colour Theory for Digital Displays." Information technology describes how you lot tin use color theory to application program user interfaces and Web pages and provides many guidelines for the constructive use of color.
Ensuring the Readability of Text Through Contrast
For backgrounds behind text, use solid, contrasting colors, and avoid the use of textures and patterns, which can make letterforms difficult to distinguish or even illegible. Cull combinations of text color and background colour with care. Value contrast between body text and its background color should be a minimum of near fourscore per centum.
Contrast with a White Groundwork
Blackness text on a white background provides maximal value contrast and, therefore, optimal readability for body text. The dissimilarity between charcoal grey (#333333) text and a white groundwork is about lxxx percent—thus giving minimally expert value contrast.
The following nighttime colors provide good to excellent contrast and legibility for text on a white background:
| Splendid: Black (#000000) text on a white background. | Excellent: Kashmir green (#003300) text on a white background. | First-class: Midnight blue (#000033) text on a white background. | Fantabulous: Burnt umber (#330000) text on a white background. |
| Skillful: Charcoal grey (#333333) text on a white background. | Excellent: Peruvian turquoise (#003333) text on a white background. | Excellent: Deep purple (#330033) text on a white background. | Excellent: Raw umber (#333300) text on a white background. |
| Expert: Slate (#333366) text on a white groundwork. | Very good: Forest light-green (#006600) text on a white groundwork. | Good: Navy blue (#000066) text on a white background. | Good: Deep burnt sienna (#660000) text on a white groundwork. |
| Good: Indigo blue (#330066) text on a white groundwork. | Very practiced: Viridian green (#006633) text on a white groundwork. | Good: Prussian blue (#003366) text on a white background. | Good: Deep burgundy (#660033) text on a white background. |
Contrast with a Black or Dark Background
On a blackness background, the high-blush colors yellow (#FFFF00), green (#00FF00), cyan (#00FFFF), and magenta (#FF00FF) provide the all-time dissimilarity. While white text on a blackness background provides very high value contrast, it is less readable and causes greater eye fatigue than black text on a white background. All light-colored text on dark backgrounds causes eye fatigue. More often than not, reserve the employ of low-cal colors on nighttime backgrounds for pocket-size amounts of bold text—for instance, headings, labels and links in navigation confined and menus, button labels, or pull-quotes—and make certain that the font size is big plenty to ensure readability.
The following high-chroma colors provide very good contrast and legibility for text on a black background:
| Very good: Yellowish (#FFFF00) text on a black groundwork. | Very good: Green (#00FF00) text on a blackness groundwork. | Very practiced: Cyan (#00FFFF) text on a black groundwork. | Very good: Magenta (#FF00FF) text on a black background. |
The Trouble With Blueish
Considering only two percent of all retinal cones—the photoreceptors that provide color vision—are blueish-sensitive cones and the eye brings blue into focus in front of rather than on the retina, visual vigil for the blue range of the spectrum is poor and it decreases with age. User operation in symbol identification is poorer with blueish symbols than with symbols of any other color. Therefore, avert using nighttime or highly saturated shades of blueish for text or other elements consisting of fine lines on a blackness or other night background. Also, avert text or symbols consisting of fine lines in highly saturated blue hues on a white or other calorie-free background. Text in desaturated bluish hues is adequately legible on light backgrounds. Blue is a good background color.
Contrast and Legibility
To provide the best legibility, ensure that text contrasts fairly with its groundwork in both hue and value. When in that location is bereft contrast betwixt the hue or value of text and its groundwork color, the text appears blurred or has a halo consequence around it, making information technology difficult to read and resulting in eye strain. Text that is in a color that contrasts well with an achromatic background of black, gray, or white or black or white text on a high-dissimilarity, color background generally provides better legibility than when both text and background are in different chromatic colors—unless the two colors contrast greatly in both hue and value.
The following color combinations provide good dissimilarity and legibility:
| Good: Black (#000000) text on a cyan (#00FFFF) groundwork. | Very good: Black (#000000) text on a xanthous (#FFFF00) groundwork. | Good: Blackness (#000000) text on a stake thalo yellowish greenish (#99FF99) background. | Expert: White (#FFFFFF) text on a bluish (#0000FF) background. |
Avoid using greyness for text or symbols consisting of fine lines on a colour groundwork, because a successive-contrast outcome causes them to take on the hue of their background color's complement. All Web-safe grays are too dark to serve as effective groundwork colors for black body text. Still, the non-Spider web-safe light gray (#EFEFEF) makes a good background colour for blackness text. White text contrasts fairly with a charcoal gray (#333333) groundwork.
The following colour combinations demonstrate diverse degrees of contrast and legibility, ranging from excellent to much also little dissimilarity:
Tip—If the contrast is insufficient for legibility, y'all can select the text to read it.
| white (#FFFFFF) | black (#000000) | medium gray (#999999) |
|---|---|---|
| In that location is fantabulous dissimilarity between this blackness text and the white groundwork. | There is sufficient contrast betwixt this silverish (#CCCCCC) text and the black groundwork. | There is also picayune contrast between this black text and the medium gray background. |
| There is very good contrast between this indigo blue text and the white background. | At that place is much too footling contrast between this indigo blue text and the black background. | There is besides little contrast between this indigo blue text and the medium gray background. |
| There is good contrast between this charcoal gray text and the white background. | At that place is much too trivial contrast between this charcoal greyness text and the blackness background. | At that place is too little contrast between this charcoal grayness text and the medium grey background. |
| At that place is too little contrast between this medium gray text and the white groundwork. | There is likewise footling dissimilarity between this medium grey text and the black groundwork. | There is much likewise little contrast between this dark gray (#666666) text and the medium grayness background. |
| In that location is much too fiddling dissimilarity between this goldenrod text and the white background. | There is good contrast between this goldenrod text and the black groundwork. | At that place is also little dissimilarity between this goldenrod text and the medium gray background. |
| In that location is much too fiddling contrast between this silver (#CCCCCC) text and the white background. | At that place is very good contrast between this white text and the blackness background. | There is too little dissimilarity between this white text and the medium gray background. |
| charcoal gray (#333333) | goldenrod (#FFCC66) | indigo blue (#330066) |
|---|---|---|
| In that location is much too little dissimilarity between this black text and the charcoal greyness background. | At that place is proficient dissimilarity between this black text and the goldenrod background. | There is much besides little contrast between this black text and the indigo blueish background. |
| There is much besides footling contrast betwixt this indigo blueish text and the charcoal gray background. | In that location too piddling dissimilarity betwixt this indigo blueish text and the goldenrod background and a slight simultaneous-dissimilarity effect makes information technology a bit difficult to read. | At that place is too petty contrast between this blue (#0000FF) text and the indigo bluish background. |
| There is too little dissimilarity between this dark grey (#666666) text and the charcoal gray background. | There is also little dissimilarity betwixt this charcoal gray text and the goldenrod groundwork. | There is much too little contrast betwixt this charcoal gray text and the indigo blue groundwork. |
| In that location is likewise trivial dissimilarity between this medium gray text and the charcoal grayness groundwork. | At that place is much likewise fiddling contrast between this medium gray text and the goldenrod background. | At that place is too lilliputian contrast between this medium gray text and the indigo blue background. |
| There is sufficient contrast betwixt this goldenrod text and the charcoal gray groundwork. | There is much too footling contrast between this yellow (#FFFF00) text and the goldenrod background. | There is likewise niggling dissimilarity betwixt this goldenrod text and the indigo blue groundwork and a slight simultaneous-contrast issue makes it a bit difficult to read. |
| There is practiced contrast between this white text and the charcoal gray background. | There is much besides little contrast between this white text and the goldenrod background. | There is expert contrast between this white text and the indigo blue background. |
Highlighting Text
Use high-dissimilarity colors for small-scale amounts of text that you want to emphasize strongly—that is, either a high-blush color on a dark or low-cal background, or a dark color on a light or high-chroma background. The best color combinations for highlighting information are as follows:
| Cherry (#FF0000) text on a white (#FFFFFF) background. | Purple (#990099) text on a white (#FFFFFF) background. | Yellow (#FFFF00) text on a Prussian bluish (#003366) background. | Blackness (#000000) text on an orange (#FF9900) background. |
| Red (#FF0000) text on a black (#000000) groundwork. | Xanthous (#FFFF00) text on a black (#000000) groundwork. | Green (#00FF00) text on a black (#000000) groundwork. | Cyan (#00FFFF) text on a black (#000000) background. |
Text and the Simultaneous-Contrast Effect
The to the lowest degree legible combinations of colors for text and groundwork are those that crusade a strong simultaneous-contrast effect—peculiarly light-green text on a ruddy background, red text on a green background, blood-red text on a blueish background, and other similar colour combinations, as shown in the post-obit examples. When a simultaneous-contrast effect occurs between the color of text and its groundwork color, the text appears to vibrate, making information technology very difficult to read and causing fatigue and eye strain.
| At that place is a strong simultaneous-contrast consequence between this green (#00FF00) text and the crimson (#FF0000) background. | There is a stiff simultaneous-contrast effect between this blood-red (#FF0000) text and the light-green (#00FF00) background. | There is a strong simultaneous-dissimilarity event between this red (#FF0000) text and the blue (#0000FF) groundwork. |
| In that location is a strong simultaneous-contrast effect between this cyan (#00FFFF) text and the cerise (#FF0000) background. | There is a strong simultaneous-contrast result between this magenta (#FF00FF) text and the green (#00FF00) groundwork. | There is a moderate simultaneous-dissimilarity effect between this yellowish (#FFFF00) text and the blueish (#0000FF) background. |
| There is a potent simultaneous-dissimilarity effect between this cherry (#FF0000) text and the cyan (#00FFFF) background. | There is a strong simultaneous-contrast consequence betwixt this dark-green (#00FF00) text and the magenta (#FF00FF) groundwork. | There is a moderate simultaneous-contrast effect between this blueish (#0000FF) text and the xanthous (#FFFF00) background. |
Combinations of colors that are far autonomously on the visible spectrum crave users to constantly refocus their eyes, resulting in visual discomfort and, possibly, fatigue.
Enhancing the User Experience With Colour
Apply the following design principles regarding the use of color to enhance the user experience of an application program or Web site:
- Apply colour consistently throughout.
Before designing an awarding or Web site, establish design guidelines, including conventions for the use of color. These conventions should dictate all purposes for which you use color, what colors use to specific types of elements, and the meanings associated with specific colors. Use these colour conventions consistently throughout an application or Web site. One time users translate the meanings of colors, they will apply those meanings wherever they meet the colors. If your use of color is inconsistent, users volition be unable to build a mental model of colour usage or to reliably interpret the meanings of specific colors.
- Use colour both to support users' tasks and for branding.
Ideally, to ensure maximal user functioning in applications, it is best to utilize color just to support users' tasks and determination-making. Because color is such a salient, powerful visual cue, its arbitrary apply for aesthetic purposes can actually degrade user operation. However, on the Web, the use of color for branding purposes is important. On the Web, color branding provides a sense of place, which is very important to user orientation and helps prevent users from condign lost in hyperspace. Try to restrict the utilise of colour that is solely for branding to certain areas of Web pages—for example, a logo in the upper-left corner of a page, a header, or a footer. In the master content area of a Web page, in a Spider web course, or in an interactive Web application, the use of color should be chore related. In such contexts, use color judiciously—simply where it provides real value and enhances user performance. Excessive utilize of colour reduces its effectiveness.
- Use color to increase user satisfaction.
Employ color to enhance the aesthetic appeal of an application or Web site—even if the use of color does not improve user performance. Most people prefer colour rather than achromatic Web pages, and on the Web, user satisfaction is just equally important every bit user performance. Nevertheless, ensure that the use of color is non visually distracting, impairing usability and reducing users' ability to complete their tasks successfully.
Using Color for Identification, Grouping, and Emphasis
There are many means in which you can use colour to help identify objects, communicate structure, guide the attending of users, or signal status. Utilize color to exercise the following:
- Place groups of related Web pages.
Yous can apply different colour schemes to place groups of related Web pages, communicating a Web site'south high-level data architecture and making information technology easy for users to quickly identify the part of a Spider web site to which a page belongs, equally shown in Figure ane. In this example, each department of the Web site has a different color scheme, so when a user points to the Process tab, information technology changes to that department'due south colour.
- Distinguish specific Spider web pages.
Y'all can apply a different color scheme to distinguish specific Spider web pages. Doing so provides a sense of place and, thus, tin can help to minimize user confusion and errors. For case, a purchasing procedure funnel might have a different color scheme from the residue of an eCommerce site.
- Relate visual elements or controls.
Y'all tin show the relationship between visual elements or controls of a specific type by consistently rendering them in the same color. For example, in Figure two, all elements of a unmarried blazon such equally tabs, buttons, list items, and icons have the same visual treatment, but their appearance is distinct from elements of other types. Colour-coding is the almost effective means of communicating a relationship between elements that are spatially afar from one another.
You lot tin can likewise use monochromatic colors—that is, various hues of the same color—closely related analogous colors, or other low-contrast colors to express similarity or close relationships between visual elements—for example, to represent different states of the aforementioned element every bit in Figure 2. In this example, the items in the list appear in unlike analogous colors, depending on whether they're collapsed or expanded.
- Demarcate areas of a window or Web page.
Yous can use background colour to demarcate dissimilar areas of a window or Spider web page, thereby communicating its logical structure, differentiating its dissimilar types of content, and improving its scanability and readability, as Figure 2 shows. You can also use color to set off the navigation bar on a Web page as on this Web site.
- Group controls or information in a window or on a Web folio.
Yous can use background colour to ready off groups of related controls or related items of information that are adjacent to i another. The advantage of using color for this purpose—rather than white space, borders, or some other visual cue—is that color does not consume any boosted screen existent estate.
For example, the main frame of a Web application page shown in Figure 3 demonstrates the utilize of a stake Wedgewood blue (#99CCFF) groundwork to set off a page title bar. A very lite, not-Web-prophylactic shade of gray (#EFEFEF) distinguishes command bars at both the summit and bottom of the page. Providing structure to the table, pale Wedgewood blue sets off the table header, argent (#CCCCCC) highlights the cavalcade by which the table is currently sorted—the Time column—white dividing lines demarcate hours, and rows of alternating shades of lighter grays (#EFEFEF and #E7E3E7) make it easier to track the rows in the table visually. The dominant color, pale Wedgewood blueish, highlights both the page title and the headers in the table. The colour with the highest chroma level is the dark-green of the status indicators for in-progress meetings, calling the attending of users to this important data.
- Highlight important job-related information.
Yous tin use a high-contrast accent color to emphasize and draw users' attention to important job-related data in a window or on a Web page—for example, when prompting users regarding essential interactions. When users' tasks depend on their power to quickly and reliably distinguish important information, color is the virtually constructive visual cue for highlighting such data. Nonetheless, excessive use of this technique reduces its effectiveness.
On a grade page, utilise red (#FF0000)—or another intense, warm hue containing a lot of red—to highlight the labels of any fields whose values are in error.
In the instance shown in Figure 4, the dominant color, teal (#348CB4), calls attention to the folio title bar, which defines the current task. Asterisks indicating required data are in the highlight colour burgundy (#983132), as are error message text and the highlighted label for a value that is in error.
You can use color to distinguish a field'south label from its information. When a user is filling out a course, highlighted field labels help guide the user through the grade. However, when displaying uneditable information, highlighting the data in fields rather than their labels helps focus users' attention on the data.
Color can besides aid communicate the logical construction of task-related data. For case, y'all can use color to highlight sequences of steps in instructions or descriptions of processes.
- Help users to find information on content-rich Spider web pages.
Color provides the almost constructive means of highlighting text, symbols, or other elements on a Web page in order to support user tasks that involve browsing or scanning for information, as shown in Figure 5.
The greater the density of data on a page and the greater the altitude between highlighted visual elements, the more this type of colour-coding improves user performance. Because color is such an constructive visual cue, its utilise can likewise reduce eye scanning movements and, thus, visual fatigue. For example, you can help users to find information more quickly and easily by using color to highlight all section headings or by placing all headings on a background of the same color, as on this site. Additionally, cross-reference arrows, bullets, and table-heading backgrounds also appear in the highlight colour. Differences in size or shape besides characterize near of these elements, simply colour is the virtually salient visual cue. Using redundant visual cues—such as color and size or shape—enhances user functioning.
- Represent hierarchical information.
Color is useful in representing hierarchy in either a navigation bar or in content—through department headings. In the navigation bar shown in Figure 6, the use of low-cal cobalt blue (#0066CC) tree-view controls lets users display groups of links, and light chartreuse (#99FF00) group labels provide a hierarchical structure. The links are in white (#FFFFFF). This navigation bar is for a Web application, which provides no browseable content. Therefore, it was not necessary to use the standard colors for different link states.
- Point link states.
Use link colors consistently throughout a Spider web application, Spider web site, subsite, or group of related Web pages. To avoid confusing users about whether they have previously viewed specific pages on a content Web site, signal visited links. The default link-land colors are equally follows:
- Inside content, links should be in the default blue (#0000FF) or another blue hue. Reserve this link color only for links.
- Links over which a user is hovering—that is, to which a user is currently pointing—should be in the default red (#FF0000) or some other red hue.
- Agile links that a user is currently clicking should also be in the default red (#FF0000) or some other red hue.
- Visited links should exist in the Net Explorer default color, bright violet (#9900FF); the Netscape Navigator default color, purple (#990099); or some other violet hue. Hues with lower chroma levels are ideal for visited links.
- Visually distinguish the linked elements, or hot spots, in an image map.
The post-obit guidelines may apply to either true image maps or faux prototype maps—which are multipart images that comprise rectangular image slices residing in the cells of a table:
- Use a distinctive color for each linked element in an image map.
- Use color to group related elements in an image map.
- When a user points to a linked image in a simulated image map, brandish a border in the Web site's standard link color to highlight information technology.
- When a user points to a linked image in a false epitome map, change its color, creating a rollover effect.
- Color lawmaking data and provide legends.
It is easier for users to interpret color-coded data than data that uses other coding techniques such as shape or size. When expressing data using colour-coding, attempt to limit the number of different colors to a maximum of 7. Many users cannot reliably distinguish more than than four or 5 different colors—especially when the colors are non in shut proximity to i some other—or remember what they mean. Therefore, keep color sets every bit minor every bit the information permits—preferably comprising iv or fewer colors.
To ensure that users can distinguish colors and call back color-coding, all colors should exist sufficiently different from one another and range across the visible spectrum. Highly saturated colors are the easiest to distinguish. The well-nigh mutual color confusions are orange (#FF9900) with red (#FF0000) and yellow (#FFFF00) with orange. Colors that are close together on the visible spectrum become more difficult to distinguish as the distance betwixt colour-coded elements increases or the size of such elements decreases. Small elements tend to announced desaturated and surrounding colors may crusade an apparent shift in their hue.
Use saturated, loftier-chroma colors to emphasize data; desaturated, low-chroma colors to de-emphasize data. When using color to express a continuum, use shorter wavelength, low-chroma colors such as violet (#9933FF) or blue (#0000FF) to correspond the low end of the continuum; longer wavelength, loftier-chroma colors such as red (#FF0000) or orange (#FF9900), the loftier end.
If color-coding is arbitrary—that is, neither uses mutual color associations nor reflects the colour of familiar, real-world objects—and particularly if it uses more six or viii colors, provide a clear legend in a prominent location to assist users in interpreting color-coded data, as shown in Effigy 7. Throughout the data, use simply one color to represent a particular thing, use various values or chromas of the aforementioned color to represent like things, and assign each color just a unmarried meaning.
- Visually distinguish the icons on a toolbar.
You tin can use color to visually distinguish and assist users identify the icons on a toolbar. Color is a more effective means of distinguishing icons than either shape or size, and tin reduce the mental exertion that icon identification requires. For example, the colors of icons on this Web-application toolbar help users to distinguish them from one another.
Using Color Associations in Expressing State Information
You can utilize people's colour associations to communicate state information effectively. Your use of color should be consistent with both job-related and cultural color associations. Using common color associations helps users to interpret color-coding correctly. For case, most Americans associate the states shown in Table i with certain colors.
| State | Color |
|---|---|
| Off | Ruby or Blueish |
| On | Red or Dark-green |
| Start | Greenish |
| Terminate | Scarlet |
| Caution | Yellow |
| Become | Greenish |
| Safe | Green |
| Warning | Yellow |
| Danger | Cerise |
| Emergency | Carmine |
| Hot | Red |
| Common cold | Blue |
Yet, color associations may differ in various cultures, so provide clarifying text, redundant coding, or a fable to ensure that an international audition tin can correctly translate colour-coded state information. When developing an application or Web site for a item culture, you should learn well-nigh its color associations before using colour to indicate land information.
Applying arbitrary meanings to color-coding that conflict with common color associations causes confusion. Use high-contrast, high-chroma colors to express state information.
Indicating Availability Using Color or Value
You lot can use differences in color or value to indicate the availability or unavailability of links or controls.
For Links on Navigation Bars
The same links or buttons should appear on the navigation bar or menus on either all pages on a Web site or all pages in a major subsection of a large site—and should be in a consistent location. Nevertheless, it should not be possible for a user to click a link or button that would reload the current Web folio or whorl to the beginning of a department that a user is already viewing. You can indicate that such an item on a navigation bar or carte is unavailable past removing whatever underlining from its label or past irresolute its color to a pale, depression-chroma hue; a light shade of gray, equally shown in Effigy 9; or a different color that contrasts strongly with the color of an available link or push.
If a navigation bar comprises rollover buttons, neither the color nor the appearance of the link or push for the electric current folio or section should alter when a user points to it. Alternatively, you tin can remove whatsoever push appearance and alter the link or button's background colour to that of the page's content or some other color indicating selection, giving its label the appearance of an indicator of the current page or department rather than a link.
For Controls
In applications, controls that are not currently bachelor announced dimmed—that is, are rendered in shades of gray, tints, or neutralized colors. Also, all windows except the active window appear dimmed. The post-obit examples show the dimmed appearance of various types of controls and an inactive window:
- Window controls appear dimmed when they are unavailable, as shown in Figure 10.
- Commands in menus appear dimmed when they are unavailable. Figure 11 shows a menu in which a number of commands appear dimmed.
- Icons on toolbars appear dimmed when they are unavailable. Several icons appear dimmed in the examples shown in Figure 12.
- Custom controls appear dimmed when they are unavailable, as shown in Figure xiii.
- Buttons on Web pages, on panels, and in dialog boxes announced dimmed when they are unavailable. Figure 14 shows buttons that announced dimmed.
- Controls on Web pages, in dialog boxes, and on panels appear dimmed when they are unavailable. Figure 15 shows drop-down menus, a text box, and a checkbox that appear dimmed.
- Inactive windows—that is, windows that are not currently accepting user input—appear dimmed, as shown in Figure 16.
In Figure 16, the championship bar and menu bar of an inactive window appear dimmed, while the blue championship bar and blackness menu titles of the window in Figure 17 indicate that it is an agile window. The Forward button in the agile window also appears dimmed, because information technology is not currently available.
Read more:
- Colour Theory for Digital Displays: A Quick Reference: Part I
- Color Theory for Digital Displays: A Quick Reference: Part 2
- Ensuring Accessibility for People With Colour-Scarce Vision
Bibliography
Galitz, Wibert O. User-Interface Screen Design. Boston: QED Publishing Group, 1993.
Mayhew, Deborah J. Principles and Guidelines in Software User Interface Design. Englewood Cliffs, NJ: Prentice Hall, 1992.
ThinkQuest. Psychological Effects of Colour Perception. Retrieved July 12, 2003 from http://library.thinkquest.org/50065/psych/effects.html. No longer available.
Easier to Read - Black on White or White on Black
Source: https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php#:~:text=the%20best%20contrast.-,While%20white%20text%20on%20a%20black%20background%20provides%20very%20high,dark%20backgrounds%20causes%20eye%20fatigue.
0 Response to "Easier to Read - Black on White or White on Black"
Post a Comment