Accessibility Checklist: Color Contrast
Bobby Bailey
How to Ensure Colors Are Readable for Everyone
Proper color contrast is essential for readability, especially for people with low vision, color blindness, or visual impairments. Use this checklist to ensure colors meet accessibility standards.
10-Point Accessible Color Contrast Checklist
Number one: Text has sufficient contrast against the background
Regular text must have a contrast ratio of at least 4.5:1. Large text (18pt or 14pt bold) must have a contrast ratio of at least 3:1.
Number two: Icons and graphical elements meet contrast requirements
Essential icons (e.g., navigation, controls) should have a 3:1 contrast ratio. Decorative icons that don’t convey meaning do not need contrast adjustments.
Number three: Interactive elements have clear visual distinctions
Buttons and links should stand out from surrounding content. Ensure states (hover, focus, active) maintain strong contrast.
Number four: Do not use color alone to convey meaning
Use text, icons, or patterns in addition to color for important messages. Example: Instead of just using red for errors, include an icon or text like "Error: Invalid input."
Number five: Ensure sufficient contrast in charts and graphs
Use patterns, labels, or symbols instead of relying on color differences. Provide alternative text or a data table for screen reader users.
Number six: Form fields have clear contrast and borders
Input fields should not rely on faint borders that blend into the background. Placeholder text should have enough contrast and should not replace labels.
Number seven: Focus indicators are visible and high contrast
Keyboard focus should be easy to see with a clear outline or background change. Default browser focus outlines should not be removed unless replaced with an accessible alternative.
Number eight: Link text stands out from body text
Links should have a different color and an underline to make them distinguishable. Avoid using only color to differentiate links from normal text.
Number nine: High contrast mode is supported
Ensure content remains usable when Windows High Contrast Mode or macOS Invert Colors is enabled. Test using browser extensions or system settings.
Number ten: Test contrast with accessibility tools
Use contrast checkers like the WebAIM Contrast Checker or axe DevTools. Verify that text and UI components meet WCAG 2.1 contrast standards.