Ensure sufficient color contrast between text and backgrounds to guarantee readability for users with visual impairments.
Low contrast text is difficult to read for everyone, but it can be impossible for users with low vision or color blindness. Good contrast also helps users in challenging environments, such as reading on a mobile screen in bright sunlight.
Experiment with text and background colors to see if they meet accessibility standards.
Normal text (16px/12pt). The quick brown fox jumps over the lazy dog.
Requires a contrast ratio of at least 4.5:1. This applies to body text and smaller headings.
Requires a contrast ratio of at least 3:1. Large text is defined as 18pt (24px) or 14pt (18.66px) bold.
Essential graphical objects (icons, input borders) must also meet the 3:1 contrast ratio against adjacent colors.
The gold standard. Requires 7:1 for normal text and 4.5:1 for large text. Aim for this when possible.
Use tools like Figma plugins (Stark, Contrast) to check your designs while you work.
Always use a scrim (overlay) or drop shadow when placing text over variable background images.
Ensure hover and focus states maintain sufficient contrast, not just the default state.