For our November Accessibility Focus, we are focusing on Color Contrast. These articles and videos will introduce you to contrast accessibility requirements, so you know how to fix and avoid low contrast errors on your own website.
Then, if you need more, explore our advanced resources to dive into low contrast accessibility further.
Featured Color Contrast Article
Accessibility contrast requirements explained and how to fix 5 common low-contrast issues
Contrast has different rules depending on the content. Plus, there are a handful of tools to help fix low contrast errors. We’ll review all this and provide a contrast activity to share with your team.
Color Contrast Videos
Find and fix contrast issues with WebAIM’s contrast checkers and ColorZilla
Use WebAIM’s contrast checker and link contrast checker with ColorZilla to find and fix contrast issues with text, images, or links.
Find and fix contrast issues with the WAVE extension
Use WebAIM’s WAVE extension’s Detail and Contrast tabs to find and fix low contrast accessibility errors.
Find and fix contrast issues with Chrome Inspect
Use Chrome Inspect’s color picker to find and fix contrast accessibility issues with text.
Thomas Watkins presents Getting to the Core of Data Visualization Accessibility
Thomas Watkins, a usability specialist, demonstrates the importance of accessible data visuals and shares examples to help others start building more accessible data visualizations.
More Color Contrast Articles
Contrast and Color Accessibility
Get a quick introduction to color and contrast ratios. Followed by an in-depth explanation of the contrast requirements with examples.
Very low contrast
Learn more about the low contrast error, where they happen, how to fix them, and how to prevent them.
Very low contrast – example
A real-life example of how to find and fix a low contrast issue.
Low-Contrast Text Is Not the Answer
Low-contrast text may be trendy, but it is also illegible, undiscoverable, and inaccessible. Instead, consider more usable alternatives.
Advanced Resources
Color Contrast
Learn more about color contrast with HTML and CSS code examples.
An Accessibility-First Approach To Chart Visual Design
This case study demonstrates how an accessibility-first approach led to a better visual design for charts.
Understanding Success Criterion 1.4.11: Non-text Contrast
Discover W3C’s intent behind this requirement, who it impacts, and several examples of graphics that fail or pass this success criterion.
Share questions, feedback, and experiences on Twitter using #AccessibilityFocus.
Get each month’s accessibility focus in your inbox
Want to receive emails when each month’s accessibility focus is launched, and about other accessibility topics?
If you subscribe, we’ll email you web accessibility insights or things we learn once a month. You can unsubscribe at any time.