There is decent contrast for graphics (that don't have text) and inputs/controls/focus styles
Design Notes
Ensure interface components and meaningful graphics have sufficient contrast
Active user interface components (e.g. text inputs and radio buttons) and meaningful non text graphics should be distinguishable by people with visual impairments.
Inactive components are exempt from this requirement (e.g. disabled buttons), but if it is possible to ensure these elements have sufficient contrast without confusing users, this will help people with low vision.
Identify the element(s) that convey the meaning of the graphic or component. Use a tool which calculates the ratio between adjacent colours to that graphical element.
The minimum contrast ratio for interface components and meaningful graphics is 3:1.
More information
- For full details, see: Understanding Non-Text Contrast
- Tool: Colour contrast checker - refer to the results for ‘non-text contrast’ or 'graphical objects and user interface components' rather than for text.
Ensure focus styles can be seen
Where colour is relied upon to indicate focus, the focus colour must have a minimum 3:1 contrast ratio with the adjacent colours.
The best way to ensure accessible focus indicators is to not to rely on a colour change alone but to combine with another visual change which doesn't require colour vision — such as a border thickness change, too.
Example focus state which works in a variety of contexts through the use of colour and border thickness changes.
More information
Ensure link text meets contrast requirements
- If colour alone is used to communicate text is a link, ensure the contrast ratio between the link and surrounding text is at least 3:1. Plus, make sure the appearance of the link changes — such as becoming underlined — when it receives keyboard focus (or mouse hover)
- The simplest way to meet the contrast requirement is to ensure all body links are underlined
Note: this doesn't apply to elements in repeated navigation such as header or footer as it is clear from the context these elements are links
More information
Developer Notes
Ensure colour contrast requirements are met
Before implementing a design ensure that it meets colour contrast requirements.
Non-Text Contrast
Active user interface components and meaningful non text graphics should be distinguishable by people with visual impairments.
- The minimum contrast for such components is 3:1.
Information and tools
Testing Notes
There is decent contrast for graphics (that don't have text) and inputs/controls/focus styles
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent colour(s):
- User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Impact range: Medium - Low
Test type: Manual
WCAG Reference: Understanding Success Criterion 1.4.11: Non-text Contrast