Contrast ratio
Although Windows 8 users can always switch to a high-contrast mode, your app design for text should regard that as a last resort. A better practice is to ensure that your app text meets established guidelines for the level of contrast between text and its background. Evaluating the level of contrast is based on techniques that don't consider color hue. For example, red text on a green background might not be readable to someone with a color blindness impairment. Checking and correcting the contrast ratio helps prevent these types of accessibility issues.
To be considered accessible, visible text must have a minimum luminosity contrast ratio of 4.5:1 against the background. Exceptions include logos and incidental text such as text that is part of an inactive UI component.
Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background, and the words can be rearranged or substituted without changing meaning, the words are considered to be decorative and do not need to meet this criterion.
Use color contrast tools to verify that the visible text contrast ratio is acceptable. See Techniques for WCAG 2.0 G18 (Resources section) for tools that can test contrast ratios.
These recommendations for text contrast are based on a web accessibility standard, G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. This guidance exists in the W3C Techniques for WCAG 2.0 specification.
Note Some of the tools listed by Techniques for WCAG 2.0 G18 can't be used interactively with a Windows Store app. You might need to enter foreground and background color values manually in the tool, or make screen captures of your app UI and then run the contrast ratio tool over the captured image.
Text in graphics
Avoid using text in images. Text that you include in an image file and display in the app with the img element is not accessible or readable by assistive technologies. If you must use text in images, be sure to include the text or a summary of the text's meaning in the alt property.
Related topics
Build date: 11/28/2012
