Embedded Files
Color contrast ratio measures the difference in brightness between text (or important visuals) and its background to ensure readability. Sufficient contrast helps users with low vision or color blindness distinguish content easily, improving overall accessibility.
Use color combinations that meet WCAG guidelines—typically a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Instead of light gray text on a white background, use dark gray or black text to increase contrast and readability.
Guidance to Improve Color Contrast:
Guidance to Improve Color Contrast:
Ensure Sufficient Text-to-Background Contrast
Ensure Sufficient Text-to-Background Contrast
Use text colors that stand out clearly against the background.
Avoid light gray text on white or pastel backgrounds.
Check headings, body text, and labels for contrast.
WCAG Alignment
1.4.3 Contrast (Minimum) (AA): Text and images of text must have a contrast ratio of at least 4.5:1, except for large text, incidental text, or logos.
Recommended Actions:
Use built-in contrast checkers or the WebAIM Contrast Checker to verify accessible ratios with the color picker/ eye dropper tool.
Choose darker shades for text with lighter backgrounds or vice versa.
Avoid Conveying Information by Color Alone
Avoid Conveying Information by Color Alone
Do not rely solely on color to indicate meaning such as red = required, green = optional.
Use labels, patterns, or icons in addition to color.
WCAG Alignment
4.1 Use of Color (A): Color must not be the only visual means of conveying information.
Recommended Actions:
Review materials to make sure no critical instruction depends only on color.
Add text labels in addition to color such as “Required” or “Optional” next to colored indicators.
Check Contrast of Non-Text Elements
Check Contrast of Non-Text Elements
Ensure contrast for interface components like buttons, form fields, focus indicators, and icons.
Non-text visual elements should be distinguishable from surrounding elements.
WCAG Alignment
1.4.11 Non-text Contrast (AA): Visual components must have a contrast ratio of at least 3:1 against adjacent colors, except when inactive or decorative.
Recommended Actions:
Ensure interactive elements are easy to see and identify on slides, documents, or other files.
Adjust the color or outline of elements to make them visually distinct.
Resources:
Resources:
Page updated
Report abuse