Use Sufficient Color Contrast (Accessibility Principle 2 of 10)
Accessibility Standard WCAG 2.0 AA – Success Criterion 1.4.3 Contrast (Minimum): “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.” For details and exceptions to this guideline, see Understanding SC 1.4.3 ⧉
Why is color contrast important?
Color contrast helps people distinguish the text from the background color under various conditions. Contrast less than 4.5:1 may make the text difficult to read on mobile devices in strong light or by populations who are elderly or colorblind.
Note: For full-screen video, click
Sufficient color contrast ensures that your audience can read what you have written. You can identify adequate color combinations for your content by using a color contrast checker.
How do I check my color contrast?
Note: For full-screen video, click
The most versatile way to check the color for any content on your computer screen is to use the The Paciello Group’s Colour Contrast Analyser ⧉, which you installed during Step 1.
Enter the foreground (text) color and the background color using RGB (Red Green Blue) values or Hex (hexadecimal) codes. Some checkers may use an “eyedropper” tool or color palate selector for convenience. It may be helpful to zoom 200% on your text so that you have a easier target.
You are also welcome to try any of the following tools:
- Web-based color contrast tools such as the WebAIM Color Contrast Checker ⧉ and SBF Color Contrast Checker / Analyzer ⧉
- Color Safe ⧉ is great for developing an accessible color palate
- Several free web browser plugins can test color contrast, including The WAVE Evaluation Tool for Chrome ⧉ and the AInspector Sidebar ⧉ for Firefox
- D2L has a built-in color contrast checker when using the text “select color” tool