Color Contrast
If you use colors to denote section breaks or to add style to your document, ensure they are compliant with the web content accessibility guidelines (WCAG) rules for color contrast.
Color Contrast Rules
- Text and images of text have a contrast ratio of at least 4.5:1.
- Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.
- Non-text contrast of user interface components and graphical objects has a minimum contrast ratio of at least 3:1 against adjacent colors.
How do I test my Color Contrast?
- Highlight the text you wish to test.
- Under the font options select the font icon.
- With the text font icon expanded, select More Colors.
- Make sure the Custom tab is selected and look for the Hex value.
- Copy the Hex value and test your font using WebAIM Color Contrast Checker
Color Contrast Tools
WebAIM provies a web based color contrast checker for free.
Color Reliance
Ensure that you do not use color as the sole means for indicating meaning. Use bold and italics styling for emphasis instead of underlined text, which usually denotes a hyperlink.
If you use charts in your presentation, use the tools above to verify that each element in the chart meets color contrast rules.