Visa Accessibility - Color Contrast (VIS-003)
VGAR Visual Requirements
Visual
- Support Zoom (VIS-001)
- Not Only Color (VIS-002)
- Color Contrast (VIS-003)
- No Images of Text (VIS-004)
- Text Alternatives (VIS-005)
- Audio Visual Media (VIS-006)
Color Contrast (VIS-WEB-003)
Make sure your color contrast is high enough or provide an alternative style sheet
Text must be presented with enough contrast against the background page elements so that it is perceivable for users with low vision. The minimum contrast ratio is 4.5:1 for color contrast between text and the relative background.
If the text is 18 point or larger or 14 point bold or larger, the ratio may be reduced to 3:1 and still pass.
If the site’s design does not meet these color contrast ratios, an alternative style sheet can be provided that does pass this requirement. The alternative style sheet must be easily accessed.
Requirements
Color Contrast Ratio (VIS-WEB-003-01)
A color contrast ratio of text, informational images, and images of text to their backgrounds MUST be at least 4.5:1, except if the text is 18 point or 14 point bold or larger, where a ratio of 3:1 is then required.
Alternate Style Sheet (VIS-WEB-003-02)
Color contrast ratio requirements (VIS-WEB-003-01) must be met by the site's default look-tone-feel (LTF) unless an alternate (high-contrast) compliant style sheet is available and an accessible method of activating it.
Contrast for Non-text UI Components (VIS-WEB-003-03)
User interface components and graphical objects MUST have a contrast ratio of at least 3:1 against adjacent colors.
Support High Contrast (VIS-WEB-003-04)
All content adapts and supports the user's high contrast mode settings.
Test Procedures
WCAG Contrast Checker (VIS-WEB-003-01-T)
Confirm that all color contrast ratios of text, informational images, and images of text to their backgrounds must be at least 4.5:1, except if the text is 18 point or 14 point bold or larger, where a ratio of 3:1 is then required.
Note: All of this information will be provided in the WCAG Contrast Checker side panel, except for text that is not HTML text or an HTML colored background (e.g., text over a gradient image). In this case, use the color picker tool at the bottom of the panel to pick samples and determine if the text fails in any places.
WCAG Contrast Checker (VIS-WEB-003-02-T)
If all site colors cannot meet VIS-WEB-003-01 (which is preferred), contrast requirements can be met by providing an alternate (high-contrast) style sheet and an accessible method of activating it.
WCAG Contrast Checker (VIS-WEB-003-03-T)
Confirm that all user interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors including the background and other non-text objects by using the eye dropper tool in CCA.
High Contrast Mode (VIS-WEB-003-04-T)
Windows: Use the search feature to search for High Contrast Mode. Activate High Contrast Mode from the settings window.
Mac: Go to System Preferences>Accessibility>Display>Check the box for Invert Colors.