Color Contrast

For regular text: AA — at least 4.5:1, AAA — 7:1. For large text (18px+ or 14px bold+): AA — 3:1, AAA — 4.5:1. Contrast affects readability for people with low vision and in poor lighting.

Lighten or darken the text or background. Increase the brightness difference: dark text on a light background, or vice versa. Use Color Converter to find shades with the desired lightness (HSL Lightness). Avoid gray on gray.

The contrast ratio is calculated for the final color after layers are composited. Semi-transparent text over a background has a different contrast from opaque text. For an accurate check, use the final computed colors or check in a browser.

Large text is at least 18pt (24px) regular or 14pt (18.5px) bold. Contrast requirements are lower for this text (3:1 for AA), because large characters are easier to distinguish. Icons and UI elements may also qualify under these rules.

Accessibility is regulated in some countries (the EU and the US public sector). Even when it is not required, following WCAG improves the user experience for everyone and reduces the risk of lawsuits. Contrast is one of the easiest criteria to meet.