Meeting requirements for accessible text (HTML)
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Looking for the C#/VB/C++/XAML version of this topic? See Meeting requirements for accessible text (XAML).
Contrast ratio
Although Windows and Windows Phone users can always switch to a high-contrast mode, your app design for text should regard that as a less preferable option for the user. 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, if the level of contrast between red and green is too small. 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. Generally these tools enable you to select any two pixels on a screen and evaluates these pixels as a ratio for contrast
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 Runtime app. You might need to enter foreground and background color values manually in the tool, duplicate sections of HTML and CSS and load in a browser, 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.