Ensure there is sufficient contrast between foreground and background colors.
For all consumers of visual content, adequate light-dark contrast is needed between the relative luminance of text and its background for good readability. Having color contrast is crucial for users with low vision or colorblindness.
How?
Follow WCAG color contrast guidelines to help ensure your content can easily be read by all sighted users.
Use a contrast checker to verify that the ratio between foreground and background colors meet accessibility standards​.
The WebAIM Contrast Checker is one recommended tool. To meet accessibility standards:
- Paragraph text must have a contrast ratio of 4.5:1 (WCAG 2.1 AA).
- Large text must have a contrast ratio of 3:1 (WCAG 2.1 AA).
- WCAG defines large text as 18 point and larger, or 14 point and larger if it is bold
- Ensure interactive elements like links and buttons have enough contrast against their background to remain easily visible.
Finding Hex Values
When selecting a font color (foreground color) in Microsoft applications, select the More Colors… option to open the Colors dialog box. Alternatively, consider using high-contrast only colors, as indicated by the toggle switch.
Navigate to the Custom tab to find your selected color’s hex value. Paste this value into contrast checker tools.
Eye Dropper Tool
If you are unable to easily find the hex value, you can use the WebAIM Contrast Checker‘s eye dropper tool.
To find the eye dropper tool, click on the Color Picker field use the slider, eye dropper, RGB code, or gradient panel to select various colors.Â
Title II of the Americans with Disabilities Act:Â All Minnesota State employee electronic documents and course materials must adhere to the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards by April 24, 2026. These guidelines provide a comprehensive framework to ensure that content is perceivable, operable, understandable, and robust for all users.
