VGAR Visual Requirements
Requirements
Visual
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 is provided.
<button id="loadHighContrastStyles">View high contrast</button>
$('#loadHighContrastStyles').click(function(){
var contrastStyle = $('<link rel="stylesheet" type="text/css" />')
.attr('href', 'styles/contrast.css');
$('head').append(contrastStyle);
});
Contrast for Non-text UI Components (VIS-WEB-003-03)
User interface components and graphical objects MUST have a contrast ration 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.
Related Content
WCAG Success Criteria
W3C Techniques
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G156: Using a technology that has commonly-available user agents that can change
- G195: Using an author-supplied, highly visible focus indicator
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- G207: Ensuring that a contrast ratio of 3:1 is provided for icons
- G209: Provide sufficient contrast at the boundaries between adjoining colors
Common Failures
- F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
- F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)
- F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information. You should not act or rely on such content without seeking the advice of a professional. All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.