Color Contrast
If you use colors to denote section breaks or to add style to your document, ensure they are compliant with the 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 bolded 14 point text (typically 18.66px), 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.
Microsoft Word's accessibility checker will detect noncompliant contrast ratio on text and background color combinations. It cannot detect contrast problems introduced by an image of text.
How do I test my Color Contrast?
- Highlight the text you wish to test.
- Under the font options select the text font icon.
- With the text font icon expanded, select More Colors.
- Make sure the Custom tab is selected and look for the Hex value.
- On Mac, select the Color Sliders icon (second from left) and choose RBG Sliders to find the Hex data.
- Copy the Hex value and test your font using WebAIM Color Contrast Checker Links to an external site..
Color Contrast Tools
WebAIM provides a web based color contrast checker for free. It will quickly and easily tell you if your color choices are WCAG compliant.