Contrast
Answer
To ensure that information remains perceivable for users with color blindness or low vision, the contrast between colors needs to meet certain thresholds depending on the size of the text. For smaller text, the contrast should be 7:1 or above. For text 14pt or above, the contrast can be as low as 4.5:1.
If you are only using colors present in library templates, colors have already been assessed for contrast.
WebAIM Contrast Checker automatically tests contrast against the WCAG thresholds. To use this contrast checker, it is helpful to use a color picker like ColorZilla (Browser Extension) to find the hexadecimal number for the colors in the project. WAVE can also check the color contrast.
Exceptions:
- Text that is part of a logo or brand name don't have a contrast requirement
- Purely decorative content does not need to meet contrast requirements
Examples:
Do
- Check the contrast of the background and foreground (often text) colors using a contrast checker.