Evaluating User Interface (UI) Color Contrast for Accessibility Conformance
According to Enchroma.com, there are approximately 300 million people around the world with some form of color blindness. Color blindness is more common in men than women with the same or similar conditions. The most common type of color blindness is Red-Green color blindness, which makes it difficult to differentiate red and blue. Less common is Blue-Yellow color blindness, which makes it difficult to differentiate between blue and green, and between yellow and red.
One of the first decisions a designer makes is selecting the color scheme for a project. This selection is an opportunity for accessibility to be built in to the development process from the very first decision point by ensuring the color scheme meets the standard for color contrast. These requirements correlate to individuals with visual impairments such as color blindness and how they are able to access equivalent information. Choosing a strong contrast as part of the overall color scheme before development begins will help ensure re-work, re-branding, and re-development are not needed at the end of the project., and shifts an easy accessibility standard as far left as possible, baking in accessibility at the beginning of the design stage.
Color Contrast is an essential aspect of perceiving and recognizing accessible information and communication technologies (ICT). There are two standards the Federal sector follows to ensure minimum requirements are met. The Section 508 requirements include:
- 503.2 User Preferences: Applications shall permit user preferences from platform settings for color, contrast, font type, font size, and focus cursor. Exception from E503.2 User Preferences: Applications that are designed to be isolated from their underlying platform software, including Web applications, shall not be required to conform to 503.2.
- 410.1 General: Where provided, color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- 302.3 Without Perception of Color: Where a visual mode of operation is provided, ICT shall provide at least one visual mode of operation that does not require user perception of color.
- 503.2 User Preferences: Applications shall permit user preferences from platform settings for color, contrast, font type, font size, and focus cursor.
- Exception from E503.2 User Preferences: Applications that are designed to be isolated from their underlying platform software, including Web applications, shall not be required to conform to 503.2.
The Web Content Accessibility Guidelines (WCAG) 2.0 requirements include:
- Conformance Level AA
- All text combinations with a ratio of 3:0 and below fail.
- All text combinations with a ratio of 4.5:1 or higher pass all text.
- Any text combinations with a ratio less than 4.5:1 but greater than 3:01 pass for “Large” text only.
- Text or images of text that are part of an inactive UI component, decorative, hidden, or contain other visible content have no contrast requirement.
- Text that is part of a logo has no color contrast requirement.
- Minimum color contrast ratios for Section 508 conformance determine the difference between the foreground and background colors (i.e., white text on dark blue background).
- Example:
- Foreground: #FFFFFF
- Background: #002060
- The contrast ratio is: 15.3:1
- Text passed at Level AA
- Large text passed at Level AA
Color Contrast for Accessibility
There are many evaluation tools and ways to ensure the chosen color palette for the user interface design meets the minimum requirements for compliance. To better understand those requirements, remember the conformance standard for color contrast is WCAG 2.0 is AA. This is considered an industry standard. The color contrast between the foreground and background colors for textual information must be at least 4.5:1 (small text) and/or at least 3:01 (large text). As a rule of thumb, when designing the UI, consider using a color palette to choose primary and secondary colors in the very beginning of the project. This will ensure the colors chosen for interactive elements, icons, text, etc. meet minimum contrast requirements and prevents future remediations by including an accessible UI.
Additional Information
Here are examples of additional resources to learn more about how to create accessible color combinations for ICT.