Website Accessibility Tip of the Week: Web Colours
Web Colour Best Practices
- When creating text for your website use readable fonts and a contrast ratio of 3:1 with surrounding text. Please note that using the styles in the styles menu in Drupal and/or Adobe Contribute ensures that all color ratios meet the AODA requirements.
- Ensure that information conveyed by color differences is also available in text. (e.g. In an online form, it would not be sufficient to ask the user to fill in the green boxes on the screen with content. You would have to add text to all of the green boxes that instructs the user to fill them in with content.)
- Change the presentation of a user interface component when it receives focus. (e.g. When a hyperlink is moused-over or tabbed onto, it should change visually and audibly for screen readers)
- Include a text cue for coloured form control labels.
See the additional resources below to learn more details about the WCAG 2.0 Guideline 1.4 and Success Criterion 1.4.1.:
The use of colour accessibility guideline is based on the first Web Content Accessible Guide (WCAG) 2.0 principle, Level A: Principle 1 – Perceivable and states: Information and user interface components must be presentable to users in ways they can perceive.
The WCAG 2.0 Guideline 1.4 - Distinguishable was created based on that principle stating: Make it easier for users to see and hear content including separating foreground from background.
The WCAG 2.0 Success Criterion 1.4.1 - Use of Colour states: Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Discover more website accessibility resources on the Trent University Marketing & Recruitment website
Posted on January 23, 2017
