Importance of Color Contrast

By using foreground and background colors that create a significant contrast, it ensures that visitors with low vision, low contrast vision, or color blind disabilities can read your web page content.

The WCAG requirement for the visual presentation of text is a contrast ratio of at least 4.5:1, with the following exceptions:

• Large Text:  3:1 ratio
• Decoration or Non-Essential Text: no contrast requirement
• Logos: no contrast requirement

WebAIM provides a color contrast checker tool where you can place the hex codes of your foreground and background colors used on a page to confirm if the contrast is sufficient to pass compliance.