Color contrast for accessibility

Color is a powerful tool for delivering information and impacting users' emotions. Designers rely on color to inform users about errors, indicate active and disabled states, show interactivity, group related objects, or make an element stand out.

That's why it is so crucial to maintain a sufficient color contrast ratio. It's especially relevant for mobile devices that people often use outside under extreme sunlight where they may not be able to see interface elements well.

WCAG’s standards require a color contrast ratio of at least 4.5:1 for normal-sized text (smaller than 24px or 18.5px if bold) and at least 3:1 for larger text (larger than 24px or 18.5px if bold).

Web Aim Contrast Checker is one of the most popular tools for checking the contrast ratio between your background and text.