Identify and correct insufficient color contrast ratios in web interfaces to meet WCAG 2.1 standards
Red error button on light pink background Good catch. This red (#D32F2F) on pink (#FCE4EC) has 2.8:1 contrast—below 4.5:1. Change the background to white or darken the red to #B71C1C for 5.2:1. This component needs attention. The button uses only color to signal errors, violating accessibility rules. Gray form label text Correct. Gray (#999999) on white has 5.8:1 contrast—acceptable. This passes WCAG AA for normal text. Check the contrast ratio. This label is actually readable. Blue link in footer Yes. Medium blue (#0066CC) on dark gray (#333333) has 4.7:1—meets 4.5:1 minimum. But add underline or icon to avoid relying on…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in