Changes

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">

<noinclude>{{Translations}}</noinclude>

<noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude>

{{hig-subnav-intra|p_page=Icons|c_section=The Sugar Interface|c_page=Colors|n_page=Text and Fonts}}

{{hig-subnav-intra|p_page=Icons|c_section=The Sugar Interface|c_page=Colors|n_page=Text and Fonts}}

This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link.  Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent.  However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.

This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link.  Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent.  However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.

To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided.  Instead, please adhere to the guidelines for [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]].

To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided.  Instead, please adhere to the guidelines for [[Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]].

See [[XO colors]] for the full list of defined and approved XO colors.

See [[OLPC:XO colors]] for the full list of defined and approved XO colors.

====Contrast in the Munsell Colorspace====

====Contrast in the Munsell Colorspace====

The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps.

The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[OLPC:Munsell]] value steps.

The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either &le;N3 or &ge;N7.

The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either &le;N3 or &ge;N7.

{{hig-subnav-intra|p_page=Icons|c_section=The Sugar Interface|c_page=Colors|n_page=Text and Fonts}}

{{hig-subnav-intra|p_page=Icons|c_section=The Sugar Interface|c_page=Colors|n_page=Text and Fonts}}

[[Category:Design Gang]]

[[Category:Design]]

[[Category:Graphics]]

[[Category:Graphic Design]]

[[Category:Graphic Design]]