Color Contrast Ratio

Color contrast ratio compares the relative luminance of a lighter colour with a darker adjacent colour, from 1:1 for no contrast to 21:1 for black and white. Under WCAG 2.2 Success Criterion 1.4.3 at Level AA, text and images of text generally need at least 4.5:1; large-scale text needs at least 3:1. WCAG defines large-scale text as at least 18 point, or 14 point when bold—approximately 24 CSS pixels or 18.5 CSS pixels respectively.

Why it matters: Test the colours that users actually see, including text over images or gradients, placeholders, hover and focus states, errors, selected states, and high-contrast or theme variants. Do not round a near miss up to the threshold. WCAG 2.2 also calls for at least 3:1 contrast where visual information is needed to identify active controls, their states, or meaningful graphics. Logos, incidental text, and inactive controls have specific exceptions. Passing contrast alone does not establish page-level WCAG conformance, and colour must not be the only visual way to convey information. Combine automated checks with inspection of rendered states and content meaning.