How to improve non-text contrast: color schemes and interface components
By: David E. Miller, Minnesota IT Services, Partnering with the Department of Corrections
Since May 1999, the Web Content Accessibility Guidelines (WCAG) have had us thinking about colors. From the start, WCAG told us to use more than just colors to convey information and to use sufficient contrast between foreground and background colors. In December 2008, WCAG 2.0 stated that text should have a contrast ratio of at least 4.5:1 to its background. For those who consume text visually, the contrast ratio is extremely important. It ensures that your eyes can pick out all the lines, curves, dots, and serifs of the text for ease of reading. It makes the text pop.
You may know these guidelines by heart and are subconsciously checking for them daily. WCAG 2.1, published in June 2018, introduced some new guidelines. This article covers one of those additions: 1.4.11 Non-text Contrast – Level AA.
Text of the criterion: “The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(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.”
What does this add to WCAG?
How does it apply?
Learn some basic rules to help ensure that those who design, develop, and test know How to improve non-text contrast: color schemes and interface components.
Incognito Testing: Make Special Considerations, Get Expert Results
Cybersecurity - Part of Accessibility Testing
By Jennie Delisi, Accessibility Analyst
If you don’t want a web browser to remember your activity, you can browse the web privately. Google Chrome calls this Incognito mode. Many browsers have this capability, but they call it different names:
- Edge: InPrivate browsing.
- Firefox: Private window/Private browsing.
- Safari: Private browsing.
Some people only think about this when they don’t want the websites they visit stored in their browsing history. Accessibility testers can use incognito and private browsing modes to save time. That way you don’t have to clear your cookies and cache each time you start a test session. Before you start using extensions in private browsing modes you must think through how this impacts information security.
Think About the Data
“A private browsing window can’t erase the records of your visit from a website’s servers, or from any networks you went through to get to a site,” writes Nicholas Deleon. This also applies to any accessibility testing extensions you want to use. Each extension or app shares information about how they store data regardless of whether you use private browsing.
If your accessibility testing extension stores data in any way do not use protected information without permission from your project team. In short, while your browser may be in incognito mode, your app or extension may not.
- What is protected information?
- What should you do if you want to use accessibility testing tools in private browsing mode?
- What other options are available?
Read more about what you need to do Incognito Testing: Make Special Considerations, Get Expert Results.
Recordings Available: MNIT Global Accessibility Awareness Day Sessions
To celebrate Global Accessibility Awareness Day (GAAD), Minnesota IT Services’ (MNIT) Office of Accessibility hosted a series of short virtual presentations for State of Minnesota employees. Did you miss them? That's ok! Because the goal is to get everyone talking, thinking, and learning about digital accessibility and inclusion, MNIT recorded the sessions. They are now available.
The presentations showcased the value of accessibility and how accessibility improvements drive more inclusion:
- Introduction to accessibility standards
- End user impact of accessibility standards
- Buying accessible technology
- Projects that shift left for accessibility
- Creating accessible visual content
- Web application accessibility
Find links to the recordings, transcripts, and handouts for the sessions at Recordings Available: MNIT Global Accessibility Awareness Day Sessions.
Request: The Cognitive and Learning Disabilities Task Force Wants Your Feedback!
The Cognitive and Learning Disabilities Accessibility Task Force (COGA) published Making Content Usable for People with Cognitive and Learning Disabilities. They are starting work on a second version, and would like your help. They have a survey asking about:
- User needs missed – a need that is not already covered.
- New research they should review.
- People who may wish to help with the second version.
The survey uses a Google form: COGA survey – Your impressions of Making Content Usable. The first page of the survey has more details. Have questions? Email the group: public-coga-comments@w3.org. You can also reach out to the group facilitator, Lisa. Thank you!
Tech Tip: Magnification
Make magnification a part of your planning and accessibility testing.
- Many people use magnification, including older adults and people with vision disabilities.
- The ability to magnify is often essential when using smaller devices.
- Many automated checkers do not run magnification tests.
Success Criteria to Meet
Note: 1.4.10 Reflow (AA) is also important to review for those meeting WCAG 2.1 and those that want to support greater accessibility. More on this in future editions of this newsletter.
Planning
Documents need:
- Visually clear text. Images of text may become blurry when magnified. They also will not support passing other success criteria.
Webpages need (example, not a complete list):
- (Same as documents) Visually clear text. Images of text may become blurry when magnified. They also will not support passing other success criteria.
One way to meet this success criteria is to use “technology that has commonly-available user agents that support zoom.”
Read more in the Techniques section of the Understanding Document listed above.
Check a Document
- Use CTRL and +, the zoom slider, or the view settings to magnify your document to 200%.
- Review the document for anything blurry. Note: there are often compression settings for graphics that reduce the quality. This helps with document size but could impact how people use your document. 1.4.4 does not specifically talk about graphics. Remember: if someone needs magnification, they will miss essential information in blurry graphics.
- For more complex documents (like PDF Forms): make sure you can use all interactive elements, like drop-down lists.
Check a Website
- Use CTRL and + to set your magnification to 200%. Browser settings also have ways to get to 200%. Look for terms like "Zoom."
- Review the site for anything blurry.
- Make sure you can use all interactive elements, like dropdown menus and panes.
- Advanced testers: check to see if this meets 1.4.10. Check for horizontal scroll bars across the bottom of the page and specific areas of content.
Ready for More?
Software, mobile apps, and other digital content must also be usable by people who need to magnify. Explore testing options using your device settings, and in-environment (like software specific) settings. Read the Understanding Document for the success criteria. And, start talking with colleagues about magnification! Working together, more people will be able to use your digital information.
|