Color Issues for Accessible Game Development

Transcription

1 Color Issues for Accessible Game Development This document is intended to provide guidance for the proper use of color in the development of accessible games. The information herein has been abridged from several public guidelines for color issues in UI/UX design. Guidelines Refresher There are a large variety of guidelines that should be followed when dealing with Color and contrast issues. Below are some specific guidelines which are relevant to an accessible game development project. After this summary of guidelines several descriptions and examples are given to showcase how to implement the guidelines in practice. WCAG Use of Color Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) Situation A: If the color of particular words, backgrounds, or other content is used to indicate information: o G14: Ensuring that information conveyed by color differences is also available in text o G205: Including a text cue for colored form control labels o G182: Ensuring that additional visual cues are available when text color differences are used to convey information o G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them Situation B: If color is used within an image to convey information: o G111: Using color and pattern o G14: Ensuring that information conveyed by color differences is also available in text WCAG Contrast (Minimum) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement Contrast (Enhanced) The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1; 1

2 Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. WCAG Visual Presentation For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA) 1. Foreground and background colors can be selected by the user. 2. Width is no more than 80 characters or glyphs (40 if CJK). 3. Text is not justified (aligned to both the left and the right margins). 4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing. 5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window. Example Palette Below is a detailed example of a palette that could be used for color issues for an accessible game, based on compliance with various public specifications and guidelines. Example Palette: Primary Colors This palette s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility. 2

3 Example Palette: Secondary Colors These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time. 3

4 Example Palette: Background Colors These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors. 4

5 Example Palette: Tertiary Colors These colors are used primarily for content-specific needs, such as alerts and illustrations. They should never overpower the primary colors. 5

6 Example Palette: Special State Colors These colors are used to represent special states such as an object having focus, or an object having been previously visited. Example Palette: Text Accessibility WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text. The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. Colors on a white background 6

7 Neutrals on a colored background 7

8 Low-Vision and Visual Acuity Issues: Example of Color choices The best solution is to provide multiple levels of color controls, similar to the following example: In this example, multiple options or levels of colors are adjustable by the user: Text Color: The color of the text, or foreground color. Background color: The color of the background behind the text (the page color) Tracking Text Color: The color of the highlighted portion of the text, at a sentence level. Tracking Background Color: The color of the background behind highlighted text sentences. Word Text Color: The color of the individual highlighted words, if different from the sentence color. Word Background Tracking Color: The color of the background behind the individual highlighted words, if different from the sentence background. Some good examples of pre-set color options that are beneficial to disabled users are given below. (If synchronized highlighting or tracking is not used then omit those options). Black Text on a Mint Green Background with Yellow Tracking Yellow Text on a Black Background with Red Tracking White Text on a Blue Background with Red Tracking Black Text on a White Background with Yellow Tracking White Text on a Black Background with Blue Tracking White Text on a Red Background with Blue Tracking 8

9 Color-blind Options Color-blind / Color Vision Deficiency (CVD) options are the most popular and in-demand feature for those with visual issues. As many as 8% of the male and 0.5% of the female population are affected with some type of color blindness. All games should have colorblind options that can be enabled to compensate for a variety of color deficiency issues. The most prevalent of these disorders is the inability to tell the difference between the colors green and red. This is most often avoided by providing a way to change the color green to blue when indicating information. It is generally suggested when text is used with a colored background that text remain black and the color background be chosen from the previously discussed color combinations for low-vision issues. To support color-blind players, a secondary indicator needs to be added when color is used to indicate an important status. For example, consider a game with a map that shows players which team has control of territory. The standard implementation of this would be to add a RED and GREEN overlay on the map to indicate status; this would be useless to most color-blind gamers. A much better way to handle the situation would be to include symbols on the map to indicate who owns each area with the normal color scheme. Perhaps a Check Mark for those things your team has control of and an X on those you don t or fog of war mechanics. This can also be an option that can be turned on or off depending on gamer preference. A color-blind friendly palette supports color combinations such as blue & orange, blue & red or blue & brown. In most cases, color-blind people can distinguish between the two, which is useful in cases where color differences are used to optimized data visualization. Yellow & green can also sometimes be used, but is not as desirable. The use of pastels colors for data visualization is not suggested due to the lack of saturation. Technical References, Guidelines and Tips W3C Web Accessibility Initiative Guidelines (including WCAG 2.0): Includification Color Blindness Options: Tips for designing charts with a color blind friendly palette: Section 508 US Web Design Standards for Colors: 9